<!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> *{ padding:0; margin:0; } #demo{ 100px; height:100px; background-color: pink; position:absolute; top:50px; left:0; } </style> </head> <body> <button id="btn300">300</button> <button id="btn600">600</button> <div id="demo"></div> </body> </html> <script> var btn300=document.getElementById("btn300"); var btn600=document.getElementById("btn600"); var demo=document.getElementById("demo"); btn300.onclick=function () { run(demo,300); } btn600.onclick=function () { run(demo,600); } //封装函数 var timer=null; function run(obj,target) //第一个参数，谁动（做动画的对象），第二个参数，动多少（目标位置） { clearInterval(timer); obj.timer=setInterval(function(){ var step=(target-obj.offsetLeft)/10; step=step >0 ? Math.ceil(step) : Math.floor(step); obj.style.left=obj.offsetLeft+step+"px"; if(obj.offsetLeft==target) { clearInterval(obj.timer); } },10) } </script>
动画函数给不同元素记录不同定时器：
obj.timer
如果多个元素都使用这个动画函数，每次都要 var 声明定时器 ，我们可以给不同的元素使用不同的定时器
核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性