Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptで基本的なアニメーションを実装する方法は？

JavaScriptで基本的なアニメーションを実装するには、DOMオブジェクトのプロパティとJavaScriptを使用します。次のリストには、さまざまなDOMメソッドが含まれています。

  • JavaScript関数getElementById（）を使用しています DOMオブジェクトを取得し、それをグローバル変数imgObjに割り当てます。
  • 初期化関数init（）を定義しました 初期化するimgObj 位置を設定する必要がある場所 および左 属性。
  • ウィンドウの読み込み時に初期化関数を呼び出しています。
  • 最後に、 moveRight（）を呼び出します 左の距離を10ピクセル増やす機能。さらに、負の値に設定して左側に移動することもできます。
<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
         var imgObj = null;
         function init() {
            imgObj = document.getElementById('myImage');
            imgObj.style.position= 'relative';
            imgObj.style.left = '0px';
         }
         function moveRight() {
            imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
         }
         window.onload =init;
         //-->
      </script>
   </head>
   <body>
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type="button" value="Click Me" onclick="moveRight();" />
      </form>
   </body>
</html>

  1. JavaScriptでポリモーフィズムを実装する方法は？

    ポリモーフィズム ポリモーフィズム オブジェクト指向プログラミング（OOP）の信条の1つです。特定の提供されたオブジェクトとの動作を共有またはオーバーライドできるようにオブジェクトを設計するのに役立ちます。 ポリモーフィズム 継承を利用する これを実現するために。 次の例では、クリケットなどの子オブジェクト およびテニス 選択を上書きしました 親オブジェクトから呼び出されたメソッドゲーム 出力に示されているように、それぞれ新しい文字列を返しました。一方、 select をオーバーライドする代わりに、別の子オブジェクト「football」 メソッド、メソッドを共有（継承）し、出力に示されてい

  2. JavaScriptで非同期ループを実装する方法は？

    以下は、JavaScriptで非同期ループを実装するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> &nbs