Javascript移動圓圈

我需要編寫一個基於html的監控界面。Javascript移動圓圈

對於表面我需要編碼從x移動到y的圓圈，只有當數字xy大於xy時。很難解釋，但實際上類似像他們有它

https://www.solarweb.com

點擊「按現在嘗試預覽」的頂部，比點擊「查看演示」，然後選擇第一個系統「福尼斯AT Sattledt的混合2「

並在左側看到上面的動畫。

我仍然能夠從一個div的開頭運行到最後。但只有1圈！是否有可能連續做更多的圓圈？

也許有人能幫助我:)

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Moving Bullet</title> 
    <meta charset="utf8" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <style> 
    #energieFluss { 
    width: 900px; 
    height: 500px; 
    border: 5px black solid; 
    overflow: hidden; 

    } 

    #bullet { 
    position: relative; 
    left: 50px; 
    top: 25px; 
    } 
    </style>

<body> 

<div id="energieFluss" width="900px" height="500px" color="red"> 
    <img id="bullet" src="ball-blau.png" height ="25" width= "25"> 
    </div> 
<script> 

     var Bullet = document.querySelector ("#bullet"); 
     var currentPos = 0; 

     var requestAnimationFrame = window.requestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.msRequestAnimationFrame; 


     function moveBullet() { 
      currentPos += 8; 


      Bullet.style.left = currentPos + "px"; 


      if (Math.abs(currentPos) >= 900) { 
      currentPos = -50; 
      } 


      requestAnimationFrame(moveBullet); 

     } 
     moveBullet(); 

</script> 
</body>

來源

2016-08-02 simpson

您的鏈接不起作用。我得到一個會話相關的失敗。 – Chris

哦oke，對不起，也許試試開始頁面：https：//www.solarweb.com/ – simpson

比點擊solarweb prewiev頂部，比視圖演示和比選擇第一個系統（Fronius AT Sattledt Hybrid 2） – simpson

我想你會想在這裏做什麼是動態創建的圖像元素，然後動畫他們。你也可以做其他奇特的事情，比如在畫布上渲染，或者使用JavaScript渲染庫來更有效地完成它。

要動態創建的元素，做這樣的事情：

var balls = []; 

// Run this in a loop to add each ball to the balls array. 
var img = document.createElement("img"); 
img.src = "ball-blau.png"; 
img.height = 25; 
img.width = 25; 
document.getElementById("energieFluss").appendChild(img); 
balls.push(img)

後認爲：

你可能只是靜態地定義你的圖像元素和動畫多個元素。如果你已經知道如何動畫一個元素，那麼你可以將同樣的知識應用於多個元素。

來源

2016-08-04 18:58:51 Chris

Javascript移動圓圈

回答

相關問題