用js实现鼠标后跟随一串叶子的效果

做了一个比较有意思的效果，鼠标移动的过程中，后边紧跟一串树叶或者小圆点（可以根据实际需求把元素替换成你想要的东西）。

html部分

//一些标签元素，会随着鼠标移动
<span class="circle" style="top:200px;left:150px;"></span> 
<span class="circle" style="top:300px;left:250px;"></span>
<span class="circle" style="top:350px;left:350px;"></span>
<span class="circle" style="top:330px;left:200px;"></span>
<span class="circle" style="top:220px;left:150px;"></span>
<span class="circle" style="top:260px;left:180px;"></span>
<span class="circle" style="top:230px;left:110px;"></span>
<span class="circle" style="top:290px;left:100px;"></span>

css部分

<style>
	.circle{
		position:absolute; //设置元素绝对定位
		display: inline-block;
		width:10px;
		height:10px;
		background-color:green;
		border-radius:50%;
	}
</style>

js部分

<script>
	var circle = document.querySelectorAll(".circle"); //querySelectorAll获取所有的元素  IE9以下不支持
	
	//绑定鼠标移动事件
	document.onmousemove = function(e) {
		var e = e || window.event; //浏览器兼容性
		circle[0].style.left = e.pageX + "px"; //为第一个元素设置left值为鼠标距页面左侧的距离
		circle[0].style.top = e.pageY + "px"; //为第一个元素设置top值为鼠标距页面顶部的距离
		
		//从最后一个元素开始，设置后一个元素的left和top值等于前一个元素的left和top值
		//若从第二个元素开始，设置后一个元素的left和top值等于前一个元素的left和top值，会使所有的元素都和第一个元素位置重合，达不到想要的效果。
		for(var i=circle.length-1; i>0; i--){
			circle[i].style.left = circle[i-1].style.left;
			circle[i].style.top = circle[i-1].style.top;
		}
	}
</script>