Javascript moving circle

私は、HTMLベースの監視画面をプログラムする必要があります。Javascript moving circle

表面では、xからyに移動する円を符号化する必要があります。数値xyがxyより大きい場合に限ります。説明するのは難しいけど、彼らは

https://www.solarweb.com

クリックして「「ビューのデモ」をクリックして、最初のシステムを選択するよりも、一番上に「今のプレビューを試すためにクリックし、」Fronius ATザットハイブリッドでそれを持っているように、実際に似て 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

ああ、申し訳ありませんが、スタートページを試してみてください：https://www.solarweb.com/ – simpson

トップにあるsunweb 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)

ポストは考えた：

あなただけの静的イメージ要素を定義し、複数の要素をアニメーション化できます。 1つの要素をアニメートする方法をすでに知っている場合は、同じ知識を複数の要素に適用できます。

出典

2016-08-04 18:58:51 Chris

答えて

関連する問題