欢迎光临
我会一直在努力

跟随鼠标移动-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>
赞(2) 打赏
未经允许不得转载:前端范 » 跟随鼠标移动-demo
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏