<!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现滑动的弹性导航</title> <style type="text/css"> body,ul,li { margin:0; padding:0; } ul { list-style:none; } .box { background-color:#1a1a1a; margin-top:20px; } .nav { 1000px; height:45px; margin:0 auto; position:relative; } .nav li { float:left; 100px; line-height:45px; position:relative; z-index:2; text-align:center; } .nav a { height:45px; display:block; color:#eee; font-size:14px; text-decoration:none; } #mask { 100px; height:45px; background-color:#028eec; position:absolute; top:0; left:0; } </style> </head> <body> <div class="box"> <div id="nav" class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">前端规范</a></li> <li><a href="#">社区</a></li> <li><a href="#">微笔记</a></li> <li><a href="#">教程</a></li> <li><a href="#">网页制作</a></li> <li><a href="#">设计动态</a></li> <li><a href="#">技术文档</a></li> <li><a href="#">瀑布流</a></li> <li><a href="#">移动页面</a></li> </ul> <div id="mask"></div> </div> </div> <script type="text/javascript"> window.onload = function(){ var aLink = document.getElementById("nav").getElementsByTagName("li"); var oMask = document.getElementById("mask"); for(var i=0; i<aLink.length; i++){ aLink[i].onmouseover = function(){ startMove(oMask, this.offsetLeft); } } } var iSpeed = 0; var left = 0; function startMove(obj, iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ iSpeed += (iTarget-obj.offsetLeft)/5; iSpeed *= 0.7; left += iSpeed; if(Math.abs(iSpeed)<1 && Math.abs(iTarget-left)<1){ clearInterval(obj.timer); obj.style.left = iTarget+"px"; }else{ obj.style.left = left+"px"; } }, 30); } </script> </body> </html>