移动 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？的详细内容。