javascript實(shí)現(xiàn)網(wǎng)頁(yè)背景煙花效果的方法
本文實(shí)例講述了javascript實(shí)現(xiàn)網(wǎng)頁(yè)背景煙花效果的方法。分享給大家供大家參考。具體如下:
這里的網(wǎng)頁(yè)背景煙花爆炸特效,不用說是用Js實(shí)現(xiàn)的,配合黑色背景效果最好,五顏六色的煙花效果,四散的煙花效果,以前發(fā)過一些網(wǎng)頁(yè)上的煙花特效,本款類似,但代碼更簡(jiǎn)潔。
運(yùn)行效果如下圖所示:
具體代碼如下:
<html> <head> <title>背景的煙花效果</title> <style type="text/css"> <!-- body { background-color: #000000; } --> </style></head> <body> <script language="JavaScript"> var col = new Array('#ffffff','#fff000','#ffa000','#ff00ff','#00ff00','#0000ff','#ff0000'); var p='<div id="rearDiv" style="position:absolute;top:0px;left:0px">'; var n=0; for (i=0;i<14;++i){ n++; if (n=(col.length-1)) n=0; p=p+'<div style="position:relative;width:1px;height:1px;background:'+col[n]+';font-size:3px">.</div>'; } p=p+"</div>"; document.write(p); var Clrs = new Array('ff0000','00ff00','000aff','ff00ff','ffa500','ffff00','00ff00','ffffff','fffff0'); var sClrs = new Array('ffa500','55ff66','AC9DFC','fff000','fffff0'); var peepY; var peepX; var step = 5; var tallyStep = 0; var backColor = 'ffa000'; var Mtop = 250; var Mleft = 250; function dissilient() { peepY = window.document.body.clientHeight/3; peepX = window.document.body.clientWidth/8; enlarge(); tallyStep+= step; reduce(); T=setTimeout("dissilient()",20); } function enlarge(){ for ( i = 0 ; i < rearDiv.all.length ; i++ ) { var c=Math.round(Math.random()*(Clrs.length-1)); if (tallyStep < 90) rearDiv.all[i].style.background=backColor; if (tallyStep > 90) rearDiv.all[i].style.background=Clrs[c]; rearDiv.all[i].style.top = Mtop + peepY*Math.sin((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100); rearDiv.all[i].style.left = Mleft + peepY*Math.cos((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100); } } function reduce(){ if (tallyStep == 220) { tallyStep = -10; var k=Math.round(Math.random()*(sClrs.length-1)); backColor = sClrs[k]; Dtop = window.document.body.clientHeight - 250; Dleft = peepX * 3.5; Mtop = Math.round(Math.random()*Dtop); Mleft = Math.round(Math.random()*Dleft); document.all.rearDiv.style.top = Mtop+document.body.scrollTop; document.all.rearDiv.style.left = Mleft+document.body.scrollLeft; if ((Mtop < 20) || (Mleft < 20)) { Mtop += 90; Mleft += 90; } } } dissilient(); </script> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS forEach跳出循環(huán)2種實(shí)現(xiàn)方法
這篇文章主要介紹了JS forEach跳出循環(huán)2種實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06JS實(shí)現(xiàn)利用閉包判斷Dom元素和滾動(dòng)條的方向示例
這篇文章主要介紹了JS實(shí)現(xiàn)利用閉包判斷Dom元素和滾動(dòng)條的方向,涉及javascript閉包、事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-08-08初學(xué)js 新節(jié)點(diǎn)的創(chuàng)建 刪除 的步驟
對(duì)于js 我是個(gè)初學(xué)者 甚至還不入門,我比較喜歡js做出的特效。2011-07-07cocos2dx骨骼動(dòng)畫Armature源碼剖析(三)
本篇文章給大家分享cocos2dx骨骼動(dòng)畫Armature源碼剖析(三),代碼附有注釋,介紹的非常詳細(xì),需要的朋友可以參考下2015-09-09js從輸入框讀取內(nèi)容,比較兩個(gè)數(shù)字的大小方法
下面小編就為大家?guī)硪黄猨s從輸入框讀取內(nèi)容,比較兩個(gè)數(shù)字的大小方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查實(shí)例代碼
JS提供了很多方便操作數(shù)組的方法,這篇文章主要給大家介紹了關(guān)于JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07在TypeScript項(xiàng)目中搭配Axios封裝后端接口調(diào)用
這篇文章主要介紹了在TypeScript項(xiàng)目中搭配Axios封裝后端接口調(diào)用,本文記錄一下在?TypeScript?項(xiàng)目里封裝?axios?的過程,之前在開發(fā)?StarBlog-Admin?的時(shí)候已經(jīng)做了一次封裝,不過那時(shí)是JavaScript跟TypeScript還是有些區(qū)別的,需要的朋友可以參考下2024-01-01