javascript动画之跟随运动

最新推荐文章于 2025-05-19 15:09:05 发布

原创最新推荐文章于 2025-05-19 15:09:05 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

35 篇文章

订阅专栏

本文通过示例代码详细讲解了如何使用JavaScript实现元素的跟随运动效果，通过改变元素的坐标来达到动态跟随的目的，适用于网页交互设计和动态效果实现。

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跟随运动</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			height: 3000px;
		}
		div {
			width: 100px;
			height: 100px;
			background: red;
			border: 1px solid #000;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body>
	<div id="box">1</div>
	<script type="text/javascript">
		var box = document.getElementById("box");
		var timer = null;
		var leaderX = 0;
		var leaderY = 0;
		var targetX = 0;
		var targetY = 0;
		// clientX表示的是可视区域距离左边的距离;
		// pageY表示距离浏览器顶端的距离，就相当于document.documentElement.scrollTop(被卷去的部分)加上clientX(可视区域的部分);
		// screentY表示的是距离屏幕顶端的位置
		document.onclick = function(event){
			// console.log(event)
			targetX = event.clientX + document.documentElement.scrollLeft;
			targetY = event.clientY + document.documentElement.scrollTop;
			timer = setInterval(function(){
				var speedY = targetY > leaderY ? Math.ceil((targetY-leaderY))/10 : Math.floor((targetY - leaderY)/10);
				var speedX = targetX > leaderX ? Math.ceil((targetX-leaderX))/10 : Math.floor((targetX - leaderX)/10);
				leaderX = leaderX + speedX;
				leaderY = leaderY + speedY;
				box.style.top = leaderY + "px";
				box.style.left = leaderX + "px";
				if(Math.abs(targetY - leaderY) <= Math.abs(speedY) || Math.abs(targetX - leaderX) <= Math.abs(speedX)){
					clearInterval(timer);
				};
			},30);
		}
	</script>
</body>
</html>