1.
<body> <input id="btn" type="button" value="按钮"> <div id="div"></div> <script> var btn= document.getElementById('btn'); var odiv=document.getElementById("div"); //var timer=null; odiv.timer=null; btn.onclick=function(){ clearInterval(odiv.timer);//防止动画在执行过程中,人为的在不停的点击按钮,不断产生定时器 odiv.timer=setInterval(function(){ var speed =getStyle(odiv,'left',50);//odiv 往右移动50px if(speed>900){ speed=900; } odiv.style.left=speed+'px';//每隔0.1s往右移动10px if(speed==900){//停止移动 clearInterval(odiv.timer); alert(speed); } },200); } function getStyle(obj,attr,step){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30 return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr])+step ; } </script> </body>
2.封装成函数
<style> div{ 50px;height: 50px; background: red;border: 1px solid black; position: absolute; top: 50px; left: 30px} </style> </head> <body> <input id="btn1" type="button" value="往前跑"> <input id="btn2" type="button" value="往后跑"> <div id="div"></div> <script> var btn1= document.getElementById('btn1'); var btn2= document.getElementById('btn2'); var odiv=document.getElementById("div"); odiv.timer=null; btn1.onclick=function(){ doMove(odiv,20,800,50);//odiv往右每次移动20px 到800px位置停止,速度为50ms/次 } btn2.onclick=function(){ doMove(odiv,-20,10,50); } function doMove(obj,stepLength,target,animationVelocity){ clearInterval(obj.timer); odiv.timer=setInterval(function(){ var speed =getStyle(obj,'left')+stepLength;//步长 if(speed>target && stepLength>0){//往右跑 speed=target; } if(speed<target && stepLength<0){//往左跑 speed=target; } obj.style.left=speed+'px';//每隔0.1s 移动stepLength px if(speed==target){//停止移动 clearInterval(obj.timer); } },animationVelocity); } function getStyle(obj,attr){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30 return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]) ; } </script> </body> </html>
3.升级 包装
<input id="btn1" type="button" value="往右跑"> <input id="btn2" type="button" value="往左跑"> <input id="btn3" type="button" value="往下跑"> <input id="btn4" type="button" value="往上跑"> <div id="div"></div> <script> var btn1= document.getElementById('btn1'); var btn2= document.getElementById('btn2'); var btn3= document.getElementById('btn3'); var btn4= document.getElementById('btn4'); var odiv=document.getElementById("div"); odiv.timer=null; btn1.onclick=function(){ doMove(odiv,'left',20,800,50);//让 odiv 以20px/50ms 的速度 跑到距离left为800px的位置停下来 } btn2.onclick=function(){ doMove(odiv,'left',20,10,50); } btn3.onclick=function(){ doMove(odiv,'top',20,500,50);//让 odiv 以20px/50ms 的速度 跑到距离top顶部为500px的位置停下来 } btn4.onclick=function(){ doMove(odiv,'top',20,50,50); } function doMove(obj,attr,stepLength,target,animationVelocity){ stepLength=(getStyle(obj,attr)<target?stepLength:-stepLength);//如果obj所处的位置小于目标位置,则步长取正数,反之取负数 clearInterval(obj.timer); odiv.timer=setInterval(function(){ var speed =getStyle(obj,attr)+stepLength;//步长 if(speed>target && stepLength>0 || speed<target && stepLength<0){ speed=target; } obj.style[attr]=speed+'px';//每隔animationVelocity秒 移动stepLength px if(speed==target){//停止移动 clearInterval(obj.timer); } },animationVelocity); } function getStyle(obj,attr){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30 return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]) ; } </script>