触底反弹，设置两个变量，用于判断是否继续当前方法的移动
一、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--;//向下直到0if(left == 0){flageleft = true;}}//纵向移动if(flagetop && top<max_height){top++;//向下直到最大值}else{flagetop = false;top--;//向下直到0if(top == 0){flagetop = true;}}}//window可以省略（BOM顶层接口）window.setInterval(rebound,5);});</script></head><body><div id="theBall"></div></body></html>
本文发布于:2024-02-01 12:27:13，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170676163336588.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
