原生JS實現(xiàn)煙花效果，點擊頁面生成煙花，向四周擴散，然后再墜落下去。（這里的煙花我是用的特殊字符愛心形狀）

基礎(chǔ)css代碼

/* 設(shè)置基礎(chǔ)的css樣式 */ body{background: #000;overflow: hidden;} .fire{position: absolute;width: 4px;height: 30px;}

js代碼：

1、給頁面添加點擊事件，生成主體煙花

//給頁面設(shè)置點擊事件 document.onclick = function(eve){ var e = eve || window.event; //設(shè)置一個空數(shù)組,用來后面存放小煙花 var arr = []; //獲取鼠標(biāo)點擊的位置 var x = e.clientX; var y = e.clientY; //設(shè)置步長 var speed = 20; //生成大煙花,設(shè)置他的css樣式,出發(fā)點在可視區(qū)頁面的下方 var fire = document.createElement(’div’); fire.className = ’fire’; fire.style.background = randomColor(); fire.style.left = x + ’px’; fire.style.top = document.documentElement.clientHeight+’px’; //將大煙花追加到頁面上 document.body.appendChild(fire);

2、設(shè)置定時器，讓煙花向上運動，刪除

//生成定時器 var t = setInterval(function(){ //判斷如果大煙花的TOP值小于小于目標(biāo)值,清除定時器,并且將大煙花清除 if(fire.offsetTop <= y){ clearInterval(t); document.body.removeChild(fire); //執(zhí)行show(生成小煙花) show(); } //讓大煙花垂直向上運動 fire.style.top = fire.offsetTop - speed +’px’; },30);

3、然后在點擊的位置生成小煙花，設(shè)置樣式

function show(){ //利用循環(huán),生成50個小煙花,給小煙花添加css屬性 for(var i=0;i<50;i++){ var sFire = document.createElement(’div’); // sFire.className = ’small-fire’; sFire.style.left = x +’px’; sFire.style.top = y +’px’; // sFire.style.background = randomColor(); sFire.style.color = randomColor(); sFire.innerHTML = ’❤’; sFire.style.position = ’absolute’; //生成隨機數(shù) var a=Math.random()*360; sFire.sx = Math.sin(a*180/Math.PI)*20*Math.random(); sFire.sy = Math.cos(a*180/Math.PI)*20*Math.random(); //將小煙花追加到頁面上 document.body.appendChild(sFire); //將生成的煙花信息都添加到數(shù)組中 arr.push(sFire); } }

4、設(shè)置定時器，讓小煙花完成自由落體運動

setInterval(function move(){ //利用循環(huán)一直改變小煙花的位置 for(var i=0;i<arr.length;i++){ //設(shè)置將每次循環(huán)的第i個小煙花的運動范圍 arr[i].style.left = arr[i].offsetLeft + arr[i].sx + ’px’; arr[i].style.top = arr[i].offsetTop + arr[i].sy + ’px’; //讓煙花垂直方向的位置每次都增加,實現(xiàn)下落效果 arr[i].sy += 1; //判斷煙花是否運動出屏幕可視區(qū),如果是,就將它刪除 if(arr[i].offsetLeft<0 || arr[i].offsetLeft > document.documentElement.clientWidth || arr[i].offsetTop > document.documentElement.clientHeight){ document.body.removeChild(arr[i]); // arr.splice(i,1); } } },30) }

5、最后別忘了我們的隨機數(shù)和隨機顏色的封裝

// 范圍隨機數(shù) function random(max,min){ return Math.round(Math.random()*(max-min)+min); } // 隨機顏色 function randomColor(){ return 'rgb('+random(0,255)+','+random(0,255)+','+random(0,255)+')'; }

最后我們的煙花效果就實現(xiàn)了

今天的分享就到這里，希望大家能夠喜歡。

更多JavaScript精彩特效分享給大家：

Javascript菜單特效大全

javascript仿QQ特效匯總

JavaScript時鐘特效匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。