将动画图像返回原位

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"> 

我觉得解决我的问题应该是简单的......什么我m缺少按钮的onclick函数？或者我将不得不创建一个全新的函数来重置/返回图像到原来的位置？

Answer 1

我改变了很多：

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 2

这个怎么样？

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 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使用率动画。