如何让JavaScript元素运动起来？

最新推荐文章于 2022-06-24 22:44:05 发布

weixin_30949361

最新推荐文章于 2022-06-24 22:44:05 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linxd/p/4540058.html

本文详细介绍了如何使用HTML、CSS和JavaScript实现元素在页面上的位置动态变化，包括设置元素样式、利用offsetLeft获取元素偏移量，并通过定时器更新元素位置。文章还提供了代码示例和相关技术链接，帮助读者深入理解并实践这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         #div1 {
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             position: absolute;
12             left: 0;
13             top: 50px;
14         }
15     </style>
16     <script>
17         window.onload = function () {
18             var div = document.getElementById("div1");
19             setInterval(function () {
20                 div.style.left = div.offsetLeft + 20 + "px";
21             }, 30);
22         }
23     </script>
24 </head>
25 <body>
26     <div id="div1"></div>
27 </body>
28 </html>