“L”方向的脚本动画

"L" direction javascript animation

本文关键字：脚本 动画 方向      更新时间：2023-09-26

我想让我的动画有一个"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);       
} ());

试试这样——

目录 

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

而在.JS

(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); }());
相关文章：