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>

你可能感兴趣的:(js)