动画的基本原理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> #demo{ width:100px; height:100px; background-color: pink; position:absolute; top:30px; left:0; } </style> </head> <body> <button id="btn">开始</button> <div id="demo"></div> </body> </html> <script> function $id(id){return document.getElementById(id);} var timer=null; $id("btn").onclick=function(){ clearInterval(timer); timer=setInterval(function(){ $id("demo").style.left=$id("demo").offsetLeft+10+"px"; if($id("demo").offsetLeft>500) { clearInterval(timer); } },10) } </script>
动画实现原理:
核心原理:通过定时器 setInterval()不断移动盒子位置
实现步骤:
1,获得盒子当前位置
demo.offsetLeft
2,让盒子在当前位置加上1个移动距离
demo.style.left=demo.offsetLeft +10 +"px"
3,利用定时器不断重复这个操作
4,加一个结束定时器的条件
if(demo.offsetLeft>500) { clearInterval(timer); }
5,注意此元素需要添加定位,才能使用 element.style.left