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

最新推荐文章于 2023-11-22 17:14:37 发布

选择跳水或自由落体

最新推荐文章于 2023-11-22 17:14:37 发布

阅读量189

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_42244911/article/details/115031736

版权

在这里插入图片描述

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