Question

我一直在研究一个非常简单的动画脚本。单击时图像移动，再次单击时停止等等。我这一切都正常工作。问题是我在图像下方停止了一切按钮，这样不仅可以停止图像，还可以将它们恢复到原始位置。到目前为止它停止了，但它没有返回。

我搜索并找到了一些不同的解决方案，但这是一项大学任务，我不允许使用Jquery。

这是我的剧本：

var timer = null;
var cat = null;
var dog = null;

function moveOver1Pixel()
{
    cat.style.left = parseInt(cat.style.left) + 1 + "px";
}

function moveOver10Pixels()
{
    dog.style.left = parseInt(dog.style.left) + 10 + "px";
}



window.onload=function()
{
        //MOVE CAT FUNCTION
        cat = document.getElementById("cat");

        cat.onclick=function(){
            if(timer == null)
            {
                timer = setInterval("moveOver1Pixel();", 100);
            }else{
                clearInterval(timer);
                timer = null;
            }
        }


        // MOVE DOG FUNCTION
        dog = document.getElementById("dog");

        dog.onclick=function(){
            if(timer == null)
            {
                timer = setInterval("moveOver10Pixels();", 30);
            }else{
                clearInterval(timer);
                timer = null;
            }
        }


        // STOP BUTTON FUNCTION
        document.getElementById("stop").onclick=function()
        {
            window.clearInterval(timer);
            timer = null;
            reset = true;
        }


}

这是我正在使用的html部分：

<img src="cat.jpg" id="cat" style="height:100px;position:absolute;left:10px">
<img src="dog.jpg" id="dog" style="height:100px;position:absolute;left:10px;top:110px">

<input type="button" value="EVERYONE STOP" id="stop" style="position:absolute;left:10px;top:220px">

我觉得我的问题的解决方案应该很简单...我在按钮的onclick功能中缺少的东西？或者我是否必须创建一个全新的功能，将图像重置/返回到原来的位置？

Answer 1

这个怎么样？

document.getElementById("stop").onclick=function()
{
    window.clearInterval(timer);
    timer = null;
    reset = true;
    document.getElementById("cat").style.left = "10px"
    document.getElementById("dog").style.left = "10px"
}

Answer 2

我改变了很多：

var timer, cat, dog, ticksCat = 0, ticksDog = 0,
moveOver1Pixel = function(inc){
    cat.style.left = parseInt(cat.style.left) + inc + "px";
    // Don't change if inc is -1, ~-1 === 0 == false
    if(~inc) ticksCat+=inc;
},
moveOver10Pixels = function(inc){
    dog.style.left = parseInt(dog.style.left) + inc*10 + "px";
    if(~inc) ticksDog+=inc;
};



window.onload=function(){
    //MOVE CAT FUNCTION
    cat = document.getElementById("cat");

    cat.onclick=function(){
        if(!timer){
            timer = setInterval(function(){
                moveOver1Pixel(+1);
            }, 100);
        }else{
            clearInterval(timer);
            timer = null;
        }
    };


    // MOVE DOG FUNCTION
    dog = document.getElementById("dog");

    dog.onclick=function(){
        if(!timer){
            timer = setInterval(function(){
                moveOver10Pixels(+1);
            }, 30);
        }else{
            clearInterval(timer);
            timer = null;
        }
    };


    // STOP BUTTON FUNCTION
    document.getElementById("stop").onclick=function(){
        window.clearInterval(timer);
        timer = null;
        reset = true;
        // to do immediately
        while(ticksCat--){ moveOver1Pixel(-1); }
        while(ticksDog--){ moveOver10Pixels(-1); }

        /* animated
        while(ticksCat--){ setTimeout(function(){moveOver1Pixel(-1)}, 100*ticksCat);}
        while(ticksDog--){ setTimeout(function(){moveOver10Pixels(-1)}, 30*ticksDog);}
          Multiplication on time is to synchronously set a queue of async moves            
        */

    };


};

Answer 3

var timer = null;
var cat = null;
var dog = null;

function moveOver1Pixel()
{
cat.style.left = parseInt(cat.style.left) + 1 + "px";
}

function moveOver10Pixels()
{
   dog.style.left = parseInt(dog.style.left) + 10 + "px";
}



window.onload=function()
{
    //MOVE CAT FUNCTION
    cat = document.getElementById("cat");

    cat.onclick=function(){
        if(timer == null)
        {
            timer = setInterval("moveOver1Pixel();", 100);
        cat.startLeft=cat.offsetLeft;
        cat.startTop=cat.offsetTop;
        }else{
            clearInterval(timer);
            timer = null;
        }
    }


    // MOVE DOG FUNCTION
    dog = document.getElementById("dog");

    dog.onclick=function(){
        if(timer == null)
        {
            timer = setInterval("moveOver10Pixels();", 30);
        dog.startLeft=dog.offsetLeft;
        dog.startTop=dog.offsetTop;
        }else{
            clearInterval(timer);
            timer = null;
        }
    }


    // STOP BUTTON FUNCTION
    document.getElementById("stop").onclick=function()
    {
        window.clearInterval(timer);
        timer = null;
        reset = true;
            if (typeOf cat.startLeft !=undefined)     
        {
        cat.style.left=cat.startLeft+"px";
        cat.style.top=cat.startTop+"px";
        }
    if (typeOf dog.startLeft !=undefined)
        {
        dog.style.left=dog.startLeft+"px";
        dog.style.top=dog.startTop+"px";
        }
    }


}

Answer 4

更现代和“正确”的解决方案是使用css过渡来处理动画，同时使用JS来控制位置：

var cat = document.getElementById("cat");
var dog = document.getElementById("dog");

cat.addEventListener('click', moveIt);
dog.addEventListener('click', moveIt);

function moveIt()
{
    this.style.left = "400px";
}

// STOP BUTTON FUNCTION
document.getElementById("stop").addEventListener('click', function()
{
    cat.style.removeProperty('left');
    dog.style.removeProperty('left');

    //Uncomment for instant-reset
    /*
    cat.style.transitionDuration = dog.style.transitionDuration = '0s'; 

    window.setTimeout(function()
    {
        cat.style.removeProperty('transition-duration');
        dog.style.removeProperty('transition-duration');
    }, 250);
    */
});

你的css看起来像这样：

#cat, #dog
{
    position: absolute;
    left: 10px;
    transition: 10s left linear;
}

#cat
{
    left: 25px
}

#dog
{
    transition-duration: 1s;
}

请参阅此JSFiddle以获取演示：http://jsfiddle.net/SPHMM/3/。当然，如果作业专门用于在javascript中完成所有动画，这可能不算数。但对于现实生活应用程序，这应该提供最佳质量，最低CPU使用率的动画。

将动画图像返回原始位置

4 个答案: