爱心拖影效果.png
实现思路：按照计时器给拖影图片增加动画延迟，v 用来控制第几张图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖影</title>
<style>
img {
width: 20px;
height: 20px;
position: absolute;
}
</style>
</head>
<body>
<img src="./img/heart.png" alt="">
<img src="./img/heart.png" alt="">
<img src="./img/heart.png" alt="">
<img src="./img/heart.png" alt="">
<img src="./img/heart.png" alt="">
<img src="./img/heart.png" alt="">
<img src="./img/heart.png" alt="">
<img src="./img/heart.png" alt="">
<script>
var oImgs = document.querySelectorAll("img");
document.onmousemove =function (ev) {
var ev = ev||window.event;
var v=-1;//注意这里为-1
//每过100毫秒给下一张图片，改变位置
var timer = setInterval(function () {
v++;
if(v>=oImgs.length -1){
clearInterval(timer);//全部图片过完就取消计时器
}
//给每一张img添加位置
oImgs[v].style.left = ev.clientX - oImgs[1].width/2 +"px";
oImgs[v].style.top = ev.clientY - oImgs[1].height/2+"px";
},100)
}
</script>
</body>
</html>
