setInterval动画运动平移，定时器动画练习
Posted liubingyjui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了setInterval动画运动平移，定时器动画练习相关的知识，希望对你有一定的参考价值。
常见问题：定时器加速问题，每次点击会启动一个定时器，解决先清楚
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画运动平移</title> <style> *{margin:0;padding:0;} #aa1 {position:absolute;left:0;width:100px;height:100px;background:#F00;display:inline-block;} #btn1 {position:absolute;top:120px;} .line {position:absolute;left:300px;width:1px;height:500px;background:#000;} </style> </head> <body> <input type="button" value = "移动" id="btn1"> <div id="aa1"></div> <div id="aa2"></div> <div class=‘line‘></div> <script> //定时器加速问题，每次点击会启动一个定时器，解决先清楚 var oBtn1 = document.querySelector(‘#btn1‘); var oDiv1 = document.querySelector(‘#aa1‘); var timer=null; oBtn1.onclick=function(){ var speed=1; clearInterval(timer); timer = setInterval(function(){ oDiv1.style.left =oDiv1.offsetLeft+speed+‘px‘; if(oDiv1.offsetLeft>=300){ oDiv1.style.left=300+‘px‘; clearInterval(timer); timer =null; } },20) } </script> </body> </html>
以上是关于setInterval动画运动平移，定时器动画练习的主要内容，如果未能解决你的问题，请参考以下文章
移动端滑屏全应用requestAnimationFrame的兼容与使用