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;200px;height:200px;background:red;left:0;"></div> 16 <div id="odiv1" style="position:absolute;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>