JavaScript实现一串div跟随鼠标移动效果（幻影效果）

男娘i 2023-02-14 13:14 24阅读 0赞

## JavaScript实现一串div跟随鼠标移动效果 ##

上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果。现在来讲一个进阶版，实现一串div跟随鼠标移动效果，鼠标幻影效果。如图：

![在这里插入图片描述][20200603013338324.gif_pic_center]

**HTML代码：**

<div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

**CSS代码：**

* { 
            margin: 0;
            padding: 0;
        }
    
        .box { 
            width: 10px;
            height: 10px;
            /* background: green; */
            position: absolute;
        }
    
        .box:nth-of-type(n) { 
            background: red;
        }
    
        .box:nth-of-type(2n) { 
            background: green;
        }
    
        .box:nth-of-type(3n) { 
            background: yellow;
        }
    
        .box:nth-of-type(4n) { 
            background: blue;
        }
    
        .box:nth-of-type(5n) { 
            background: pink;
        }
    
        .box:nth-of-type(6n) { 
            background: orange;
        }
    
        .box:nth-of-type(7n) { 
            background: skyblue;
        }
    
        .box:nth-of-type(8n) { 
            background: hotpink;
        }
    
        .box:nth-of-type(9n) { 
            background: purple;
        }
    
        .box:nth-of-type(10n) { 
            background: gold;
        }

**JS代码：**

var aBox = document.getElementsByClassName("box");
        var timer;
        document.onmousemove = function (ev) { 
            clearInterval(timer);
            var ev = ev || window.event;
            // 设置一个div块跟随鼠标移动
            aBox[0].style.top = ev.pageY + "px";
            aBox[0].style.left = ev.pageX + "px";
    
            for (var i = aBox.length - 1; i > 0; i--) { 
                aBox[i].style.top = aBox[i - 1].style.top;
                aBox[i].style.left = aBox[i - 1].style.left;
            }
            // 设置定时器 每隔一段时间让后面一个div覆盖前面一个div的位置
            timer=setInterval(function () { 
                for (var i = aBox.length - 1; i > 0; i--) { 
                    aBox[i].style.top = aBox[i - 1].style.top;
                    aBox[i].style.left = aBox[i - 1].style.left;
                }
            },10)
        }

**视频讲解链接：  
https://www.bilibili.com/video/BV13T4y1J7yR/**

[20200603013338324.gif_pic_center]: https://img-blog.csdnimg.cn/20200603013338324.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript(十五)——HTML DOM 对象知识点(一)____div跟随鼠标移动

Event > 想要实现div跟随鼠标移动 > > 我们应该知道有关鼠标的event事件 onmousedown 当鼠标按下时发生 onmou

妖狐艹你老母/ 2023年02月16日 12:25/ 0 赞/ 29 阅读

相关 JavaScript实现心形div块跟随鼠标移动(幻影效果)

JavaScript实现心形div块跟随鼠标移动(幻影效果) 上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动，然后有轩辕问我，想给女朋友做一个

港控/mmm°/ 2023年02月14日 13:14/ 0 赞/ 100 阅读

相关 JavaScript实现一串div跟随鼠标移动效果（幻影效果）

JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果。现在来讲一个进阶版，实现一串div跟随鼠标

男娘i/ 2023年02月14日 13:14/ 0 赞/ 25 阅读

相关 JavaScript实现div块跟随鼠标移动效果

JavaScript实现div块跟随鼠标移动效果前面讲了这么多DOM事件有关的属性等，现在我们进行一些相关的练习，实现div块跟随鼠标移动效果，如图： ![在这里插入

快来打我*/ 2023年02月14日 13:14/ 0 赞/ 30 阅读

相关 javascript文字跟随鼠标移动简易实现方法

效果图 ![SouthEast][] 方法文字跟随鼠标移动即是实时获取鼠标位置，并将文字的位置设置为鼠标的位置，用left和top即可控制文字的位置。 htm

红太狼/ 2022年06月01日 06:40/ 0 赞/ 700 阅读

相关 jQuery_鼠标跟随效果

鼠标跟随效果： HTML： <body> <img src="images/ts.gif" alt=""> </body> JS： $

Dear 丶/ 2022年05月20日 23:55/ 0 赞/ 381 阅读

相关实现div鼠标拖动效果

实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。我将它封装成了一个函数，只需要传入参数即可使用。 dow

深碍√TFBOYSˉ_/ 2022年05月13日 07:36/ 0 赞/ 389 阅读

相关 js小效果之跟随鼠标移动的小球

<!DOCTYPE html> <html> <head> <title>follow mouse</title> </head

落日映苍穹つ/ 2021年09月30日 15:54/ 0 赞/ 506 阅读

相关网站动态背景粒子线条跟随鼠标移动，吸附鼠标效果代码2

> 说明作者：weixin\_44149978 原文链接：[https://blog.csdn.net/weixin\_44149978/article/details/

Myth丶恋晨/ 2021年09月22日 00:56/ 0 赞/ 715 阅读

相关网站动态背景粒子线条跟随鼠标移动，吸附鼠标效果代码

> 说明作者：姜成SEO 原文链接：[https://blog.csdn.net/qq\_40223005/article/details/80810695][https

Myth丶恋晨/ 2021年09月22日 00:54/ 0 赞/ 621 阅读