事件练习：实现跟随鼠标一串的效果

最新推荐文章于 2025-10-31 09:55:48 发布

原创最新推荐文章于 2025-10-31 09:55:48 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现的动态效果，让页面上的多个div元素能够形成连贯的鼠标跟随效果。通过将鼠标当前位置作为首个div元素的位置，其余元素依次跟随前一元素的位置，实现了流畅的动态视觉体验。

html部分
在这里插入图片描述
js部分

 /*
            实现原理：
                 跟班级出去排队跑步一样
                 后面的位置移到前面一个位置，后面位置找到前面的位置
            */
            var arr = document.getElementsByTagName("div");
            document.onmousemove = function(ev){
                var e = e|| window.event;
                for(var i=arr.length-1;i>0;i--){
                    arr[i].style.left = arr[i-1].offsetLeft + "px";
                    arr[i].style.top = arr[i-1].offsetTop + "px";
                }
                //让下标0的div跟随鼠标移动
                arr[0].style.left = e.clientX + "px";
                arr[0].style.top = e.clientY +"px";
            }