一、 在指定容器內的碰壁反彈 <!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>
