javascript实现网页背景烟花效果的方法

2019-11-20 11:53:49

字体：大中小

来源：转载

供稿：网友

本文实例讲述了javascript实现网页背景烟花效果的方法。分享给大家供大家参考。具体如下：

这里的网页背景烟花爆炸特效，不用说是用Js实现的，配合黑色背景效果最好，五颜六色的烟花效果，四散的烟花效果，以前发过一些网页上的烟花特效，本款类似，但代码更简洁。

运行效果如下图所示：

具体代码如下：

<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>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：JS实现霓虹灯文字效果的方法

下一篇：JS实现三级折叠菜单特效，其它级可自动收缩