JS多物体运动_缓冲运动 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta http-equiv="content-type" charset="utf-8" />
 5     <meta http-equiv="content-type" content="text/html" />
 6     <title>demo</title>
 7 </head>
13 <body>
15 <div id="odiv" style="position:absolute;width:200px;height:200px;background:red;left:0;"></div>
16 <div id="odiv1" style="position:absolute;width:200px;height:200px;background:red;left:0;top:250px;"></div>
17 
18 <script type="text/javascript">
19 var odiv=document.getElementById('odiv');
20 var odiv1=document.getElementById('odiv1');
21 odiv.onclick=function(){move(odiv,500);}
22 odiv1.onclick=function(){move(odiv1,500);}
23 
24 function move(obj,target){
25 
26     clearInterval(dt);
27 var dt=setInterval(function(){
28 var ol=parseInt(obj.style.left);
29     if(ol==target){
30         clearInterval(dt);
31     }else{
32 var speed=(target-ol)/8;
33         speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
34         obj.style.left=ol+speed+"px";
35     }
36     },30);
37 }
38 
39 </script>
40 </body>
41 </html>
posted @ 2012-08-10 09:15  hcjavascript  阅读(1779)  评论(0)    收藏  举报