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