我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
介绍
马上就要过新年啦，原本我还不知道新的一年是什么年，到网上一查，原来新的一年是十二生肖中的-兔年。在这新春之际，掘金推出了兔了个兔-创意投稿大赛。上次参加掘金的活动，好像是几个月以前了，参加的是掘金的征文活动。参加完之后，工作上面有点忙，导致自己好久没有参加掘金的活动了。
现在掘金推出了兔了个兔-创意投稿大赛，现在自己的工作不是很忙，刚好有时间可以参加这个活动了。
该活动要求围绕“兔”这个元素展开创意，接下来马上就要开始创意了。
前言
在上一篇文章里兔年创意：1.兔子跟随鼠标里，我们介绍了怎么实现兔子跟着鼠标移动的效果。只有一个兔子，看起来比较单调。如果有多个兔子跟着走，形成拖尾效果，是不是好看点？
接下来，我们就要实现一下兔子拖尾的效果
实现
素材
兔子的素材，我们在上一篇文章里已经找好了，我们继续用这个兔子素材就可以了。
代码
兔子素材找好了，接下来就要开始写代码了。
要实现的效果比较简单，我们就不要使用创建项目的方式来实现效果了，使用一个html文件来实现。
我们创建一个index.html文件，代码将在这个index.html文件里完成。
因为要展示多个兔子，所以需要创建多个img标签
<body>
<img src="./image/rabbit.png" alt="" />
<img src="./image/rabbit.png" alt="" />
<img src="./image/rabbit.png" alt="" />
<img src="./image/rabbit.png" alt="" />
<img src="./image/rabbit.png" alt="" />
</body>
这里，我们创建5个img标签就可以了。如果你想要展示更多的拖尾效果，再创建更多的img标签就可以了。
兔子在浏览器中展示了
好像有点大，我们调整一下大小，给img标签添加样式
img {
width:100px;
}
调整样式后，兔子变小了。
我们分析一下需求：要想实现兔子跟着鼠标走的效果
-
先是监听鼠标的移动事件，获取鼠标的坐标点
-
把鼠标的坐标点赋值给兔子
-
坐标点赋值给兔子，兔子就会跟着鼠标走吗？
不会，这时候就要用到定位了。使用了定位后，把鼠标的x，y坐标赋值给兔子的left和top，兔子就能跟着鼠标移动了
-
这时候是没有拖尾效果的，因为所有的img标签都赋值相同的值，重叠在一起了。怎么解决？
我想到的一个解决方法是，延迟赋值，这样就可以使得每个img标签赋值是不一样的
需求分析完了，我们开始实现
const imgs = document.querySelectorAll("img");
document.addEventListener("mousemove", (e) => {
let time = 200;
imgs.forEach((item, index) => {
setTimeout(() => {
item.style.left = e.x + "px";
item.style.top = e.y + "px";
}, time);
time += 200;
});
});
运行index.html文件到浏览器，我们移动鼠标，发现兔子确实跟着鼠标移动了。
小结
本小节，主要讲解了怎么实现兔子跟着鼠标移动时有拖尾的效果。先是监听鼠标的移动事件，获取鼠标的x、y坐标，再配合定位，赋值给兔子。鼠标移动时，兔子就能跟着移动了。这时候，所有兔子都是重叠在一起的，看不到拖尾效果。我们再使用setTimeout来延迟赋值，就可以看到拖尾效果了。
最后，兔年来到，福兔祝你鸿福齐天，万事如意！
