<script> window.onload=function (){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(0); }; oDiv.onmouseout=function(){ startMove(-200); }; }; var timer=null; function startMove(iTarget){ var oDiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(oDiv.offsetLeft>iTarget) { speed=-10; } else { speed=10; } if(oDiv.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } </script>
基本上元素的运动满足以上的一个框架:
用BOM处理事件,每个事件中调用一个运动函数,函数的参数以一个为好。
在定义运动函数前,初始化一个定时器timer。然后:
DOM-->关闭上一个定时器-->定时函数-->判断是否达到目标(否则开始运动)。
对于独自撸代码的人来说,注意代码的完整与正确是重中之重,否则调到死你也不知道为什么错TAT。。。