js实战之-弹性运动

 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>
一个不敬业的前端攻城狮