类似win7系统泡泡屏保
生活随笔
收集整理的這篇文章主要介紹了
类似win7系统泡泡屏保
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
給泡泡隨機個數，隨機顏色，隨機位置，隨機大小，再設置一下邊界即可。
還有一個點擊消失的功能。
出現的問題：
在設置邊界的時候，可運動區域設置為窗口的文檔顯示區的高度和寬度減掉泡泡的自身的寬度和高度，這時泡泡觸碰邊界會出現抖動，是因為定時器沒有關閉，但在需求中并不需要關閉定時器，泡泡需要一直運動，所以在設定邊界之后還有一個防止抖動的功能，在泡泡觸碰邊界的時候直接讓它的位置發生改變，離開邊界，繼續運動，類似于將泡泡從邊界彈射過來，下面給它設置了一個8px的距離。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bubble</title><style>* {margin: 0;padding: 0;}span {width: 20px;height: 20px;display: inline-block;border-radius: 50%;position: absolute;opacity: 0.5;}</style> </head><body></body></html> <script>//將創建一個泡泡封裝成一個函數function Bubble(n) {//創建傳入的實參n個的泡泡for (let i = 0; i < n; i++) {let oBB = document.createElement("span");document.body.appendChild(oBB);}let oBBs = document.querySelectorAll("span");for (let i = 0; i < n; i++) {let num = Math.round(Math.random() * 80 + 30); //泡泡的隨機寬高let num2 = Math.round(Math.random() * 700 + 80); //泡泡距離瀏覽器頁面左上角的隨機toplet num3 = Math.round(Math.random() * 1000 + 80); //泡泡距離瀏覽器頁面左上角的隨機leftlet num4 = Math.round(Math.random() * 5 + 1); //泡泡的隨機速度speedXlet num5 = Math.round(Math.random() * 5 + 1); //泡泡的隨機速度speedY//隨機顏色let color = "#";let str = "0123456789abcdef";for (let j = 0; j < 6; j++) {let colnum = Math.round(Math.random() * 15);color += str[colnum];}//獲取以上隨機數賦給對應的屬性oBBs[i].style.width = num + "px"; //泡泡的寬oBBs[i].style.height = num + "px"; // 泡泡的高oBBs[i].style.top = num2 + "px"; //泡泡的top值oBBs[i].style.left = num3 + "px"; //泡泡的left值oBBs[i].style.backgroundColor = color; //泡泡的顏色rebound(oBBs[i], num4, num5); //調用rebound()函數,給泡泡的運動設置邊界oBBs[i].onclick = function () { //點擊哪個泡泡,哪個泡泡就消失this.style.display = "none";}}}Bubble(50); //調用創建泡泡的函數,并傳入實參function rebound(obj, x, y) {let speedX = x; //速度x,即向右運動let speedY = y; //速度y,即向左運動setInterval(function () { //啟用定時器,讓泡泡一直運動obj.style.left = obj.offsetLeft + speedX + "px"; //每50毫秒運動的left距離obj.style.top = obj.offsetTop + speedY + "px"; //每50毫秒運動的top距離//邊界條件if (obj.offsetLeft <= 0 || obj.offsetLeft >= innerWidth - obj.offsetWidth) {//如果泡泡的左外邊框到瀏覽器左內邊框的距離小于0,即碰到左邊界時//或者泡泡的左外邊框到瀏覽器左內邊框的距離大于等于瀏覽器的寬-泡泡自身的寬度時,即碰到右邊界時speedX *= -1; //x反向,即碰到左右邊界時,泡泡反彈的方向//防止泡泡觸邊界抖動if (obj.offsetLeft <= 0) { //碰到左邊界時obj.style.left = obj.offsetLeft + 8 + "px"; //泡泡的左外邊框到瀏覽器左內邊框的距離 + 8} else if (obj.offsetLeft >= innerWidth - obj.offsetWidth) {obj.style.left = obj.offsetLeft - 8 + "px";}}if (obj.offsetTop <= 0 || obj.offsetTop >= innerHeight - obj.offsetHeight) {speedY *= -1;//防止泡泡觸邊界抖動if (obj.offsetTop <= 0) {obj.style.top = obj.offsetTop + 8 + "px";} else if (obj.offsetTop >= innerHeight - obj.offsetHeight) {obj.style.top = obj.offsetTop - 8 + "px";}}}, 50);} </script>總結
以上是生活随笔為你收集整理的类似win7系统泡泡屏保的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [人工智能-深度学习-72]：卷积神经网
- 下一篇： 小葵花妈妈课堂开课了：《Runnable