你的位置:首页 > Java教程

[Java教程]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。。。