之前在网站上看到滑动导航条，一直想自己也做一个类似的，今天心血来潮，终于下决心自己来做出来一个。废话不多说，直接贴代码：写出这样的效果要知道position() , width()函数要理解才可以做出来。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动导航条</title> <script scr=""></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> * { margin:0; padding:0; } .nav { 80%; height:50px; background-color:pink; margin:100px auto; text-align:center; line-height:50px; position:fixed; left:0; right:0; } .nav a { text-decoration: none; color:#000; display:inline-block; padding:0 10px; } #navslip { position: absolute; height:2px; background-color: #8f919e; /* 100px;*/ left:0; bottom:0; display:none; } </style> </head> <body> <div class="nav"> <a href="http://baidu.com" target="_black" style='background-color: red;'>百度</a> <a href="http://sina.com" target="_black" style='background-color: green;'>新浪</a> <a href="http://58.com" target="_black" style='background-color: yellow;'>58同城</a> <a href="http://sentsin.com/message/" target="_black" title="留言" style='background-color: blue;'>致时光</a> <a href="http://sentsin.com/daohang/" target="_black" style='background-color: purple;'>前端圈</a> <i id="navslip"></i> </div> <script type="text/javascript"> $(document).ready(function(){ setSlip(); }); var setSlip = function(){ var slip = $('#navslip'); var a = $('.nav a:first'); // 初始化滑块 slip.css({ "width" : a.width()+20+"px", "left" : parseInt(a.position().left)+'px' }); $('.nav a').mouseenter(function(){ if(slip.css('display') == 'none'){ slip.show(); } //移动滑块 slip.stop().animate({ "width" : $(this).width()+20+"px", "left" : parseInt($(this).position().left)+"px" },500) }) } </script> </body> </html>
