精简的代码实现导航栏滑动效果，实现详解：
1.滑块位置：通过父节点position=fixed，子节点position=absolute方式，实现子节点浮动；
2.导航栏居中：通过left=0px，right=0px，margin-left=auto，margin-right=auto实现；
3.通过jQuery动态改变滑块的Left和Width，然后通过animate实现动画效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>滑动导航栏</title> <script scr=""></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <link rel="stylesheet" href="style.css" type="text/css" /> <style type="text/css"> body,div,p{ margin:0; padding:0; } .nav{ background-color:black; position:fixed; left:0px; right:0px; width:80%; margin:10px auto; text-align:center; height:37px; } .nav a{ padding:10px; color:white; line-height:30px; text-decoration:none; height:37px; } #navslip{ height:2px; background-color:#8f919e; position:absolute; bottom:7px; width:0px; left:0px; display:none; overflow:hidden; } </style> </head> <body> <div class="nav"> <a href="http://baidu.com" target="_black" >百度</a> <a href="http://sina.com" target="_black" >新浪</a> <a href="http://58.com" target="_black" >58同城</a> <a href="http://sentsin.com/message/" target="_black" title="留言">致时光</a> <a href="http://sentsin.com/daohang/" target="_black">前端圈</a> <i id="navslip"></i> </div> <script> $(function (){ setSlip(); }); var setSlip = function(){ var slip = $('#navslip'); var a = $('.nav a:first'); //初始化滑块 slip.css({ 'width':a.width()+10, 'left' :parseInt(a.position().left) + 5 +'px' }); $('.nav a').mouseenter(function(){ //显示滑块 if(slip.css('display') == 'none'){ slip.show(); }; //移动滑块 slip.stop().animate({ width: $(this).width()+10, left: parseInt($(this).position().left) + 5 +'px' },300); }); }; </script> </body> </html>