一起用代码吸猫！本文正在参与【喵星人征文活动】。
前因
还记得之前去朋友家，他那边养了一只猫，肉乎乎的。每次过去的时候那玩具逗它它理都不理，就在那边躺着梳理毛发，太傲娇了。
然而一旦我们准备出门，想把它抓回笼子里的时候，他就像个运动健将，几个人去抓都抓不住，每次都整个屋子跑，太能折腾了。
不知道你们家里的主子是不是也是一个德行的。
今天，我就要用代码让它乖乖听话，我指哪它就跟到哪，谁来拦着都没用，我说的！
代码实现
首先，新建一块区域作为运动场所, 里面定义多个div标签，存放喜欢的猫咪照片。
<!DOCTYPE html>
<html>
<body>
<div class="cat">
<img style="height: 100%; width: 100%;" src="https://img1.baidu.com/it/u=3789058185,1808652640&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"/>
</div>
<div class="cat">
<img style="height: 100%; width: 100%;" src="https://img0.baidu.com/it/u=4128596425,101003791&fm=26&fmt=auto"/>
</div>
<div class="cat">
<img style="height: 100%; width: 100%;" src="https://img1.baidu.com/it/u=3723582996,1204092746&fm=26&fmt=auto"/>
</div>
<div class="cat">
<img style="height: 100%; width: 100%;" src="https://img0.baidu.com/it/u=1783785851,1602746802&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889"/>
</div>
<div class="cat">
<img style="height: 100%; width: 100%;" src="https://img0.baidu.com/it/u=303916947,684403496&fm=26&fmt=auto"/>
</div>
<div class="cat">
<img style="height: 100%; width: 100%;" src="https://img0.baidu.com/it/u=2041747998,982953870&fm=26&fmt=auto"/>
</div>
<div class="cat">
<img style="height: 100%; width: 100%;" src="https://img0.baidu.com/it/u=527545860,668472888&fm=26&fmt=auto"/>
</div>
<div class="cat">
<img style="height: 100%; width: 100%;" src="https://img0.baidu.com/it/u=4064822617,1986052446&fm=26&fmt=auto"/>
</div>
<div class="cat">
<img style="height: 100%; width: 100%;" src="https://img2.baidu.com/it/u=2077519748,1550107792&fm=26&fmt=auto"/>
</div>
</body>
<style>
</style>
<script>
</script>
</html>
复制代码然后，再修改下容器的大小等。
* {
margin: 0;
padding: 0;
}
.cat {
width: 50px;
height: 50px;
position: absolute;
}
复制代码最后，加上事件，设置div鼠标跟随，再加上定时器延迟覆盖来产生一种类似幻影的效果。
<script>
var cats = document.getElementsByClassName("cat");
var timer;
document.onmousemove = function (ev) {
clearInterval(timer);
var ev = ev || window.event;
// 设置一个div块跟随鼠标移动
cats[0].style.top = ev.pageY + "px";
cats[0].style.left = ev.pageX + "px";
for (var i = cats.length - 1; i > 0; i--) {
cats[i].style.top = cats[i - 1].style.top;
cats[i].style.left = cats[i - 1].style.left;
}
// 设置定时器 每隔一段时间让后面一个div覆盖前面一个div的位置
timer = setInterval(function () {
for (var i = cats.length - 1; i > 0; i--) {
cats[i].style.top = cats[i - 1].style.top;
cats[i].style.left = cats[i - 1].style.left;
}
}, 50)
}
</script>
复制代码