移动 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。
立即学习“Java免费学习笔记（深入）”；
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 代码。
