js實現(xiàn)炫酷的煙花效果
更新時間：2021年09月08日 10:08:32 作者：whlzzz123
這篇文章主要為大家詳細介紹了js實現(xiàn)炫酷的煙花效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)炫酷的煙花效果的具體代碼，供大家參考，具體內容如下
我們要理清整個流程的思路。
首先建立一塊畫布，用于展示煙花的效果，然后就要去思考煙花燃放的流程，我們都知道煙花通常都是先有一份飛上天，然后再分散成很多個小煙花，并且每一個小煙花都有不同的樣式以及運動方式。
所有整體思路就是先建立一個div作為我們的大煙花，當大煙花運動到我們鼠標點擊的位置的時候，大煙花就會消失，然后就會產(chǎn)生更多的小煙花，并且這些小煙花的運動軌跡樣式各不相同。
1.建立一塊畫布（div）用于展示煙花的效果
/*給畫布設置css樣式 */
#container {
width: 80%;
height: 600px;
border: 1px red solid;
position: relative;
margin: 20px auto;
cursor: pointer;
background: black;
}
<!-- 設置一個div -->
<div id="container"></div>
2.獲取節(jié)點
//獲取節(jié)點
var app = document.getElementById('container');
//給app設置一個綁定事件
app.onclick = function(event) {
var e = event || window.event
//獲得鼠標點擊的位置的坐標
var pos = {
cy: e.offsetY,
cx: e.offsetX
}
new Fire(app, pos)
}
煙花的實現(xiàn)過程：先實現(xiàn)一個大的div運動到鼠標點擊的位置，然后在散開成為很多個div
3.先實現(xiàn)大煙花（需要調用隨機數(shù)方法，隨機顏色方法，以及運動函數(shù)）
// 構造函數(shù)
function Fire(app, pos) {
//把屬性設置成變量
this.app = app;
this.pos = pos;
//創(chuàng)建一個大的div
this.bf = document.createElement('div');
//設置一個類名
this.bf.className = 'fire';
//設置樣式
this.bf.style.left = this.pos.cx + 'px';
this.bf.style.background = this.getColor();
this.app.appendChild(this.bf);
//調用運動函數(shù)
this.move(this.bf, {
top: this.pos.cy
}, () => {
this.bf.remove();
this.smallFire();
})
}
3.1首先先設置fire的樣式
這是fire的初始樣式
.fire {
background: red;
position: absolute;
/* 設置bottom時,top獲取為最大值,減去鼠標點擊位置 */
bottom: 0px;
width: 6px;
height: 6px;
}
3.2設置一個隨機數(shù)和隨機顏色的方法（原型對象）
//獲得一個隨機數(shù)方法
Fire.prototype.rand = function(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
//獲得一個隨機顏色的方法
Fire.prototype.getColor = function() {
let sum = '#';
for (let i = 0; i < 6; i++) {
sum += this.rand(0, 15).toString(16)
}
return sum;
}
3.3封裝一個運動函數(shù)（原型對象）
Fire.prototype.move = function(ele, target, cb) {
// clearInterval(times);
let times = setInterval(function() {
// console.log(this);
var onOff = true;
// 遍歷運動的方向和目標
for (let attr in target) {
// attr 表示運動的屬性
// console.log(attr);
// 獲取元素屬性的實時值
let tmpVal = parseInt(this.getPos(ele, attr))
// 計算speed
// console.log(tmpVal, attr);
let speed = (target[attr] - tmpVal) / 10;
// 取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 停止計時器,當一個屬性運動到位置,設置開關狀態(tài)
if (tmpVal == target[attr]) onOff = true;
// 讓元素動起來
ele.style[attr] = tmpVal + speed + 'px';
}
// 判斷開關狀態(tài),清除定時器
for (var moveAttr in target) {
// 如果不相等,就說明有屬性沒有運動到位置,定時器不能停止
if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {
onOff = false;
break;
}
}
if (onOff) {
clearInterval(times);
cb && cb();
}
// console.log(1111);
}.bind(this), 30)
}
// 獲取元素的實時位置的函數(shù)
Fire.prototype.getPos = function(obj, attr) {
if (obj.currentStyle) { // 獲取css的樣式
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj)[attr]
}
}
通過以上幾個步驟我們就可以得到大煙花的運動軌跡，大煙花運動到指定位置后就會消失，并且從消失的地方產(chǎn)生許多小煙花。由前面的分析可以知道，小煙花的運動軌跡和樣式各不相同，接下來就是小煙花的實現(xiàn)
4.小煙花的實現(xiàn)
4.1設置samll-fire的樣式
這是samll-fire的初始屬性
.small-fire {
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
}
4.2設置小煙花的屬性
//小煙花
Fire.prototype.smallFire = function() {
//首先我們設置小煙花的數(shù)量
let num = this.rand(50, 60)
//遍歷 給每一個小煙花設置不同的樣式
for (let i = 0; i < num; i++) {
let sf = document.createElement('div');
sf.className = 'small-fire';
sf.style.left = this.pos.cx + 'px';
sf.style.top = this.pos.cy + 'px';
sf.style.background = this.getColor();
//console.log(sf);
//追加到頁面中
this.app.appendChild(sf);
//使小煙花的運動軌跡成圓周運動
//var top = parseInt(Math.sin(Math.PI / 180 * 360 / num * i) * r) + this.pos.cy;
//var left = parseInt(Math.cos(Math.PI / 180 * 360 / num * i) * r) + this.pos.cx;
//給小煙花一個隨機的位置，可以是在畫布里面的任意一個位置
let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight);
let left = this.rand(0, this.app.offsetWidth - sf.offsetWidth);
//調用運動函數(shù)
this.move(sf, {
top: top,
left: left
}, function() {
sf.remove();
})
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS實現(xiàn)圖片無間斷滾動代碼匯總,非常實用的特效代碼,需要的朋友可以參考下2014-07-07
JS實現(xiàn)兩表格里數(shù)據(jù)來回轉移的方法
這篇文章主要介紹了JS實現(xiàn)兩表格里數(shù)據(jù)來回轉移的方法,涉及javascript鼠標事件及頁面元素的相關操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了微信小程序系列之自定義頂部導航功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案
在前端直接讀取并原樣展示W(wǎng)ord文檔是一個相對復雜的任務,因為Word文檔的格式(如.doc或.docx)與Web技術棧使用的格式(HTML、CSS)不兼容,這篇文章主要給大家介紹了關于前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了javascript中的異步調用機制,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
js基于FileSaver.js 瀏覽器導出Excel文件的示例
本篇文章主要介紹了js基于FileSaver.js 瀏覽器導出Excel文件的示例，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了關于字符串和對象互轉以及JSON.parse()的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Bootstrap 支持最常見的表單控件，主要是 input、textarea、checkbox、radio 和 select。本文通過實例代碼給大家講解Bootstrap所支持的表單控件，感興趣的朋友一起學習吧2016-05-05
本文主要介紹了webpack熱更新的原理及實現(xiàn),,無需完全刷新整個頁面的同時,更新代碼變動的模塊,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06
基于Leaflet的Webgis經(jīng)緯網(wǎng)格功能實現(xiàn)
本文將介紹一款Leaflet的經(jīng)緯網(wǎng)插件,基于這款經(jīng)緯網(wǎng)插件,詳細介紹如何實現(xiàn)經(jīng)緯網(wǎng)功能,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2023-12-12