1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #div1{100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 100px} 8 </style> 9 <script> 10 /* 11 实现动画 12 人眼能够识别的最小间隔 18帧 1秒18张图片 13 14 运动中的问题 15 1、不会停 16 2、速度在取某些值的时候不会停 17 3、到达目的值以后，点击还会往前运动 18 需要通过if...else将运动和停止分开 19 4、重复点击，启动多个定时器，速度越来越快 20 保证，在统一时间只能有一个定时器启动。 21 22 每次启动定时器之前，先将上一次的定时器关闭。 23 24 25 运动框架总结: 26 1、运动和停止分开 27 if...else 28 2、每次启动定时器之前，先将上一次定时器关闭。 29 30 31 32 */ 33 34 window.onload = function(){ 35 var oDiv = document.getElementById("div1"); 36 var timer = null; 37 document.onclick = function(){ 38 var speed = 7; 39 clearInterval(timer); 40 timer = setInterval(function(){ 41 42 if(oDiv.offsetLeft >= 500){ 43 clearInterval(timer); 44 }else{ 45 oDiv.style.left = oDiv.offsetLeft + speed + 'px'; 46 } 47 }, 30); 48 } 49 } 50 </script> 51 </head> 52 <body> 53 <div id = 'div1'></div> 54 </body> 55 </html>
浏览器效果：
