js模擬實(shí)現(xiàn)煙花特效
本文實(shí)例為大家分享了js實(shí)現(xiàn)煙花特效的具體代碼，供大家參考，具體內(nèi)容如下
如下圖
首先描繪圓周運(yùn)動(dòng)
// d1/*css*/div{ height: 4px; width: 4px; background: red; position: absolute;}//jsvar div = document.getElementById(’div’); // 畫(huà)運(yùn)動(dòng)點(diǎn)document.getElementsByTagName(’body’)[0].appendChild(tdiv); // 添加節(jié)點(diǎn)var deg = 0; // 運(yùn)動(dòng)角度var r = 100; // 半徑var center = [300, 300] // 圓心var dd = Math.PI/180; // PI和角度之間的轉(zhuǎn)換setInterval(function(){ deg++; div.style.left = center[0] + Math.cos(deg * dd) * r + ’px’; div.style.top = center[1] + Math.sin(deg * dd) * r + ’px’;},16);
以上代碼運(yùn)行后可以看到一個(gè)圓周運(yùn)動(dòng)紅色方塊 完成上述步驟后，有什么用呢？ 煙花的綻放，想象一下，可以當(dāng)成很多方塊從一個(gè)從圓心開(kāi)始向四周擴(kuò)算的一種運(yùn)動(dòng)方式。 一束煙花，有10個(gè)綻放點(diǎn)，那就是每隔360 / 10 = 36度，就有一條運(yùn)動(dòng)軌跡。 這樣就好辦了
// d2var divs = []; // 保存煙花節(jié)點(diǎn)var len = 10; // 煙花節(jié)點(diǎn)個(gè)數(shù)var temp = 360 / len; // 運(yùn)動(dòng)軌跡所隔角度f(wàn)or(var i = 0; i < len; i++){ var tdiv = document.createElement(’div’); var tr1 = r; // 半徑 var deg = i * temp; // 當(dāng)前軌跡所在的角度值 var left = center[0] + Math.cos(deg * dd) * tr1 var topLen = center[1] + Math.sin(deg * dd) * tr1 tdiv.style.left = left +’px’; tdiv.style.top = topLen +’px’; tdiv.data = { // 存放節(jié)點(diǎn)的位置信息 deg : deg, r : tr1, left : left, top : topLen }; document.getElementsByTagName(’body’)[0].appendChild(tdiv); divs.push(tdiv);}
上述代碼運(yùn)行后可以看到
看起來(lái)是有點(diǎn)煙花的意思了，但是煙花的運(yùn)動(dòng)軌跡可沒(méi)這么工整，同一個(gè)地點(diǎn)出發(fā)，同一個(gè)地點(diǎn)結(jié)束。 而這個(gè)結(jié)束點(diǎn)就是半徑的長(zhǎng)度值，所以只需將半徑進(jìn)行變化就可打亂。
// d3function getRanR(a,b){ // 隨機(jī)得到a-b的值 return Math.floor(Math.random()*(b-a+1)+a);}
將for循環(huán)里的 tr1 改為 getRanR(0,200); 就可看到下圖
看著很亂，完全沒(méi)點(diǎn)煙花的樣子。沒(méi)關(guān)系，讓它運(yùn)動(dòng)起來(lái)就可以看出來(lái)了。 為了讓這個(gè)動(dòng)起來(lái)就要讓上面 d2 的js代碼進(jìn)行修改。讓各個(gè)節(jié)點(diǎn)的起始位置為圓心。同時(shí)為了省點(diǎn)力，用css3進(jìn)行運(yùn)動(dòng)。
/*css*/div{ height: 4px; width: 4px; background: red; position: absolute; transition: 1s all; // 就添加這一句}// jstdiv.style.left = center[0] +’px’;tdiv.style.top = center[1] +’px’;
運(yùn)動(dòng)軌跡從 d2 可以看出來(lái)已經(jīng)全部存放到了節(jié)點(diǎn)里。用divs可以拿到各個(gè)節(jié)點(diǎn)。所以只需操作divs就可以了
document.onclick = function () { for(var i = 0; i < divs.length; i++){ divMove(divs[i]) }}function divMove(div){ var data = div.data; div.style.left = data.left + ’px’; div.style.top = data.top + ’px’;}
運(yùn)動(dòng)如下圖：
這樣就可以看到一個(gè)簡(jiǎn)易的煙花效果。就這么一個(gè)簡(jiǎn)易的煙花連續(xù)起來(lái)就可達(dá)到圖1的效果。 所以首先要對(duì)這個(gè)簡(jiǎn)易的煙花效果進(jìn)行封裝。 動(dòng)畫(huà)方面為了方便操作，所以引入jquery。 以下為html + css
<html><head> <meta charset='utf-8'> <style> *{ padding: 0; margin: 0; } div.boom-div{ height: 4px; width: 4px; background: orange; position: absolute; border-radius: 50%; } #container{ width: 100%; height: 100%; position: relative; } .input-container{ position: absolute; z-index: 1; } </style></head><body> <div class='input-container'> <input type='button' value='重繪'> <input type='button' value='清零'> <input type='button' value='保存'> </div> <div id='container'></div></body></html>
JS部分
var boom = { init: function (center, len, container, type) { this.len = len || 20; // 煙花節(jié)點(diǎn)個(gè)數(shù) this.maxR = 100; // 最大半徑 this.speed = 1500; // 速度 this.divs = []; // 存放煙花節(jié)點(diǎn) this.center = center; // 圓心 this.type = type; // 類(lèi)型 this.container = container; // 容器 this.paint(); }, getRanR: function (a, b) { // 得到隨機(jī)數(shù) return Math.floor(Math.random() * (b - a + 1 )+ a); }, // 畫(huà)出煙花節(jié)點(diǎn)所在點(diǎn)，以及保存去往點(diǎn)信息 // 圓心， 半徑， 容器， 類(lèi)型 paint: function () { var that = this; var center = that.center.slice(), len = that.len, container = that.container, type = that.type, dd = Math.PI / 180, temp = 360 / len; for (var i= 0; i < len; i++) { var div = document.createElement(’div’); var deg = i * temp; // 當(dāng)前軌跡所在的角度值 var cc = []; // 節(jié)點(diǎn)的結(jié)束點(diǎn) var tr = that.getRanR(0, that.maxR); // 半徑 var left = 0; // 煙花節(jié)點(diǎn)所在的位置 var topLen = 0; // 煙花節(jié)點(diǎn)所在的位置 var xCenter = center[0], yCenter = center[1]; if (type) { // 當(dāng)類(lèi)型為真時(shí)，整個(gè)煙花效果就是向外擴(kuò)張 left = xCenter; // 為假時(shí)則是向內(nèi)收縮，本質(zhì)一樣都是拿到開(kāi)始點(diǎn)和結(jié)束點(diǎn) topLen = yCenter; // 只是將開(kāi)始和結(jié)束換了個(gè)位置 cc = [xCenter + Math.cos(deg * dd) * tr, yCenter + Math.sin(deg * dd) * tr]; } else { left = xCenter + Math.cos(deg * dd) * tr; topLen = yCenter + Math.sin(deg * dd) * tr; cc = [xCenter, yCenter]; } div.className = ’boom-div’; div.style.left = left + ’px’; div.style.top = topLen + ’px’; div.data = { left: cc[0], // 節(jié)點(diǎn)的結(jié)束點(diǎn) top: cc[1], // 節(jié)點(diǎn)的結(jié)束點(diǎn) } that.divs.push(div); container.appendChild(div); } // 使節(jié)點(diǎn)運(yùn)動(dòng)起來(lái) that.move(); }, // 運(yùn)動(dòng) move: function () { var that = this; var len = that.len, container = that.container, divLen = that.divs.length; for (var i = 0; i < divLen; i++) { var div = that.divs[i]; $(div).animate({ left: div.data.left, top: div.data.top, opacity: 0, }, that.speed, 'linear', function() { // 運(yùn)動(dòng)完結(jié)后刪除節(jié)點(diǎn) this.parentNode.removeChild(this); }); } }}
控制特效
var container = $(’#container’)[0];var arr = []; // 存放鼠標(biāo)點(diǎn)擊位置var iCount = -1;$(container).on(’mousedown’, function(e) { iCount++; e = e || window.event; boom.init([e.clientX, e.clientY], 20,container, 1) arr[iCount] = []; // 每點(diǎn)擊一次，增加一個(gè)二位數(shù)組 $(container).on(’mousemove’, function(e) { e = e || window.event; boom.init([e.clientX, e.clientY], 20, container, 1) arr[iCount].push([e.clientX, e.clientY]) // 鼠標(biāo)每移動(dòng)一次，添加鼠標(biāo)位置 }) $(container).on(’mouseup’, function() { $(container).off(’mousemove’) })});// 重繪$(’#repaint’).click(function() { // console.log(arr) if( !arr.length ){ return; } var tempArr= []; // 將所有點(diǎn)取出來(lái)，轉(zhuǎn)換為二維數(shù)組 for(var i = 0; i < arr.length; i++){ for(var j = 0; j< arr[i].length; j++){ tempArr.push(arr[i][j]) } } var count = 0; var timmer = setInterval(function(){ if( ++ count >= tempArr.length){ clearInterval(timmer) } boom.init(tempArr[count],20,container,1) },16)});$(’#zero’).click(function(){ iCount=-1; arr=[]});
煙花節(jié)點(diǎn)可以用背景圖代替，比如用小愛(ài)心或者五角星啥的，只是大小得適當(dāng)調(diào)整。
更多JavaScript精彩特效分享給大家：
Javascript菜單特效大全
javascript仿QQ特效匯總
JavaScript時(shí)鐘特效匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 如何對(duì)php程序中的常見(jiàn)漏洞進(jìn)行攻擊2. PHP循環(huán)與分支知識(shí)點(diǎn)梳理3. ThinkPHP5 通過(guò)ajax插入圖片并實(shí)時(shí)顯示(完整代碼)4. JSP之表單提交get和post的區(qū)別詳解及實(shí)例5. SXNA RSS Blog 聚合器程序6. ASP中格式化時(shí)間短日期補(bǔ)0變兩位長(zhǎng)日期的方法7. Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理圖文詳解8. JavaWeb Servlet中url-pattern的使用9. jsp EL表達(dá)式詳解10. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算
網(wǎng)公網(wǎng)安備