跟随鼠标移动-demo

最新推荐文章于 2024-09-29 09:51:41 发布

小城听风雨

最新推荐文章于 2024-09-29 09:51:41 发布

阅读量733

点赞数 1

分类专栏： Javascript踩过的坑

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/a5252145/article/details/82191787

版权

Javascript踩过的坑专栏收录该内容

39 篇文章 3 订阅

订阅专栏

定时器：为了测试图片延迟显示，更好看，会一直动效果如下

<!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>