1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js-弹性运动</title> 6 <style type="text/css"> 7 body,div,ul,li{margin:0;padding:0;} 8 ul,li{ list-style:none} 9 .box{ position:relative; margin:200px} 10 .box ul li{ width:150px; height:30px; background:#0033CC; line-height:30px; font-size:14px; font-weight:bolder; text-align:center; float:left; border-right:1px solid #FFF; color:#FFFFFF} 11 .box .current{ width:150px; height:5px; background:#FFCC66; position:absolute; top:27px; left:0px} 12 13 14 </style> 15 </head> 16 <script type="text/javascript"> 17 18 window.onload=function(){ 19 20 var oBox=document.getElementById("box"); 21 var oLi=oBox.getElementsByTagName("li"); 22 var oCurr=oBox.getElementsByTagName("div")[0]; 23 24 for(var i=0;i<oLi.length;i++){ 25 26 oLi[i].onmouseover=function(){ 27 28 startMove(oCurr,this.offsetLeft); 29 } 30 31 } 32 oBox.onmouseout=function(){ 33 34 startMove(oCurr,0); 35 36 } 37 38 var speed=0; 39 var iStyle=0; 40 function startMove(obj,tager){ 41 42 clearInterval(obj.timer); 43 obj.timer=setInterval(function(){ 44 45 speed+=(tager-obj.offsetLeft)/5; 46 speed*=0.7; 47 48 iStyle+=speed; 49 50 51 if(Math.abs(speed)<1 && Math.abs(iStyle-tager)<1){ 52 clearInterval(obj.timer); 53 oCurr.style.left=tager+"px"; 54 55 56 }else{ 57 oCurr.style.left=iStyle+"px"; 58 } 59 //alert(Math.abs(iStyle-tager)); 60 document.title=speed+"====="+oCurr.offsetLeft; 61 62 63 },30); 64 65 } 66 67 68 } 69 70 71 </script> 72 <body> 73 74 <div class="box" id="box"> 75 <div class="current"></div> 76 <ul> 77 <li>商家首页</li> 78 <li>商家首页</li> 79 <li>商家首页</li> 80 <li>商家首页</li> 81 <li>商家首页</li> 82 <li>商家首页</li> 83 84 </ul> 85 </div> 86 87 </body> 88 </html>