在特定範圍內的汽車動畫重置

-1

該代碼的目標是讓汽車和雲從頁面的相反兩側移動到每個圖像受尊重的相鄰側。我已經讓他們搬家了。但他們繼續移動瀏覽器瀏覽空間。我想知道的是重置代碼以使汽車和雲重新回到原來位置並再次移動的有效方法。基本上，我想通過他們的代碼來循環汽車和雲。我環顧四周，我記得在2年前的第一學期JavaScript課程中學習了一些東西，這可以幫助我做到這一點，只是我似乎無法找到我要找的東西。在特定範圍內的汽車動畫重置

這是我得到這一點。

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Car Animation</title> 
    <style type="text/css"> 
     body { 
      background-color: #AADDCC; 
     } 
     #imgMyCar{ 
     position:absolute; 
     right:-600px; 
     bottom:0px; 

     } 
     #imgMyCloud{ 
     position: absolute; 
     left: -615px; 
     top: 0px; 

     } 

    </style> 
    <script> 
    var carObject, cloudObject, counter; 
    function setUp(){ 
    carObject=document.getElementById("imgMyCar");// set the carObject to the image tag 
    cloudObject=document.getElementById("imgMyCloud"); 
    counter=-400;//initiliaze the counter to -600 so that the car is slightly off the right side of the screen. 
    moveIt(); // call the moveIt function 

    } 
    function moveIt(){ 
    counter=counter + 5; 
    carObject.style.right=counter + "px"; 
    cloudObject.style.left=counter + "px"; 
    setTimeout(moveIt,10); 

    } 
    </script> 
</head> 
<body onload="setUp()"> 

    <img alt="car" id="imgMyCar" src="car1.png" /> 
    <img alt="cloud" id="imgMyCloud" src="clouds.png" /> 

</body> 
</html>

來源

2013-05-31 Justin Gagnon

您需要測試圖像的位置是否超出了瀏覽器窗口，如果是重置其位置。 – thatidiotguy

你能否給我們提供一個jsfiddle，以便我們能夠更好地看到究竟是什麼問題？謝謝:) –

謝謝thatidiotguy。你的回答非常有幫助！ –

您可以使功能開關direction的值。請檢查更改。我希望你能得到你想要的答案。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Car Animation</title> 
    <style type="text/css"> 
     body { 
      background-color: #AADDCC; 
     } 
     #imgMyCar{ 
     position:absolute; 
     right:-600px; 
     bottom:0px; 

     } 
     #imgMyCloud{ 
     position: absolute; 
     left: -615px; 
     top: 0px; 

     } 

    </style> 
    <script> 
    var carObject, cloudObject, counter, direction; 
    function setUp(){ 
    carObject=document.getElementById("imgMyCar");// set the carObject to the image tag 
    cloudObject=document.getElementById("imgMyCloud"); 
    counter=-400;//initiliaze the counter to -600 so that the car is slightly off the right side of the screen. 
    direction = 1; // set the direction 
    moveIt(); // call the moveIt function 

    } 
    function moveIt(){ 
     counter=counter + (direction * 5); 
     carObject.style.right=counter + "px"; 
     cloudObject.style.left=counter + "px"; 
     if(counter > 500) { 
      direction = -1; 
     } else if(counter < -400) { 
      direction = 1; 
     } 
     setTimeout(moveIt,10); 

    } 
    </script> 
</head> 
<body onload="setUp()"> 
    javascript animation 

    <img alt="car" id="imgMyCar" src="car1.png" /> 
    <img alt="cloud" id="imgMyCloud" src="clouds.png" /> 

</body> 
</html>

來源

2013-05-31 15:38:50 Edward

謝謝愛德華。實際上這很酷，我沒有想到要扭轉動畫的方向。不是我正在尋找的答案，但仍然有效！我確實設法得到我想要的東西。非常感謝！ –

在特定範圍內的汽車動畫重置

回答

相關問題