javascript 多个div同时移动

最新推荐文章于 2023-08-18 11:59:45 发布

浮生途

最新推荐文章于 2023-08-18 11:59:45 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jy123_123/article/details/89459496

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现网页中多个div元素的同时移动效果，包括动态改变样式和利用事件监听实现平滑移动，适用于网页交互设计和动态效果的创建。

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

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        div{
            width:100px ;
            height: 30px;
            background: red;
            margin: 10px;
        }
    </style>
    <script>
        window.onload=function (ev) {
            var oDiv=document.getElementsByTagName("div");

            for (var i=0;i<oDiv.length;i++){
                oDiv[i].timer=null;
                oDiv[i].onmouseover=function () {
                    startMove(this,400);
                };
                oDiv[i].onmouseout=function () {
                    startMove(this,100);
                }
            }

        };

        function startMove(obj,iTarget) {
            clearInterval(obj.timer);
            obj.timer=setInterval(function () {
              var speed=(iTarget-obj.offsetWidth)/6;
              speed=speed>0?Math.ceil(speed):Math.floor(speed);
              if (iTarget-obj.offsetWidth==0){
                  clearInterval(obj.timer);
              }
              else {
                  obj.style.width=obj.offsetWidth+speed+"px";
              }
            },30)
        }
            
    </script>
</head>
<body >

<div></div>
<div></div>
<div></div>


</body>
</html>