碰撞检测

最新推荐文章于 2024-04-25 10:23:39 发布

Tony_Liu0611

最新推荐文章于 2024-04-25 10:23:39 发布

阅读量272

点赞数

本文链接：https://blog.csdn.net/Tony_Liu0611/article/details/52146057

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	*{margin: 0;padding: 0;}
	#wrap{width: 500px;height: 300px;border: 1px solid hotpink;position: relative;}
	#boll{width: 50px;height: 50px;border-radius: 50%;background: red;position: absolute;left: 0;top: 0;}
	</style>
	</head>
	<body>
	<div id="wrap">
	<div id="boll"></div>
	</div>
	<button type="submit" name="searchsubmit" id="scbar_btn" sc="1" class="pn pnc" value="true"><strong class="xi2">搜索</strong></button>
	</body>
	<script type="text/javascript">
	var wrap = document.querySelector('#wrap');
	var boll = document.querySelector('#boll');


	var speedX = 5;
	var speedY = 2;
	var timer = setInterval(function(){

	if(boll.offsetLeft + boll.offsetWidth >= wrap.offsetWidth \|\| boll.offsetLeft < 0){
	speedX *= -1;
	}
	if(boll.offsetTop + boll.offsetHeight >= wrap.offsetHeight \|\| boll.offsetTop < 0){
	speedY *= -1;
	}




	boll.style.left = boll.offsetLeft + speedX + 'px';
	boll.style.top = boll.offsetTop + speedY + 'px';
	},30);




	</script>
	</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注