JavaScript实现心形div块跟随鼠标移动(幻影效果)
上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动，然后有轩辕问我，想给女朋友做一个好看的可不可以。现在我们来实现一串心形的div实现跟随鼠标的效果。如图：
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><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:nth-of-type(n){width: 10px;height: 10px;background: red;border-radius: 50%;;position: absolute;}.box:nth-of-type(n):after{display: block;width: 10px;height: 10px;background: red;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(n):before{display: block;width: 10px;height: 10px;background: red;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}.box:nth-of-type(2n){width: 10px;height: 10px;background: yellow;border-radius: 50%;;position: absolute;}.box:nth-of-type(2n):after{display: block;width: 10px;height: 10px;background: yellow;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(2n):before{display: block;width: 10px;height: 10px;background: yellow;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}.box:nth-of-type(3n){width: 10px;height: 10px;background: skyblue;border-radius: 50%;;position: absolute;}.box:nth-of-type(3n):after{display: block;width: 10px;height: 10px;background: skyblue;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(3n):before{display: block;width: 10px;height: 10px;background: skyblue;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}.box:nth-of-type(4n){width: 10px;height: 10px;background: green;border-radius: 50%;;position: absolute;}.box:nth-of-type(4n):after{display: block;width: 10px;height: 10px;background: green;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(4n):before{display: block;width: 10px;height: 10px;background: green;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}.box:nth-of-type(5n){width: 10px;height: 10px;background: pink;border-radius: 50%;;position: absolute;}.box:nth-of-type(5n):after{display: block;width: 10px;height: 10px;background: pink;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(5n):before{display: block;width: 10px;height: 10px;background: pink;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}
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;}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;}},100)}
关注我，学习前端不迷路！！！
