移動 div 是一種網頁元素，可以自動在螢幕上移動或更改螢幕上的位置。透過調整左側和頂部樣式屬性來變更位置。使用 JavaScript 建立行動 div 是一項相對簡單的任務。所需要的只是一點 HTML、CSS 和 JavaScript 程式碼。在本教程中，我們將介紹如何使用 JavaScript 建立行動 div。
我們首先需要的是一些 HTML 程式碼。我們將建立一個 id 為 “移動Div”。在此 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 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 "
topLine 18 − We use the CSS "
leftLine 22
以上是如何使用 JavaScript 建立一個移動的 div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
