跟随鼠标移动-demo

定时器：为了测试图片延迟显示，更好看，会一直动效果如下
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		span{
			position: absolute;
			left: -10000px;
			top: 0;
			background: #03ccbb;
			width: 40px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			border-radius: 50%;
			transition: all 0.1s linear; 
			
		}
		img{
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
		html{
			/*鼠标隐藏*/
			/*cursor: none;*/
		}
	</style>
</head>
<body>
	<span><img src="img/1.png" alt=""></span>
	<span><img src="img/2.png" alt=""></span>
	<span><img src="img/3.png" alt=""></span>
	<span><img src="img/4.png" alt=""></span>
	<span><img src="img/5.png" alt=""></span>
	<span><img src="img/6.png" alt=""></span>
	<span><img src="img/7.png" alt=""></span>
	<span><img src="img/8.png" alt=""></span>

	<script>
	var spans = document.getElementsByTagName("span");
	document.onmousemove = function(e){
		e=e||window.event;
        //定时器，测试图片延迟显示，更好看，会一直动
		// setInterval(function(){
		// 	for(var i=spans.length-1;i>=0;i--){
		// 		if(i!=0){
		// 			spans[i].style.left = spans[i-1].offsetLeft+82+"px";
		// 			spans[i].style.top = spans[i-1].offsetTop+"px";
		// 		}else{
		// 			spans[i].style.left=e.clientX+"px";
		// 			spans[i].style.top=e.clientY+"px";
		// 		}
		// 	}
		// },1000)
		for(var i=spans.length-1;i>=0;i--){
	 		if(i!=0){
	 			spans[i].style.left = spans[i-1].offsetLeft+82+"px";
	 			spans[i].style.top = spans[i-1].offsetTop+"px";
	 		}else{
	 			spans[i].style.left=e.clientX+"px";
	 			spans[i].style.top=e.clientY+"px";
	 		}
	 	}
		

	}

	</script>
</body>
</html>
跟随鼠标移动-demo

猜你喜欢
