如何使用 JavaScript 建立一個移動的 div？

移動 div 是一種網頁元素，可以自動在螢幕上移動或更改螢幕上的位置。透過調整左側和頂部樣式屬性來變更位置。使用 JavaScript 建立行動 div 是一項相對簡單的任務。所需要的只是一點 HTML、CSS 和 JavaScript 程式碼。在本教程中，我們將介紹如何使用 JavaScript 建立行動 div。

HTML 程式碼

我們首先需要的是一些 HTML 程式碼。我們將建立一個 id 為 “移動Div”。在此 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);

範例

這是此範例的完整工作程式碼-

   



   <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 document.

• #Line 3 - 我們建立一個head 元素。

• Line 4 - 我們建立一個樣式元素。在這個樣式元素中，我們將放置我們的CSS程式碼。

• 第5行 - 我們為我們的div建立一個CSS規則，id為「移動Div」。我們將位置設定為 "relative". We also set div 的寬度和高度。

• Line 12 − We create a body element. Inside of this body element, we will put our HTML code.

• Line 13 − We create a div with an id of "movingDiv". Inside of this div, we put some text.

• #Line 14 − We create a script element. Inside this script element, we will put our JavaScript 程式碼。

• Line 15 − We create a variable called "interval". We set this variable to the setInterval function . This function will move our div every 1000 milliseconds (1 second).

• Line 16# − We create a variable called "div". We set this variable to − We create a variable called "div". We set this variable to the HTML element with an id of "

  movingDiv
".

• #Line 17 − We use the CSS "

  top
" property to move our div down 1 pixel.

• Line 18 − We use the CSS "

  left
" property to move our div to the right 1 pixel.

• Line 22
− We end our HTML document.

以上是如何使用 JavaScript 建立一個移動的 div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！