zoukankan      html  css  js  c++  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。。。

  • 相关阅读:
    [Luogu] 封锁阳光大学
    [other] Div
    [USACO11DEC] 牧草种植Grass Planting
    [Luogu] 仓鼠找sugar
    [USACO15DEC]最大流Max Flow
    [noip-2013] 货车运输
    [模板] 普通平衡树
    [Luogu] 树链剖分
    [ZJOI2008] 树的统计Count
    大组合数取模
  • 原文地址:https://www.cnblogs.com/jokerspace/p/5695042.html
Copyright © 2011-2022 走看看