jquery 實現導航欄滑動效果
阿新 • • 發佈：2019-02-01
精簡的程式碼實現導航欄滑動效果，實現詳解：
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>