原生javascript 基础动画原理
一、实现原理：
1、开定时器前先清除定时器
2、设置定时器
3、当前元素的位置 + 每一步的长度
4、当元素当前位置超过目标点时，把当前位置==目标点
5、设置元素位置，开始运动
6、判断当前位置如果到达目标点，则清除定时器
二、代码
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding: 0;} div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;} </style> </head> <body> <button id="btn">开始</button> <div id="box"></div> <script type="text/javascript"> window.onload = function(){ var btn = document.getElementById('btn'); var box = document.getElementById('box'); var speed; btn.onclick = function(){ // 1、开定时器前先清除定时器 clearInterval(box.timer); // 2、设置定时器 box.timer = setInterval(function(){ // 3、当前元素的位置 + 每一步的长度 speed = box.offsetLeft + 11; // 4、当元素当前位置超过目标点时，把当前位置==目标点 speed > 800 ? speed = 800 : null; // 5、设置元素位置，开始运动 box.style.left = speed +'px'; // 6、判断当前位置如果到达目标点，则清除定时器 if(speed == 800){ clearInterval(box.timer); } },20) } } </script> </body> </html>
