<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} li{list-style: none;} ul{width:400px;height: 30px;position: relative;margin: 100px auto 0;} li{float: left;width: 98px;height: 28px;line-height: 28px;border: 1px solid #ccc;text-align: center;z-index: 2;position: relative;cursor: pointer;} .bg{width: 100px;height: 5px;overflow: hidden;background: red;border: none;position: absolute;top: 24px;left: 0;z-index: 1;} </style> <script> window.onload=function(){ var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); var oBg=aLi[aLi.length-1]; var i=0; for(i=0;i<aLi.length-1;i++){ aLi[i].onmouseover=function(){ startMove(oBg,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(left-iTarget)<1) { clearInterval(obj.timer); obj.style.left=iTarget+'px'; } else { obj.style.left=left+'px'; // document.title=obj.offsetLeft+' / '+iTarget+' / '+iSpeed; } },30); }; </script> </head> <body> <ul id="ul1"> <li>首页</li> <li>关于我们</li> <li>产品</li> <li>联系方式</li> <li class="bg"></li> </ul> </body> </html>
效果如下图所示：
