移動 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);
登錄后復制
示例
這是此示例的完整工作代碼 –
<!doctype html>
<html>
<head>
<style>
#movingDiv {
position: relative;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<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>
</body>
</html>
登錄后復制
上述代碼的逐行解釋 –
第 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 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.
In this tutorial, we went over how to create a moving div using JavaScript. We started off
通過創建一些 HTML 代碼。然后我們創建了一些 CSS 代碼。最后，我們創建了一些
JavaScript 代碼。
以上就是如何使用 JavaScript 創建一個移動的 div？的詳細內容，更多請關注www.92cms.cn其它相關文章！
