                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

老湿有个问题一直困扰我：

正常是这样：
window.onload=function () {
    var myName = document.getElementById("tddd");
    myName.onmouseover = function () {
        startMove();
    }
}
    var time = null;

    function startMove() {
        clearInterval(time);
        var myName = document.getElementById("tddd");
        setInterval(function () {
            if (myName.offsetLeft == 150) {
                clearInterval(time);
            } else {
                myName.style.left = myName.offsetLeft + 1 + "px";
            }
        }, 30)
    }
    

第二种第二个函数是在第一个函数里面也就是startMove执行函数在鼠标事件函数里面{}，可以执行。    
window.onload=function () {
    var myName = document.getElementById("tddd");
    myName.onmouseover = function () {
        startMove();
    }

    var time = null;

    function startMove() {
        clearInterval(time);
        var myName = document.getElementById("tddd");
        setInterval(function () {
            if (myName.offsetLeft == 150) {
                clearInterval(time);
            } else {
                myName.style.left = myName.offsetLeft + 1 + "px";
            }
        }, 30)
    }
    }
增加一个移开事件onmouseout之后，按照第二种，移开鼠标物体继续向前运动。这个是怎么回事，老湿帮帮解释下。。。。。。。。。。。。

慕侠6683825

2015-09-09

源自：JS动画效果

关注问题我要回答

548

操作

收起

1 回答

慕侠6683825 提问者
2015-09-09

移开是这样：

window.onload=function () {
    var myName = document.getElementById("tddd");
    myName.onmouseover = function () {
        startMove();
    }
    myName.onmouseout = function () {
        startMove1();
    }

    var time = null;
    function startMove() {      
        clearInterval(time);
        var myName = document.getElementById("tddd");
        setInterval(function () {
            if (myName.offsetLeft == 150) {
                clearInterval(time);
            } else {
                myName.style.left = myName.offsetLeft +1 + "px";
            }
        }, 30)
    }
    function startMove1() {
        clearInterval(time);
        var myName = document.getElementById("tddd");
        setInterval(function () {
            if (myName.offsetLeft == -20) {
                clearInterval(time);
            } else {
                myName.style.left = myName.offsetLeft -1 + "px";
            }
        }, 30)
    }
}

结果是移开物体继续向前走，


正常是这样：

window.onload=function () {
    var myName = document.getElementById("tddd");
    myName.onmouseover = function () {
        startMove();
    }
    myName.onmouseout = function () {
        startMove1();
    }
    }

    var time = null;
    function startMove() {      
        clearInterval(time);
        var myName = document.getElementById("tddd");
        setInterval(function () {
            if (myName.offsetLeft == 150) {
                clearInterval(time);
            } else {
                myName.style.left = myName.offsetLeft +1 + "px";
            }
        }, 30)
    }
    function startMove1() {
        clearInterval(time);
        var myName = document.getElementById("tddd");
        setInterval(function () {
            if (myName.offsetLeft == -20) {
                clearInterval(time);
            } else {
                myName.style.left = myName.offsetLeft -1 + "px";
            }
        }, 30)
    }