html中动态背景烟花,javascript实现网页背景烟花效果的方法

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

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

运行效果如下图所示：

具体代码如下：

背景的烟花效果

var col = new Array('#ffffff','#fff000','#ffa000','#ff00ff','#00ff00','#0000ff','#ff0000');

var p='

';

var n=0;

for (i=0;i<14;++i){

n++;

if (n=(col.length-1)) n=0;

p=p+'

.

';

}

p=p+"

";

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();

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