利用JS如何實現小球跟隨滑鼠移動
這篇文章主要介紹了原生JS實現的多個彩色小球跟隨滑鼠移動動畫效果,涉及javascript事件回應、頁面元素屬性動態修改及隨機數應用等相關操作技巧,需要的朋友可以參考下
本文實例講述了原生JS實現的多個彩色小球跟隨滑鼠移動動畫效果。分享給大家供大家參考，具體如下：
實作方法：
每個小球移動都有自己的座標，小球移動的同時，需要進行座標傳遞，將第一個座標依序傳遞給最後一個座標，來實現小球跟著移動的效果
## 實作程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球运动</title>
<style type="text/css">
p {
border-radius: 50%;
width: 30px;
height: 30px;
position: absolute;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
//创建数组存储所有的小球
var balls = [];
//创建小球函数
function createballs(){
for (var i = 0;i < 60;i++) {
var ball = document.createElement("p");
ball.innerHTML = i + 1;
ball.style.backgroundColor = randomColor();
//将创建的小球存储到数组中
document.body.appendChild( ball);
//将所有的小球存在数组中
balls.push( ball);
}
}
createballs();
//随机函数
function randomNum(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}
//随机颜色
function randomColor() {
return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";
}
document.onmousemove = function(e){
var eventObj = e || event;
for(var i = balls.length - 1;i > 0;i--){
//将小球的下标通过for循环进行传递
balls[i].style.left = balls[i - 1].style.left;
balls[i].style.top= balls[i - 1].style.top;
}
//将第一个小球赋值为最新的事件对象中的坐标
balls[0].style.left = eventObj.clientX + "px";
balls[0].style.top= eventObj.clientY + "px";
}
</script>
</html>運行效果：
以上是利用JS如何實現小球跟隨滑鼠移動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11怎麼停用工作列縮圖預覽? 關閉滑鼠移動工作列圖示顯示縮圖技巧
Feb 29, 2024 pm 03:20 PM
本文將介紹如何在Win11系統中關閉滑鼠移動工作列圖示時顯示的縮圖功能。這項功能在預設情況下是開啟的，當使用者將滑鼠指標懸停在工作列上的應用程式圖示上時，會顯示該應用程式的目前視窗縮圖。然而，有些用戶可能覺得這個功能不太實用或會幹擾到他們的使用體驗，因此想要關閉它。工作列縮圖可能很有趣，但它們也可能分散注意力或煩人。考慮到您將滑鼠懸停在該區域的頻率，您可能無意中關閉了重要視窗幾次。另一個缺點是它使用更多的系統資源，因此，如果您一直在尋找一種提高資源效率的方法，我們將向您展示如何停用它。不過
可以將appdata資料夾移到D盤嗎？
Feb 18, 2024 pm 01:20 PM
appdata資料夾可以移到d盤嗎隨著電腦使用的日益普及，使用者的個人資料和應用程式也越來越多地儲存在電腦上。在Windows作業系統中，有一個特定的資料夾，名為appdata資料夾，它用於儲存使用者的應用程式資料。許多用戶想知道是否可以將這個資料夾移到D碟或其他磁碟上，以便進行資料管理和安全性的考慮。在本文中，我們將討論這個問題並提供一些解決方案。首先，讓我
雷蛇 | 寶可夢耿鬼款無線滑鼠、滑鼠墊上架，套裝價 1549 元
Jul 19, 2024 am 04:17 AM
本站7月12日消息，雷蛇今日宣布推出雷蛇|寶可夢耿鬼款無線滑鼠、滑鼠墊。其單品定價分別為1,299元及299元，包含兩款產品的套裝價則為1,549元。這並非雷蛇首次推出耿鬼聯名的周邊產品，2023年雷蛇就推出過耿鬼款的八岐大蛇V2遊戲滑鼠。這次推出兩款新品整體均採用與鬼斯、鬼斯通、耿鬼家族外觀類似的深紫色底色，印有這三隻寶可夢和精靈球的線條輪廓，中間則為耿鬼這一經典幽靈屬性寶可夢的彩色大圖。本站發現，雷蛇|寶可夢耿鬼款無線滑鼠是基於先前發表的毒蝰V3專業版打造。其整體重量為55g，搭載雷蛇第二代FOC
惠普推出 Professor 1 三模輕音滑鼠：4000DPI、藍影 RAW3220，首發價 99 元
Apr 01, 2024 am 09:11 AM
本站3月31日消息，惠普近日在京東上架了一款Professor1三模藍牙滑鼠，可選用黑白奶茶色，首發價99元，需支付10元訂金。據介紹，這款滑鼠重量為106克，採用人體工學設計，尺寸為127.02x79.59x51.15mm，可選七檔4000DPI，搭載藍影RAW3220傳感器，使用650毫安時電池，號稱一次充電續航可以使用2個月。本站附滑鼠參數資訊如下：
Microsoft Word無法使用滑鼠選擇或突出顯示文本
Feb 20, 2024 am 09:54 AM
這篇文章探討了MicrosoftWord中滑鼠無法選擇或突出顯示文字時可能出現的問題，以及如何解決這些問題。為什麼我無法在MicrosoftWord中選擇文字？在MSWord中無法選擇文字可能受多種原因影響，例如權限限制、文件受保護、滑鼠驅動問題或文件損壞。以下將提供解決這些問題的方法。修復MicrosoftWord無法使用滑鼠選擇或突出顯示文本如果MicrosoftWord無法使用滑鼠選擇或突出顯示文本，請遵循下面提到的解決方案：確保您的滑鼠左鍵正在工作檢查您是否有資格更改該文件更新滑鼠的驅動
VGN 聯名《艾爾登法環》鍵鼠系列產品上架：菈妮 / 褪色者定制主題，首發 99 元起
Aug 12, 2024 pm 10:45 PM
本站8月12日消息，VGN於8月6日推出了聯名《艾爾登法環》鍵鼠系列產品，包含鍵盤、滑鼠和滑鼠墊，採用菈妮/褪色者客製化主題設計，目前系列產品已上架京東，售價99元起。本站附聯名新品資訊如下：VGN丨艾爾登法環S99PRO鍵盤此鍵盤採用純鋁合金外殼，輔以五層消音結構，使用GASKET板簧結構，擁有單鍵開槽PCB、原廠高度PBT材質鍵帽、鋁合金個人化背板；支援三模連接和SMARTSPEEDX低延遲技術；接入VHUB，可一站式管理多款設備，首發549元。 VGN丨艾爾登法環F1PROMAX無線滑鼠該滑鼠
雷蛇滑鼠驅動在哪個資料夾
Mar 02, 2024 pm 01:28 PM
很多使用者不知道自己雷蛇驅動安裝的檔案去了哪裡，這些驅動檔案一般都是安裝在了系統盤，也就是電腦的C盤，具體位置在programfiles下的RAZE資料夾。雷蛇滑鼠驅動在哪個資料夾答：在系統C碟的programfiles下的RAZE資料夾。一般驅動都會安裝在C盤，按照位置去找就可以了。雷蛇滑鼠驅動安裝方法介紹1.下載好官網的檔案以後雙擊運行自己下載的EXE檔。 2、等待軟體載入。 3.在這裡可以選擇你要安裝的哪個驅動程式。 4.選擇好以後點選右下角的「安裝」就可以了。
6000 毫安矽負極電池！小米 15Pro 升級再曝料
Jul 24, 2024 pm 12:45 PM
7月23日消息，部落客數位閒聊站爆料稱，小米15Pro電池容量增大至6000mAh，支援90W有線閃充，這將是小米數位系列電池最大的Pro機型。先前數位閒聊站透露，小米15Pro的電池擁有超高能量密度，矽含量遠高於競品。矽基電池在2023年大規模試水後，第二代矽負極電池被認定為產業未來發展方向，今年將迎來直接競爭的高峰。 1.矽的理論克容量可達4200mAh/g，是石墨克容量的10倍以上（石墨的理論克容量372mAh/g）。對於負極而言，當鋰離子嵌入量達到最大時的容量為理論克容量，這意味著在相同重量下
