JavaScript 运动框架

<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。。。

上一篇:SpringMVC拦截器 - 设置不拦截html,js等静态文件


下一篇:java 设计模式-缺省适配器模式