js运动-反弹运动

最新推荐文章于 2020-09-08 19:24:18 发布

原创最新推荐文章于 2020-09-08 19:24:18 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

web前端小白同时被 2 个专栏收录

19 篇文章

订阅专栏

16 篇文章

订阅专栏

此博客围绕JS实现反弹运动展开，虽未给出具体内容，但可知聚焦于利用JavaScript达成物体反弹运动效果，属于前端开发中动画效果实现的范畴。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				height: 50px;
				width: 50px;
				background: pink;
				border-radius: 50%;
				position: absolute;
				top:100px;
			}
		</style>
	</head>
	<body>
		<button onclick="boxmove()">点击</button>
		<div id="box">
			
		</div>
	</body>
</html>

  let box = document.getElementById("box");
	 let time =null;
	 function boxmove(){
		 clearInterval(time);
		 let x=5;
		 let y=5;
		time = setInterval(function(){
			box.style.left = box.offsetLeft +x+"px";
			box.style.top = box.offsetTop +y+"px";
			if(box.offsetTop>=window.innerHeight-box.offsetHeight){
				y*= -1;
			}
			if(box.offsetTop<=0){
				y*= -1;
			}
			if(box.offsetLeft<=0){
				x*= -1;
			}		
			if(box.offsetLeft>=window.innerWidth-box.offsetWidth){
				x*= -1;
			}
		},10)
	 }