當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
（web前端每日一练）用JavaScript制作一个跟随鼠标的小球炫彩动画 /doge/doge
生活随笔
收集整理的這篇文章主要介紹了
（web前端每日一练）用JavaScript制作一个跟随鼠标的小球炫彩动画 /doge/doge
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
4月30日，（每日一練）Javascript案例，鼠標跟隨炫彩特效
鼠標在頁面移動的同時，生成炫彩小球移動，生成的位置跟隨鼠標位置，并在一段時間后，小球消失，類似特效：具有鼠標高光提示位置功能的運用。
建議小伙伴們先自行嘗試，
提示：綁定鼠標監聽用client索取鼠標位置，動態生成小球（div? border-radius = 50%）
利用定時器，按你喜歡的幀率（ms）更新小球的狀態，顏色，顯示程度！
本文重難點：
1、如何在生成小球的同時不造成內存的大量占用（仔細思考！在今后學習工作都很重要）
2、定時器的運用，以及update更新函數的書寫
練習本文之前必會知識：構造函數以及new一個實例的寫法及運用，dom的運用
現在給你15分鐘時間嘗試書寫代碼
---------分割線----------
--------------------------------------------------------------------------------------------------------------
時間到！
如果你成功寫出大概特效，那么，恭喜你通過了今天的每日練習！
如果沒有寫出，也不要灰心，接下來看看我的解答。
<!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>Document</title> </head> <style>body {background-color: black;}.ball {position: absolute;border-radius: 50%;} </style><body><script>//創建小球類function Ball(x, y) {//x,y表示圓心this.x = x;this.y = y;this.r = 20;this.opacity = 1;this.color = colorArr[parseInt(Math.random() * colorArr.length)];// 這個小球的x增量和y的增量，使用do while語句，可以防止dX和dY都是零do {this.dX = parseInt(Math.random() * 20) - 10;this.dY = parseInt(Math.random() * 20) - 10;}while (this.dX == 0 & this.dY == 0)//初始化this.init();ballArr.push(this);};//初始化方法Ball.prototype.init = function () {//創建自己的domthis.dom = document.createElement('div');this.dom.className = 'ball';this.dom.style.width = this.r * 2 + 'px';this.dom.style.height = this.r * 2 + 'px';this.dom.style.left = this.x - this.r + 'px';this.dom.style.top = this.y - this.r + 'px';this.dom.style.backgroundColor = this.color;//孤兒節點需要上樹document.body.appendChild(this.dom);};//更新Ball.prototype.update = function () {//位置改變this.x += this.dX;this.y += this.dY;//半徑改變this.r += 0.2;//透明度改變this.opacity -= 0.01;this.dom.style.width = this.r * 2 + 'px';this.dom.style.height = this.r * 2 + 'px';this.dom.style.left = this.x - this.r + 'px';this.dom.style.top = this.y - this.r + 'px';this.dom.style.opacity = this.opacity;//防止大量內存占用！小球需要檢索并刪除！// 當透明度小于0的時候，就需要從數組中刪除自己，DOM元素也要刪掉自己if (this.opacity < 0) {// 從數組中刪除自己for (var i = 0; i < ballArr.length; i++) {if (ballArr[i] == this) {ballArr.splice(i, 1);}}// 還要刪除自己的domdocument.body.removeChild(this.dom);}}// 把所有的小球實例都放到一個數組中var ballArr = [];// 初始顏色數組var colorArr = ['#66CCCC', '#CCFF66', '#FF99CC', '#FF6666','#CC3399', '#FF6600'];// 定時器，負責更新所有的小球實例setInterval(function () {// 遍歷數組，調用調用的update方法for (var i = 0; i < ballArr.length; i++) {ballArr[i].update();}}, 20);// 鼠標指針的監聽document.onmousemove = function (e) {// 得到鼠標指針的位置var x = e.clientX;var y = e.clientY;new Ball(x, y);};</script> </body></html>總結
以上是生活随笔為你收集整理的（web前端每日一练）用JavaScript制作一个跟随鼠标的小球炫彩动画 /doge/doge的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Google的Picasa网络相册很弓虽
- 下一篇： CVPR2022论文速递（2022.4.