標籤：inner 改變 對象 tor 返回 relative 情況 任務 可視化
一、 在指定容器內的碰壁反彈<!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中小球碰壁反彈
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
