标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,div{ margin:0; padding: 0; } #div1{ width: 100px; height: 100px; background: red; margin-top: 20px; position: absolute; left: 0px; } #div2{ width: 1px; height: 400px; left: 500px; top: 0; position: absolute; background: black; } </style> <script type="text/javascript"> //window.onload = function(){ var timer=null; //oBtn.onclick = sMove(); function sMove(){ //var oBtn = document.getElementsByTagName(‘input‘)[0]; var oDiv = document.getElementsByTagName(‘div‘)[0]; clearInterval(timer); //清除，保证再次点击按钮时只有一个定时器，是连续点击按钮，物体会运动越来越快,造成运动混乱； timer = setInterval(function(){ //设置运动速度 var iSpeed = 11; //达到目的地则清除定时器，其中条件选大于等于，因为速度可能不是刚好满整 if (oDiv.offsetLeft >= 500) { clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘; } },30); }; //} </script> </head> <body> <input type="button" value="开始" onclick="sMove(500);"> <div id="div1"></div> <div id="div2"></div> </body> </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body,div{ 8 margin:0; 9 padding: 0; 10 } 11 #div1{ 12 width: 100px; 13 height: 100px; 14 background: red; 15 margin-top: 20px; 16 position: absolute; 17 left: 700px; 18 } 19 #div2{ 20 width: 1px; 21 height: 400px; 22 left: 500px; 23 top: 0; 24 position: absolute; 25 background: black; 26 } 27 </style> 28 <script type="text/javascript"> 29 var timer = null; 30 function sMove(iTarget){ 31 clearInterval(timer); 32 var oDIv = document.getElementById(‘div1‘); 33 timer=setInterval(function(){ 34 //缓冲效果，靠近目的地 速度逐渐变小 35 var iSpeed = (iTarget-oDIv.offsetLeft)/20; 36 //像素出现小数时，会直接取整；ispeed出现零点几的时候oDIv.offsetLeft + iSpeed会舍弃iSpeed，导致后续left不在变化，无法正确到达目的地，需要将速度取整； 37 iSpeed= iSpeed>0? Math.ceil(iSpeed):Math.floor(iSpeed); 38 if(oDIv.offsetLeft == iTarget){ 39 clearInterval(timer); 40 } else{ 41 oDIv.style.left = oDIv.offsetLeft + iSpeed +‘px‘; 42 } 43 },30); 44 } 45 </script> 46 </head> 47 <body> 48 <input type="button" value="开始" onclick="sMove(500);"> 49 <div id="div1"></div> 50 <div id="div2"></div> 51 52 </body> 53 </html>
标签：
原文地址：http://www.cnblogs.com/wjx91/p/5514602.html
