JavaScript を使用して移動 div を作成するにはどうすればよいですか?

モバイル div は、画面内を自動的に移動したり、画面上の位置を変更したりできる Web 要素です。左と上のスタイルプロパティを調整して位置を変更します。 JavaScript を使用してモバイル div を作成するのは比較的簡単なタスクです。必要なのは、ちょっとした HTML、CSS、JavaScript コードだけです。このチュートリアルでは、JavaScript を使用してモバイル div を作成する方法を示します。

HTML コード

最初に必要なのは、HTML コードです。としてIDを作成します 「MoveDiv」。この div 内にいくつかのコンテンツを配置します。このコンテンツはあなたのものであれば何でも構いません 必要に応じて、この例ではテキストを追加してみましょう。

<div id="movingDiv"> This is my moving div! </div>

HTML コードができたので、次は CSS コードが必要です。

CSS コード

CSS コードは、div を実際に動かします。 divの位置を設定します 「親戚」に。これにより、JavaScript を使用して div を移動できるようになります。も設定させていただきます div の幅と高さ。

#movingDiv { position: relative; width: 200px; height: 200px; }

HTML と CSS コードができたので、次に JavaScript コードが必要です。

JavaScript コード

JavaScript コードは実際に div を移動します。 setInterval 関数を使用して、1000 ミリ秒 (1 秒) ごとに div を移動します。また、CSS プロパティ「top」と「left」を使用して div を移動します。

var interval = setInterval(function() {
   var div = document.getElementById("movingDiv");
   div.style.top = div.offsetTop + 1 + "px";
   div.style.left = div.offsetLeft + 1 + "px"; },
   1000);

Example

これは、この例の完全な動作コードです -

   


   <div id="movingDiv"> This is my moving div! </div>
   <script>
      var interval = setInterval(function() {
      var div = document.getElementById("movingDiv");
      div.style.top = div.offsetTop + 1 + "px";
      div.style.left = div.offsetLeft + 1 + "px"; },
      1000);
   </script>

上記のコードの行ごとの説明 -

• 1行目 - まずHTMLドキュメントを作成します。

• 3行目 - head要素を作成します。

• 4行目 - スタイル要素を作成します。このスタイル要素内に CSS コードを配置します。

• 行 5 - ID "MoveDiv" を持つ div の CSS ルールを作成します。場所を次のように設定しました "relative"。div の幅と高さも設定します。

• #Line 12 - body 要素を作成します。この body 要素内に HTML コードを配置します。

• Line 13 - ID が "movingDiv" の div を作成します。この div 内にテキストを入れます。

• ##14 行目

  - script 要素を作成し、この script 要素内に JavaScript コードを配置します。

• Line 15

  - "interval" という変数を作成し、この変数を setInterval 関数に設定しますこの関数は、1000 ミリ秒 (1 秒) ごとに div を移動します。

• Line 16

  - "div" という変数を作成します。この変数を次のように設定します。 ID が「movingDiv」の HTML 要素。

• Line 17

  - CSS「top」を使用します。 " プロパティを使用して div を 1 ピクセル下に移動します。

• Line 18

  - CSS の "left" プロパティを使用して div を次の位置に移動します右側の 1 ピクセルです。

• Line 22

  - HTML ドキュメントを終了します。

このチュートリアルでは、次のことを行いました。 JavaScript を使用して移動 div を作成する方法について説明します。 いくつかの HTML コードを作成します。次に、いくつかの CSS コードを作成しました。最後に、いくつか作成しました JavaScript コード。

以上がJavaScript を使用して移動 div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。