使用javascript將動畫重置為原始位置

Question

使用以下腳本，單擊后我可以向右移動圖片：

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

我在不使用jQuery的情況下將圖片重置到原始位置時遇到了一些麻煩。

如果有人可以提供幫助，將不勝感激。

Answer 1

如果您提前捕獲了原始位置，則可以稍后將其重置為捕獲的值：

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

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

Answer 2

使用外部JavaScript。 一些代碼看一下：

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

這應該工作正常，

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