纯JavaScript实现鼠标拖尾效果

1.前言

鼠标拖尾在浏览器上实现，是一种非常有趣，且简单的实现。它作为js编译出来的功能，极好的加深了用户与页面之间的交互性，提高了用户体验。是一种简单的功能实现，书写难度低，非常适合萌新小白作为前端入门练习的首选之一。

2.需求

1.在相应的页面之中能够实现某个元素对鼠标的跟随

2.在html代码中只生成一个元素

具体实现效果图如下：

鼠标拖尾演示

5.代码

 <script>
         let img = document.createElement('img');
         document.body.appendChild(img); // 添加子元素
         class Round {
             constructor(left, top) {
                 this.left = left;
                 this.top = top;
 ​
             }
             create() {
                 img.style.cssText = `
                                             width:50px;
                                             height:50px;
                                             position:absolute;
                                             left:${this.left}px;
                                             top:${this.top}px;
                                               `;
                 img.src = "./1.jpeg";
             }
         }
         document.onmousemove = function (e) {
             let left = e.clientX,
                 top = e.clientY;
             let obj = new Round(left, top);
             obj.create();
             // console.log(left,top);
         }
 </script>

6.详解

1.首先我们必须知道的是，这种拖尾效果跟随鼠标的到底是什么东西？肯定是一个标签，一个元素。我们都知道，元素在创建完了之后，写好样式了之后才会在浏览器中有所展示。

2.所以，怎么才能让这个元素移动起来呢？如果我在css书写一个 margin-left:20px; 那么这个元素就会朝浏览器的右移动20个像素。

好像通过修改css中的margin值就可以实现元素的移动了。可是怎么将这种移动的方式和我们的鼠标移动的事件产生绑定的关系呢？这个时候就要用到clientX/Y了，这句代码什么意思？意思就是获取当前鼠标到浏览器内容区域的x坐标，y同理。

3.当我拿到鼠标移动路径上的x，y坐标后，将元素的移动的距离修改为鼠标移动路径的x，y值就可以实现拖尾效果了。但只写成这样是存在bug的，因为你通过margin的方式进行移动时，如果当前页面存在其他元素时，就会出现问题，很显然这不是我们想要的效果。

4.那么有没有一种方法可以让我当前想要跟随鼠标移动的这个元素在跟随鼠标的移动的同时，又不影响其他html中的元素工作呢？举个例子，假如说我html中书写的代码在第一层，我能不能通过某个方法或者说css样式将这个元素置于顶层呢？

5.有的，那就是position，一句话“父相子绝”，当前页面中只有我们在script中创建的元素，所以这个元素就是子元素，body就是父元素，在这里我们只需要给子元素一个position:absolute;让目标元素脱离文档流,就可以实现跟随效果啦，并且也不会和html中的其他元素打架啦！

7.总结

通过这种方法，我们可以实现不同的效果，不光是鼠标拖尾效果，甚至是烟花样的点击效果，或者说是波纹样的点击效果...都是可以实现的。