Reset-Animation in die ursprüngliche Position mit Hilfe von Javascript

Question

das folgende Skript mit i mein Bild konnte nach rechts bewegen, wenn darauf geklickt:

<script> 
var myTimer = null; 

function move(){ 
    document.getElementById("fish").style.left = 
     parseInt(document.getElementById("fish").style.left)+1+'px'; 
} 


window.onload=function(){ 

    document.getElementById("fish").onclick=function(){ 
     if(myTimer == null){ 
      myTimer = setInterval("move();", 10); 
     }else{ 
      clearInterval(myTimer); 
      myTimer = null; 
     } 
    } 
} 
</script> 

ich einige Probleme, um das Bild zu ursprünglichen Speicherort Reseting ohne jQuery zu verwenden.

Wenn jemand helfen kann, wäre das sehr geschätzt.

Answer 1

Wenn Sie die ursprüngliche Position vor der Zeit erfassen Sie später auf den erfassten Wert zurücksetzen:

var originalPosition = document.getElementById("fish").style.left; 

function resetPosition() { 
    document.getElementById("fish").style.left = originalPosition; 
} 

Answer 2

Verwendung externen JavaScript. Einige Code betrachten:

var pre = onload, E, doc, bod;// previous onload 
onload = function(){ 
if(pre)pre(); 

doc = document; bod = doc.body; 
E = function(id){ 
    return doc.getElementById(id); 
} 
var fish = E('fish'), timer; 
fish.onclick = function(){ 
    if(!timer){ 
    timer = setInterval(function(){ 
     fish.style.left = parseInt(fish.style.left)+1+'px'; 
    }, 10); 
    } 
    else{ 
    clearInterval(timer); timer = false; 
    fish.style.left = '0'; // change '0' to what your CSS `left:`value is 
    } 

}// end load 

Answer 3

Dies sollte funktionieren,

    
    var myTimer = null; 
    var startX = 0; 

    function move(){ 
     document.getElementById("fish").style.left = 
      parseInt(document.getElementById("fish").style.left)+1+'px'; 
    } 


    window.onload=function(){ 

     document.getElementById("fish").onclick=function(){ 
      if(myTimer == null){ 
       startX = document.getElementById("fish").style.left; 
       myTimer = setInterval("move();", 10); 
      }else{ 
       clearInterval(myTimer); 
       myTimer = null; 
       document.getElementById("fish").style.left = startX + "px"; 
      } 
     } 
    }