一、 在指定容器内的碰壁反弹<!DOCTYPE HTML><html> ???<head> ???????<title></title> ???????<meta charset="UTF-8"/> ???????<style type="text/css"> ???????????.ball{ ???????????????height: 60px; ???????????????width: 60px; ???????????????background: blue; ???????????????border-radius: 50%; ???????????????????????????????position: absolute; ???????????????top: 0; ???????????????left: 0; ???????????} ???????</style> ???</head> ???<body> ???????<div class="ball"> ???????????????????</div> ???????<p style="width: 100%;height: auto;"> ???????????offsetWidth ??????//返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） <br /> ???????????offsetHeight ?????//返回元素的高度（包括元素高度、内边距和边框，不包括外边距）<br /> ???????????clientWidth ???????//返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）<br /> ???????????clientHeight ??????//返回元素的高度（包括元素高度、内边距，不包括边框和外边距）<br /> ???????????style.width ????????//返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）<br /> ???????????style.height ??????//返回元素的高度（包括元素高度，不包括内边距、边框和外边距）<br /> ???????????scrollWidth ??????//返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同<br /> ???????????scrollHeigh ??????//返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同<br /> ???????????offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。 ???????所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。<br /> ???????????offsetLeft //此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。<br /> ???????????scrollLeft //此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。<br /> ???????????scrollTop ??//此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。 返回值是一个整数，单位是像素。此属性是可读写的。 ???????</p> ???????????????</body> ???<script type="text/javascript"> ???????var ball = document.querySelector(‘.ball‘); ???????????????setInterval(scroll,50); ???????????????//全局变量，避免进入函数每次都需要重新声明一次 ???????var stepX = 5; ???????var stepY = 5; ???????function scroll(){ ???????????var scrollW = ball.offsetLeft + stepX; ???????????var scrollH = ball.offsetTop + stepY; ???????????????????????if(scrollW >= 800){ ???????????????stepX *= -1; ???????????}else if(scrollW <= 0){ ???????????????stepX *= -1; ???????????} ???????????????????????if(scrollH >= 400){ ???????????????stepY = -stepY; ???????????}else if(scrollH <= 0){ ???????????????stepY = -stepY; ???????????} ???????????????????????ball.style.left = scrollW + "px"; ???????????ball.style.top = scrollH + "px"; ???????} ???</script></html>二、 整个浏览器可视区域的碰壁反弹<!DOCTYPE HTML><html> ???<head> ???????<title></title> ???????<meta charset="UTF-8"/> ???????<style type="text/css"> ???????????body{ ???????????????margin: 0; ???????????????padding: 0; ???????????} ???????????#bounce{ ???????????????height: 50px; ???????????????width: 50px; ???????????????border-radius: 50%; ???????????????/*background: yellow;*/ ???????????????????????????????position: absolute; ???????????????left: 0; ???????????????top: 0; ???????????} ???????</style> ???</head> ???<body> ???????<div id="bounce"> ???????????????????????</div> ???</body> ???<script type="text/javascript"> ???????//获取元素 ???????var container = gt("con");//小球所在容器 ???????var bounce = gt("bounce");//反弹的小球 ???????????????//设置小球随机背景颜色 ???????bounce.style.background = ranColor(); ???????????????//获取小球在可视区域的滚动范围 ???????//获取可视区域的宽高（不含任务栏） ???????var aWidth = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth; ???????var aHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight; ???????console.log("可视区域不含任务栏的范围：w："+aWidth + "===h："+aHeight); ???????????????//减去小球的宽高即为活动范围,此处不加单位，方便moveDistance()方法内if条件判断 ???????var scrollMaxX = (aWidth - bounce.offsetWidth); ???????var scrollMaxY = (aHeight - bounce.offsetHeight); ???????????????console.log("小球可滚动的范围：x："+scrollMaxX+"===y："+scrollMaxY); ???????????????//设置小球滚动，每隔几秒滚动一段距离// ???????var timer = setInterval(function(){alert("haha")},1000); ???????var timer = setInterval(moveDistance,30); ???????????????//设置小球移动 ???????var stepX = 5; ???????var stepY = 5; ???????function moveDistance(){// ???????????console.log("进入moveDistance") ???????????????????????var currentLeft = bounce.offsetLeft + stepX; ???????????var currentTop = bounce.offsetTop + stepY; ???????????????????????//判断小球是否滚动到最大的宽度、高度，如果滚动到最大宽度、高度，设置反弹滚动 ?*(-1) ???????????if(currentLeft >= scrollMaxX){ ???????????????currentLeft = scrollMaxX; ???????????????stepX *= -1; ???????????????bounce.style.background = ranColor(); ???????????}else if(currentLeft <= 0){ ???????????????currentLeft = 0; ???????????????stepX *= -1; ???????????????bounce.style.background = ranColor(); ???????????} ???????????????????????if(currentTop >= scrollMaxY){ ???????????????currentTop = scrollMaxY; ???????????????stepY *= -1; ???????????????bounce.style.background = ranColor(); ???????????}else if(currentTop <= 0){ ???????????????currentTop = 0; ???????????????stepY *= -1; ???????????????bounce.style.background = ranColor(); ???????????} ???????????????????????bounce.style.left = currentLeft + ‘px‘; ???????????bounce.style.top = currentTop + ‘px‘; ???????????????????????console.log(bounce.style.left);// ???????????console.log("离开moveDistance"); ???????} ???????????????//设置窗口改变监听器;onresize 事件会在窗口或框架被调整大小时发生。 ???????//当浏览器窗口发生改变时，重新获取浏览器当前可视化窗口的尺寸，重新计算小球能移动的最大宽度和高度 ???????window.onresize = function(){ ???????????aWidth = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth; ???????????aHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight; ???????????????????????scrollMaxX = (aWidth - bounce.offsetWidth); ???????????scrollMaxY = (aHeight - bounce.offsetHeight); ???????} ???????????????????????//设置小球随机颜色方法 ???????function ranColor(){ ???????????var red = parseInt(Math.random()*255); ???????????var green = parseInt(Math.random()*255); ???????????var blue = parseInt(Math.random()*255); ???????????return "RGB(" + red + "," + green + "," + blue + ")"; ???????} ???????????????//设置通过id获取元素的函数 ???????function gt(e){ ???????????return document.getElementById(e); ???????} ???</script></html>js中小球碰壁反弹
原文地址：https://www.cnblogs.com/menglong1214/p/9595020.html