- 基础运动：
-让Div运动起来-速度——物体运动的快慢-运动中的bug
-不会停止-速度去某些值会无法停止
-到达位置后再点击还会运动-重复点击速度加快（开了好几个定时器，定时器并不唯一，在开定时器前关闭定时器）
<!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>
- 缓冲运动
-逐渐变慢，最后停止；和终点的距离越小，速度越小；-距离越远，速度越大；-速度有距离决定；-速度=（目标值-当前值）/缩放系数；-例子：缓冲菜单-BUG:速度取整；-跟随页面滚动的缓冲侧边栏；》潜在问题：目标值不是整数时
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>