页面中的礼花效果

脚本说明:
第一步：把如下代码加入<body>区域中
<SCRIPT language=JavaScript>

if(!window.JSFX)
	JSFX=new Object();

JSFX.layerNo=0; 
/**********************************************************************************/
JSFX.createElem = function(htmlStr, x, y)
{
	var elem = null;

if(document.layers) 
	{
		elem=new Layer(2000); 
		elem.document.open(); 
		elem.document.write(htmlStr); 
		elem.document.close(); 
		elem.moveTo(x,y);
		elem.innerHTML = htmlStr;
	}
	else 
	if(document.all) 
	{
		var xName = "xLayer" + JSFX.layerNo++; 
		var txt = "<DIV ID='" + xName 
			+ "' STYLE=\"position:absolute;" 
			+ "left:"  + x + ";" 
			+ "top:"   + y + ";" 
			+ "visibility:hidden\">" 
			+ htmlStr 
			+ "</DIV>";

document.body.insertAdjacentHTML("BeforeEnd",txt);

elem = document.all[xName]; 
	} 
	else 
	if (document.getElementById)
	{
		var xName="xLayer" + JSFX.layerNo++;
		var txt = ""
			+ "position:absolute;"
			+ "left:"  + x + "px;"
			+ "top:"   + y + "px;"
			+ "visibility:hidden";

var newRange = document.createRange();

elem = document.createElement("DIV");
		elem.setAttribute("style",txt);
		elem.setAttribute("id", xName);

document.body.appendChild(elem);

newRange.setStartBefore(elem);
		strFrag = newRange.createContextualFragment(htmlStr);	
		elem.appendChild(strFrag);
	}

return elem;
}
/**********************************************************************************/
JSFX.Layer = function(newLayer, x, y) 
{
	if(!newLayer)
		return;

if(x==null)x=0; 
	if(y==null)y=0;

if(typeof newLayer == "string")
		this.elem = JSFX.createElem(newLayer, x, y);
	else
		this.elem=newLayer;

if(document.layers)
	{
		this.images=this.elem.document.images; 
		this.style = this.elem;
 	} 
	else 
	{
		this.images  = document.images; 
		this.style   = this.elem.style; 
	} 
} 
/**********************************************************************************/
JSFX.findLayer = function(theDiv, d)
{
	if(document.layers)
	{
		var i;
		if(d==null) d = document;
		var theLayer = d.layers[theDiv];
		if(theLayer != null)
			return(theLayer);
		else
			for(i=0 ; i<d.layers.length ; i++)
			{
				theLayer = JSFX.findLayer(theDiv, d.layers[i].document);
				if(theLayer != null)
					return(theLayer);
			}
		return("Undefined....");
	}
	else 
	if(document.all)
		return(document.all[theDiv]);
	else 
	if(document.getElementById)
		return(document.getElementById(theDiv));
	else
		return("Undefined.....");
}
var ns4 = (navigator.appName.indexOf("Netscape") != -1 && !document.getElementById);

/**********************************************************************************/
/*** moveTo (x,y) ***/
JSFX.Layer.prototype.moveTo = function(x,y)
{
	this.style.left = x+"px";
	this.style.top = y+"px";
}
if(ns4)
	JSFX.Layer.prototype.moveTo = function(x,y) { this.elem.moveTo(x,y); }
/**********************************************************************************/
/*** show()/hide() Visibility ***/
JSFX.Layer.prototype.show		= function() 	{ this.style.visibility = "visible"; } 
JSFX.Layer.prototype.hide		= function() 	{ this.style.visibility = "hidden"; } 
JSFX.Layer.prototype.isVisible	= function()	{ return this.style.visibility == "visible"; } 
if(ns4)
{
	JSFX.Layer.prototype.show		= function() 	{ this.style.visibility = "show"; }
	JSFX.Layer.prototype.hide 		= function() 	{ this.style.visibility = "hide"; }
	JSFX.Layer.prototype.isVisible 	= function() 	{ return this.style.visibility == "show"; }
}
/**********************************************************************************/
/*** zIndex ***/
JSFX.Layer.prototype.setzIndex	= function(z)	{ this.style.zIndex = z; } 
JSFX.Layer.prototype.getzIndex	= function()	{ return this.style.zIndex; }
/**********************************************************************************/
/*** BackGround Color ***/
JSFX.Layer.prototype.setBgColor	= function(color) { this.style.backgroundColor = color==null?'transparent':color; } 
if(ns4)
	JSFX.Layer.prototype.setBgColor 	= function(color) { this.elem.bgColor = color; }
/**********************************************************************************/
/*** BackGround Image ***/
JSFX.Layer.prototype.setBgImage	= function(image) { this.style.backgroundImage = "url("+image+")"; }
if(ns4)
	JSFX.Layer.prototype.setBgImage 	= function(image) { this.style.background.src = image; }
/**********************************************************************************/
/*** set Content***/
JSFX.Layer.prototype.setContent   = function(xHtml)	{ this.elem.innerHTML=xHtml; } 
if(ns4)
	JSFX.Layer.prototype.setContent   = function(xHtml)
	{
		this.elem.document.open();
		this.elem.document.write(xHtml);
		this.elem.document.close();
	}

/**********************************************************************************/
/*** Clipping ***/
JSFX.Layer.prototype.clip = function(x1,y1, x2,y2){ this.style.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")"; }
if(ns4)
	JSFX.Layer.prototype.clip = function(x1,y1, x2,y2)
	{
		this.style.clip.top	=y1;
		this.style.clip.left	=x1;
		this.style.clip.bottom	=y2;
		this.style.clip.right	=x2;
	}
/**********************************************************************************/
/*** Resize ***/
JSFX.Layer.prototype.resizeTo = function(w,h)
{ 
	this.style.width	=w + "px";
	this.style.height	=h + "px";
}
if(ns4)
	JSFX.Layer.prototype.resizeTo = function(w,h)
	{
		this.style.clip.width	=w;
		this.style.clip.height	=h;
	}
/**********************************************************************************/
/*** getX/Y ***/
JSFX.Layer.prototype.getX	= function() 	{ return parseInt(this.style.left); }
JSFX.Layer.prototype.getY	= function() 	{ return parseInt(this.style.top); }
if(ns4)
{
	JSFX.Layer.prototype.getX	= function() 	{ return this.style.left; }
	JSFX.Layer.prototype.getY	= function() 	{ return this.style.top; }
}
/**********************************************************************************/
/*** getWidth/Height ***/
JSFX.Layer.prototype.getWidth		= function() 	{ return this.elem.offsetWidth; }
JSFX.Layer.prototype.getHeight	= function() 	{ return this.elem.offsetHeight; }
if(!document.getElementById)
	JSFX.Layer.prototype.getWidth		= function()
 	{ 
		//Extra processing here for clip
		return this.elem.scrollWidth;
	}

if(ns4)
{
	JSFX.Layer.prototype.getWidth		= function() 	{ return this.style.clip.right; }
	JSFX.Layer.prototype.getHeight	= function() 	{ return this.style.clip.bottom; }
}
</SCRIPT>

if(!window.JSFX)
	JSFX=new Object();

if(!JSFX.Browser)
	JSFX.Browser = new Object();

if(navigator.appName.indexOf("Netscape") != -1)
{
	JSFX.Browser.getCanvasWidth	= function() {return innerWidth;}
	JSFX.Browser.getCanvasHeight	= function() {return innerHeight;}
	JSFX.Browser.getWindowWidth 	= function() {return outerWidth;}
	JSFX.Browser.getWindowHeight	= function() {return outerHeight;}
	JSFX.Browser.getScreenWidth 	= function() {return screen.width;}
	JSFX.Browser.getScreenHeight	= function() {return screen.height;}
	JSFX.Browser.getMinX		= function() {return(pageXOffset);}
	JSFX.Browser.getMinY		= function() {return(pageYOffset);}
	JSFX.Browser.getMaxX		= function() {return(pageXOffset+innerWidth);}
	JSFX.Browser.getMaxY		= function() {return(pageYOffset+innerHeight);}

}
else 	if(document.all) 	{
	JSFX.Browser.getCanvasWidth	= function() {return document.body.clientWidth;}
	JSFX.Browser.getCanvasHeight	= function() {return document.body.clientHeight;}
	JSFX.Browser.getWindowWidth 	= function() {return document.body.clientWidth;}
	JSFX.Browser.getWindowHeight	= function() {return document.body.clientHeight;}
	JSFX.Browser.getScreenWidth	= function() {return screen.width;}
	JSFX.Browser.getScreenHeight	= function() {return screen.height;}
	JSFX.Browser.getMinX		= function() {return(document.body.scrollLeft);}
	JSFX.Browser.getMinY		= function() {return(document.body.scrollTop);}
	JSFX.Browser.getMaxX		= function() {
		return(document.body.scrollLeft
			+document.body.clientWidth);
	}
	JSFX.Browser.getMaxY		= function() {
			return(document.body.scrollTop
				+document.body.clientHeight);
	}
} 
/*** End  ***/ 
</SCRIPT>

JSFX.FireworkDisplay = function(numFireworks)
{
	JSFX.FireworkDisplay.Fireworks = new Array();
	JSFX.FireworkDisplay.running = true;

JSFX.FireworkDisplay.loadImages();

var i=0;
	for(i=0 ; i<numFireworks; i++)
		JSFX.FireworkDisplay.Fireworks[i]=new JSFX.Firework(i, JSFX.FireworkDisplay.fwImages);

setTimeout("JSFX.FireworkDisplay.animate()", 30 );
}
JSFX.FireworkDisplay.loadImages = function()
{
	var i;
	JSFX.FireworkDisplay.fwImages = new Array();

for(i=0 ; i<21 ; i++)
	{
		JSFX.FireworkDisplay.fwImages[i] = new Image();
		JSFX.FireworkDisplay.fwImages[i].src = ""+i+"20020315.gif"
	}
}
JSFX.FireworkDisplay.animate = function()
{
	var i;
	for(i=0 ; i<JSFX.FireworkDisplay.Fireworks.length ; i++)
		JSFX.FireworkDisplay.Fireworks[i].animate();

setTimeout("JSFX.FireworkDisplay.animate()", 30);
}
/*
 * End Class FireworkDisplay
 */

/*
 * Class Firework extends Layer
 */
JSFX.Firework = function(fwNo, theImages)
{
	var imgName = "fw"+fwNo;
	var htmlStr = "<IMG SRC='"+theImages[0].src+"' NAME='"+imgName+"'>"

//Call the superclass constructor
	this.superC = JSFX.Layer;
	this.superC(htmlStr, 0, 0);

this.frame		= 0;
	this.state		= "OFF";
	this.fwImages	= theImages;
	this.imgName	= imgName;
	this.ay		= 0.1;
	this.resizeTo(2,2);
}
JSFX.Firework.prototype = new JSFX.Layer;

JSFX.Firework.prototype.animate = function()
{
	if(this.state == "ON")
	{
		this.frame++
		if(this.frame == this.fwImages.length)
		{
			this.frame = 0;
			this.state = "OFF";
			this.hide();
		}
		else
		{
			this.images[this.imgName].src = this.fwImages[this.frame].src;
		}
	}
	else if(this.state == "OFF")
	{
		var ydiff = JSFX.Browser.getMaxY() - JSFX.Browser.getMinY();

if(ydiff > 800)
			this.dy = -12;
		else if(ydiff > 600)
			this.dy = -10;
		else if(ydiff > 400)
			this.dy = -8;
		else if(ydiff > 300)
			this.dy = -7;
		else
			this.dy = -4;

this.dx = Math.random()*-8 + 4;
		this.dy += Math.random()*3;
		this.clip(0,0,2,2);
		this.setBgColor(Math.random()>.33 ? Math.random()>.33 ? "#FF0000" : "#00FF00" : "#0000FF");

this.x=JSFX.Browser.getMaxX()/2;
		this.y=JSFX.Browser.getMaxY()-10;
		this.moveTo(this.x,this.y);
		this.show();
		this.state="TRAVEL";
	}
	else if(this.state == "TRAVEL")
	{
		this.x += this.dx;
		this.y += this.dy;
		this.dy += this.ay;
		this.moveTo(this.x,this.y);
		if(this.dy > -1 && Math.random()<.05)
		{
			this.state = "ON";
			this.setBgColor(null);
			this.clip(0,0,100,100);
			this.x -=50;
			this.y -=50;
			this.moveTo(this.x, this.y);
		}
	}

}
/*** If no other script has added it yet, add the ns resize fix ***/
if(navigator.appName.indexOf("Netscape") != -1 && !document.getElementById)
{
	if(!JSFX.ns_resize)
	{
		JSFX.ow = outerWidth;
		JSFX.oh = outerHeight;
		JSFX.ns_resize = function()
		{
			if(outerWidth != JSFX.ow || outerHeight != JSFX.oh )
				location.reload();
		}
	}
	window.onresize=JSFX.ns_resize;
}

</SCRIPT>
<SCRIPT language=JavaScript>

</SCRIPT>

第二步：把<body>中的代码改为：
<BODY bgColor=black onload=JSFX_StartEffects()>