js经典实例----弹力球广告特效

原创于 2021-03-20 17:52:01 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了一个使用JavaScript实现的简单示例，一个球形元素（盒子）在浏览器可视区域内沿X轴和Y轴方向进行弹跳运动。通过设置定时器不断更新元素的位置，并在触碰边界时改变运动方向，实现了元素的反弹效果。

在这里插入图片描述

<div id="main">
			<div class="box" id="box"></div>
</div>

Javascript

	let [Sy, Vy] = [0, 10]
			let [Sx, Vx] = [0, 5]
			let [boxhight, boxWidth] = [70, 70]
			winhight = document.documentElement.clientHeight; //获取屏幕可视高度
			winWidth = document.documentElement.clientWidth; //获取屏幕可视宽度度

			setInterval(function() {
				Sy += Vy;
				Sx += Vx;

				//Y轴上的移动
				if (Sy <= 0) {
					Vy = 10
				};
				if (winhight - boxhight <= Sy) {
					Vy = -10
					Sy = winhight - boxhight
				}
				main.style.top = `${Sy}px`;
				
				//X轴上的移动
				if (Sx <= 0) {
					Vx = 5
				};
				if (winWidth - boxWidth <= Sx) {
					Vx = -5
					Sx = winWidth - boxWidth
				}
				main.style.left = `${Sx}px`;
			}, 10)