页面弹球练习

最新推荐文章于 2023-07-06 21:45:43 发布

天然首长

最新推荐文章于 2023-07-06 21:45:43 发布

阅读量241

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_41401295/article/details/106751393

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

页面弹球练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面弹球代码1</title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				height: 100%;
				overflow: hidden;
				margin: 0;
			}
			div{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background-color: red;
				
				background-image: url("img/link.jpg");
			    background-size:200px 200px;
			    background-repeat: no-repeat;
			    background-position: center;
			}</style>
		
	</head>
	<body>
		<div id="ball"></div>
		
		<script type="text/javascript">
			var i = 1;
			var j = 1;
			var a = 0;
			var b = 0;
			var width = document.body.offsetWidth;
			var heigth = document.body.offsetHeight;
			console.log(heigth);
			var ball = document.getElementById("ball");
			function move(){
				ball.style.marginLeft = a+"px";
				ball.style.marginTop = b+"px";
				a = a+i;
				b = b+j;
				if(a < 0 || a > width-200) {
					i = (-1)*i;
				}
				if(b < 0 || b > heigth-200){
					j = (-1)*j;
				}
			} 
			window.setInterval(move,1);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面弹球代码2</title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				margin: 0;
				height: 100%;
				overflow: hidden;
			}
			#ball{
				width: 200px;
				height: 200px;
				background-color: red;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="ball"></div>
		<script type="text/javascript">
			//横向运动的距离
			var width = document.body.offsetWidth-200;
			//纵向运动距离
			var height = document.body.offsetHeight-200;
			//球的初始状态
			var run_w = 0;
			var run_h = 0;
			//球运动的方向
			//横向,向右为true，向左为false
			var wf = true;
			//纵向,向下为true，向上为false
			var hf = true;
			var ball = document.getElementById("ball");
			function run(){
				ball.style.marginLeft = run_w+"px";
				ball.style.marginTop = run_h +"px";
				//横向
				if(wf){
					run_w++;
					//碰到右边界转向
					if(run_w==width){
						wf = false;
					}
				}else{
					run_w--;
					//碰到左边界转向
					if(run_w==0){
						wf = true;
					}
				}
				//纵向
				if(hf){
					run_h++;
					if(run_h==height){
						hf = false;
					}
				}else{
					run_h--;
					if(run_h==0){
						hf = true;
					}
				}
			}
			setInterval(run,1);
		</script>
	</body>
</html>