jquery 实现导航栏滑动效果
精简的代码实现导航栏滑动效果，实现详解：css
1.滑块位置：经过父节点position=fixed，子节点position=absolute方式，实现子节点浮动；html
2.导航栏居中：经过left=0px，right=0px，margin-left=auto，margin-right=auto实现；前端
3.经过jQuery动态改变滑块的Left和Width，而后经过animate实现动画效果。jquery
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"></meta> 5 <title>滑动导航栏</title> 6 <script scr=""></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 7 <link rel="stylesheet" href="style.css" type="text/css" /> 8 <style type="text/css"> 9 body,div,p{ 10 margin:0; 11 padding:0; 12 } 13 .nav{ 14 background-color:black; 15 position:fixed; 16 left:0px; 17 right:0px; 18 width:80%; 19 margin:10px auto; 20 text-align:center; 21 height:37px; 22 } 23 .nav a{ 24 padding:10px; 25 color:white; 26 line-height:30px; 27 text-decoration:none; 28 height:37px; 29 } 30 #navslip{ 31 height:2px; 32 background-color:#8f919e; 33 position:absolute; 34 bottom:7px; 35 width:0px; 36 left:0px; 37 display:none; 38 overflow:hidden; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="nav"> 44 <a href="http://baidu.com" target="_black" >百度</a> 45 <a href="http://sina.com" target="_black" >新浪</a> 46 <a href="http://58.com" target="_black" >58同城</a> 47 <a href="http://sentsin.com/message/" target="_black" title="留言">致时光</a> 48 <a href="http://sentsin.com/daohang/" target="_black">前端圈</a> 49 <i id="navslip"></i> 50 </div> 51 <script> 52 $(function (){ 53 setSlip(); 54 }); 55 var setSlip = function(){ 56 var slip = $('#navslip'); 57 var a = $('.nav a:first'); 58 //初始化滑块 59 slip.css({ 60 'width':a.width()+10, 61 'left' :parseInt(a.position().left) + 5 +'px' 62 }); 63 $('.nav a').mouseenter(function(){ 64 //显示滑块 65 if(slip.css('display') == 'none'){ 66 slip.show(); 67 }; 68 //移动滑块 69 slip.stop().animate({ 70 width: $(this).width()+10, 71 left: parseInt($(this).position().left) + 5 +'px' 72 },300); 73 }); 74 }; 75 </script> 76 </body> 77 </html>
附上效果图：ide