如何使用 JavaScript 创建一个移动的 div？-js教程-PHP中文网

如何使用 JavaScript 创建一个移动的 div？

WBOY

发布： 2023-09-14 21:37:02

转载

815 人浏览过

如何使用 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 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.