ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して移動 div を作成するにはどうすればよいですか?
モバイル div は、画面内を自動的に移動したり、画面上の位置を変更したりできる Web 要素です。左と上のスタイルプロパティを調整して位置を変更します。 JavaScript を使用してモバイル div を作成するのは比較的簡単なタスクです。必要なのは、ちょっとした HTML、CSS、JavaScript コードだけです。このチュートリアルでは、JavaScript を使用してモバイル div を作成する方法を示します。
最初に必要なのは、HTML コードです。としてIDを作成します 「MoveDiv」。この div 内にいくつかのコンテンツを配置します。このコンテンツはあなたのものであれば何でも構いません 必要に応じて、この例ではテキストを追加してみましょう。
<div id="movingDiv"> This is my moving div! </div>
HTML コードができたので、次は CSS コードが必要です。
CSS コードは、div を実際に動かします。 divの位置を設定します 「親戚」に。これにより、JavaScript を使用して div を移動できるようになります。も設定させていただきます div の幅と高さ。
#movingDiv { position: relative; width: 200px; height: 200px; }
HTML と CSS コードができたので、次に 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);
これは、この例の完全な動作コードです -
<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 内にテキストを入れます。
- script 要素を作成し、この script 要素内に JavaScript コードを配置します。
- "interval" という変数を作成し、この変数を setInterval 関数に設定しますこの関数は、1000 ミリ秒 (1 秒) ごとに div を移動します。
- "div" という変数を作成します。この変数を次のように設定します。 ID が「movingDiv」の HTML 要素。
- CSS「top」を使用します。 " プロパティを使用して div を 1 ピクセル下に移動します。
- CSS の "left" プロパティを使用して div を次の位置に移動します右側の 1 ピクセルです。
- HTML ドキュメントを終了します。
以上がJavaScript を使用して移動 div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。