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)
}
关注我,学习前端不迷路!!!