欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

js模擬如何實(shí)現(xiàn)煙花特效

小編給大家分享一下js模擬如何實(shí)現(xiàn)煙花特效，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)綿陽電信機(jī)房機(jī)柜租用報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。

如下圖

js模擬如何實(shí)現(xiàn)煙花特效

首先描繪圓周運(yùn)動

// d1
/*css*/
div{
 height: 4px;
 width: 4px;
 background: red;
 position: absolute;
}
//js
var div = document.getElementById('div'); // 畫運(yùn)動點(diǎn)
document.getElementsByTagName('body')[0].appendChild(tdiv); // 添加節(jié)點(diǎn)

var deg = 0; // 運(yùn)動角度
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)成很多方塊從一個(gè)從圓心開始向四周擴(kuò)算的一種運(yùn)動方式。
一束煙花，有10個(gè)綻放點(diǎn)，那就是每隔360 / 10 = 36度，就有一條運(yùn)動軌跡。
這樣就好辦了

// d2
var divs = []; // 保存煙花節(jié)點(diǎn)
var len = 10; // 煙花節(jié)點(diǎn)個(gè)數(shù)
var temp = 360 / len; // 運(yùn)動軌跡所隔角度

for(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)行后可以看到

js模擬如何實(shí)現(xiàn)煙花特效

看起來是有點(diǎn)煙花的意思了，但是煙花的運(yùn)動軌跡可沒這么工整，同一個(gè)地點(diǎn)出發(fā)，同一個(gè)地點(diǎn)結(jié)束。
而這個(gè)結(jié)束點(diǎn)就是半徑的長度值，所以只需將半徑進(jìn)行變化就可打亂。

// d3
function getRanR(a,b){ // 隨機(jī)得到a-b的值
 return Math.floor(Math.random()*(b-a+1)+a);
}

將for循環(huán)里的 tr1 改為 getRanR(0,200);
就可看到下圖 

js模擬如何實(shí)現(xiàn)煙花特效

看著很亂，完全沒點(diǎn)煙花的樣子。沒關(guān)系，讓它運(yùn)動起來就可以看出來了。
為了讓這個(gè)動起來就要讓上面 d2 的js代碼進(jìn)行修改。讓各個(gè)節(jié)點(diǎn)的起始位置為圓心。同時(shí)為了省點(diǎn)力，用css3進(jìn)行運(yùn)動。

/*css*/
div{
 height: 4px;
 width: 4px;
 background: red;
 position: absolute;
 transition: 1s all; // 就添加這一句
}
// js
tdiv.style.left = center[0] +'px';
tdiv.style.top = center[1] +'px';

運(yùn)動軌跡從 d2 可以看出來已經(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)動如下圖：

js模擬如何實(shí)現(xiàn)煙花特效

這樣就可以看到一個(gè)簡易的煙花效果。就這么一個(gè)簡易的煙花連續(xù)起來就可達(dá)到圖1的效果。
所以首先要對這個(gè)簡易的煙花效果進(jìn)行封裝。
動畫方面為了方便操作，所以引入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 id="repaint" type="button" value="重繪">
 <input id="zero" type="button" value="清零">
 <input id="save" 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; // 類型
 this.container = container; // 容器
 this.paint();
 },
 getRanR: function (a, b) { // 得到隨機(jī)數(shù)
 return Math.floor(Math.random() * (b - a + 1 )+ a);
 },
 // 畫出煙花節(jié)點(diǎn)所在點(diǎn)，以及保存去往點(diǎn)信息
 // 圓心， 半徑， 容器， 類型
 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)類型為真時(shí)，整個(gè)煙花效果就是向外擴(kuò)張
 left = xCenter; // 為假時(shí)則是向內(nèi)收縮，本質(zhì)一樣都是拿到開始點(diǎn)和結(jié)束點(diǎn)
 topLen = yCenter; // 只是將開始和結(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)動起來
 that.move();
 },
 // 運(yùn)動
 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)動完結(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)每移動一次，添加鼠標(biāo)位置
 })
 $(container).on('mouseup', function() {
 $(container).off('mousemove')
 })
});
// 重繪
$('#repaint').click(function() {
 // console.log(arr)
 if( !arr.length ){
 return;
 }
 var tempArr= [];
 // 將所有點(diǎn)取出來，轉(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)可以用背景圖代替，比如用小愛心或者五角星啥的，只是大小得適當(dāng)調(diào)整。

JavaScript可以做什么

1.可以使網(wǎng)頁具有交互性，例如響應(yīng)用戶點(diǎn)擊，給用戶提供更好的體驗(yàn)。 2.可以處理表單，檢驗(yàn)用戶的輸入，并提供及時(shí)反饋節(jié)省用戶時(shí)間。 3.可以根據(jù)用戶的操作，動態(tài)的創(chuàng)建頁面。 4使用JavaScript可以通過設(shè)置cookie存儲在瀏覽器上的一些臨時(shí)信息。

以上是“js模擬如何實(shí)現(xiàn)煙花特效”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：js模擬如何實(shí)現(xiàn)煙花特效
文章路徑：http://chinadenli.net/article20/jgjsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、App開發(fā)、App設(shè)計(jì)、小程序開發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)