要實現的效果是,滑鼠在移動的過程中,滑鼠尾巴後面跟著一些小特效,:

這是滑鼠移動到時候,後面跟隨著小特效

其實原理就是遍歷出所有的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>
 

思路就是 先給跟隨滑鼠的行為 封裝成一個方法,在遍歷所有小方塊的時候,呼叫方法,