&引用；L"；方向javascript动画

我想让我的动画有一个“L”方向。下降后，它将向右移动。但当我尝试这样做时，它只会沿着对角线的路径移动

(function () {    
    var speed = 50,
        walkingCat = document.getElementById("catwalk"),
        catWalk = function () {    
            left = walkingCat.offsetLeft,
            moveBy = 10;    
            walkingCat.style.left = left + moveBy + "px";    
        if (left > 850) {
            clearInterval(timer);
        }
    };    
    var timer = setInterval(catWalk, speed);        
    var catWalkDown = function () {            
        var top = walkingCat.offsetTop,
            moveBy = 10;    
            walkingCat.style.top = top + moveBy + "px";    
        if (top > 850) {
            clearInterval(timer2);
        }
    };    
    var timer2 = setInterval(catWalkDown, speed);       
} ());

试着这样-

Html

<div id="catwalk" style="position:relative;width:5px;height:5px;background:black"> </div> 

---

您的代码正在执行您期望的操作。同时向下和向右移动（计时器启动时）。如果您的意思是“L”向左移动，那么您希望减小

向左

而不是增大它。

(function () { 
    var speed = 50,
    walkingCat = document.getElementById("catwalk"),
    timer =null,
    catWalk = function () { 
        left = walkingCat.offsetLeft,
        moveBy = 10; 
        walkingCat.style.left = left + moveBy + "px"; 
    if (left > 550) {
        clearInterval(timer);
    } 
}; 
var catWalkDown = function () {

    var top = walkingCat.offsetTop,
        moveBy = 10;

        walkingCat.style.top = top + moveBy + "px";

    if (top > 550) {
        clearInterval(timer2);
        timer = setInterval(catWalk, speed); 
    } 
}; 
var timer2 = setInterval(catWalkDown, speed); }());