前端练习题——跳跳球

最新推荐文章于 2021-11-21 16:22:25 发布

陈年_H

最新推荐文章于 2021-11-21 16:22:25 发布

阅读量204

点赞数

分类专栏：练习题文章标签： js jquery css html javascript

本文链接：https://blog.csdn.net/Today_He/article/details/108797442

版权

练习题专栏收录该内容

16 篇文章 0 订阅

订阅专栏

思路

触底反弹，设置两个变量，用于判断是否继续当前方法的移动

注意

一、JS
1、window.setInterval(rebound,5)。window可以省略（BOM顶层接口）
2、css(“属性”，“值”)——修改css样式；只写属性值可以返回value（获取长宽返回值自带px）
3、jQuery转BOM对象

var ball = $("#theBall");
var DomBall = ball[0]；

二、css
1、overflow: hidden：隐藏，此处用于隐藏下拉条

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.5.1.js"></script>
		<style type="text/css">
			html,body {
				padding: 0px;
				margin: 0px;
				width: 100%;
				height: 100%;
				/*隐藏，此处用于隐藏下拉条*/
				overflow: hidden;
			}
			
			#theBall {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-image: url(../img/征集令背景主图.jpg);
			}
		</style>
		<script type="text/javascript">
			$(function() {

				//获取球$对象
				var ball = $("#theBall");
				//获取最大宽度
				var max_width = document.body.offsetWidth - ball[0].offsetWidth; //$对象使用css方法获取宽度：ball.css("width"),自带px不能参与计算。（与下面的函数对比）
				//获取最大高度
				var max_height = document.body.offsetHeight - ball[0].offsetHeight; //$转BOM对象，再获取高度。（与上面的函数对比）
				//用于向右移动
				var flageleft = true;//用于判断是否该向右移动
				var left = 0;//初始化左边距
				//用于向下移动
				var flagetop = true;//用于判断是否该像下移动
				var top = 0;//初始化上边距
				//每5毫秒调用一次，让它移动
				function rebound() { 
					ball.css("margin-left",left);
					ball.css("margin-top",top);
					//横向移动
					if(flageleft && left<max_width){
						left++;//像右直到最大值
					}else{
						flageleft = false;
						left--;//向下直到0
						if(left == 0){
							flageleft = true;
						}
					}
					//纵向移动
					if(flagetop && top<max_height){
						top++;//向下直到最大值
					}else{
						flagetop = false;
						top--;//向下直到0
						if(top == 0){
							flagetop = true;
						}
					}
				}

				//window可以省略（BOM顶层接口）
				window.setInterval(rebound,5);
			});
		</script>
	</head>

	<body>
		<div id="theBall"></div>
	</body>

</html>