JS实现鼠标移动后面跟随着特效

要实现的效果是,鼠标在移动的过程中,鼠标尾巴后面跟着一些小特效,:

这是鼠标移动到时候,后面跟随着小特效

其实原理就是遍历出所有的div小方块 然后每一个小方块都跟随自己前面的小方块,

第一个小方块就跟随鼠标,当鼠标移动的时候,就会出现这样的效果

css代码:给小方块设置样式 记得位置是绝对定位

div{
	width: 20px;
	height: 20px;
	background: red;
	position: absolute
}

html代码:

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

js代码:

<script>
function getPos(ev){
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
	return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}
}
document.onmousemove = function(ev){
	var oDiv = document.getElementsByTagName('div')
	var oEvent = ev||event;
	var pos = getPos(oEvent)
	//后面的div跟这前面的div走
	for(var i = oDiv.length-1; i>0;i--){
		oDiv[i].style.left = oDiv[i-1].offsetLeft+'px';
		oDiv[i].style.top = oDiv[i-1].offsetTop+'px';
	}
	//第一个div跟着鼠标走
	oDiv[0].style.left = pos.x+'px';
	oDiv[0].style.top = pos.y+'px';

}
</script>

思路就是 先给跟随鼠标的行为 封装成一个方法,在遍历所有小方块的时候,调用方法,