庆元旦，放烟花(纯javascript版烟花效果)
2008年过去了，新的2009年到来了，2008太不平凡，发生了太多事，包括我自己，不管怎么样，困难过去就是一个新的阶段，继续+U。
在这里写了一个JS的烟花特效，以此来庆祝新的一年，祝大家元旦快乐！
实现原理：每个烟花颗粒是一个div对象，让每一个烟花颗粒对象以一个坐标点，按随机角度由内向外移动，每组烟花的颗粒数不同，发射的速度也不同，颜色也不同，都是随机产生的。当多个烟花颗粒同时移动的时候，就产生了类似烟花爆炸的效果，ok，现在看看效果和相关代码：
firework.js代码 ：
var Utils={};
Utils.$E=function(id){
return document.getElementById(id);
};Utils.$C=function(tagName){ return document.createElement(tagName);};Utils.getIntervalRandom=function(min,max){ return parseInt(Math.random()*(max-min)+min);};Utils.INTERVAL_SPEED=30;if(navigator.appName.toLowerCase().indexOf("netscape")!=-1){ Utils.INTERVAL_SPEED=Utils.INTERVAL_SPEED+(Utils.INTERVAL_SPEED/6);}String.prototype.padLeft=function(sLen,padChar){ var result=this;
for(i=this.length;i<sLen;i++){
result=padChar+result;
} return result;};var Firework=function(x,shotHeight,radius,particleCount,color,speed){ this.shotHeight=shotHeight || 200; this.radius=radius || 100; this.particleCount=particleCount || 10; this.color=color || "#FF0000"; this.parentElement=document.body; this.x=x; this.shottingSpeed=speed || 3; this.isShoted=false; this.isFlash=true; this._particles=[]; this._particleShape=unescape("%u25CF"); this._shottingShape="|"; this._depth=3; this._shotting=Utils.$C("div"); this._flashing=Utils.$C("div"); this._disposeCount=0; var _this=this; void function initialize(){ for(var i=0;i<_this.particleCount;i++){ _this._particles[i]=Utils.$C("div"); _this._particles[i].style.position="absolute"; _this._particles[i].style.left=_this.x+"px"; _this._particles[i].style.top=_this.shotHeight+"px"; _this._particles[i].style.zIndex=100; _this._particles[i].style.color=_this.color; _this._particles[i].style.display="none"; _this._particles[i].innerHTML=_this._particleShape; _this._particles[i].distance=Utils.getIntervalRandom(1,_this.radius-parseInt((i%_this._depth)*(_this.radius/_this._depth))); _this._particles[i].speed=Utils.getIntervalRandom(1,4)*_this._particles[i].distance*0.06; _this.parentElement.appendChild(_this._particles[i]); _this._setSize(_this._particles[i],5); } _this._shotting.speed=_this.shottingSpeed; _this._shotting.innerHTML=_this._shottingShape; _this._shotting.style.position="absolute"; _this._shotting.style.fontWeight="900"; _this._shotting.style.left=_this.x+"px"; //_this._shotting.style.top=_this.parentElement.offsetTop+_this.parentElement.offsetHeight-_this._shotting.offsetHeight+"px"; _this._shotting.style.top="700px"; _this._shotting.style.zIndex=100; _this._shotting.style.color=_this.color; _this._setSize(_this._shotting,15); _this.parentElement.appendChild(_this._shotting); _this._flashing.style.width="100%"; _this._flashing.style.height="100%"; _this._flashing.style.left="0"; _this._flashing.style.top="0"; _this._flashing.style.backgroundColor="#ffffee"; _this._flashing.style.position="absolute"; _this._flashing.style.zIndex=200; _this._flashing.style.display="none"; _this._flashing.style.MozOpacity=0.5; _this._flashing.style.filter="alpha(opacity=50)"; _this.parentElement.appendChild(_this._flashing); }();};Firework.prototype.shot=function(){ var _this=this; _this.isShoted=true; var shotInterval=window.setInterval(function(){ if(parseInt(_this._shotting.style.top)>_this.shotHeight){ _this._shotting.style.top=parseInt(_this._shotting.style.top)-_this._shotting.speed+"px"; } else{ window.clearInterval(shotInterval); _this.parentElement.removeChild(_this._shotting); _this.bomb(); _this._shotting=null; } },Utils.INTERVAL_SPEED);};Firework.prototype.bomb=function(){ var _this=this; if(_this.isFlash){ _this._flashing.style.display=""; var flashTimeout=window.setTimeout(function(){ _this.parentElement.removeChild(_this._flashing); window.clearTimeout(flashTimeout); },10); } else{ _this.parentElement.removeChild(_this._flashing); } for (var i = 0; i <_this._particles.length; i++) { _this._moveParticle(_this._particles[i], Utils.getIntervalRandom(0,360)); }};Firework.prototype._setSize=function(obj,value){ obj.style.fontSize=parseInt(value)+"px";};Firework.prototype._moveParticle=function(particle,angle){ var _this=this; var initX=parseInt(particle.style.left); var initY=parseInt(particle.style.top); var currentDistance=0; var currentX=initX; var currentY=initY; particle.style.display=""; particle.intervalId=window.setInterval(function(){ if(currentDistance<particle.distance){ var newX,newY; var xAngle=angle*(2*Math.PI/360); var xDirection=Math.abs(Math.cos(xAngle))/Math.cos(xAngle); var yDirection=Math.abs(Math.sin(xAngle))/Math.sin(xAngle); if(Math.abs(Math.tan(xAngle))<=1){ var deltaX=Math.abs(particle.speed*Math.cos(xAngle))*xDirection; newX=currentX+deltaX; newY=-(newX-initX)*Math.tan(xAngle)+initY; currentDistance+=Math.abs(deltaX); } else{ var deltaY=Math.abs(particle.speed*Math.sin(xAngle))*yDirection; newY=currentY-deltaY; newX=-(newY-initY)/Math.tan(xAngle)+initX; currentDistance+=Math.abs(deltaY); } currentX=newX; currentY=newY; particle.style.left=currentX+"px"; particle.style.top=currentY+"px"; } else{ window.clearInterval(particle.intervalId); _this.parentElement.removeChild(particle); particle=null; if(++_this._disposeCount==_this.particleCount){ _this._particles.length=0; _this.parentElement=null; _this=null; } } },Utils.INTERVAL_SPEED);};
HTML页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="firework.js"></script> <script type="text/javascript"> function test(){ var fireworks=[]; var total=15; window.setInterval(function(){ for (var i = 0; i < total; i++) { if (!fireworks[i] || !fireworks[i].parentElement) { var x=Utils.getIntervalRandom(50,document.body.offsetWidth-50); var shotHeight=Utils.getIntervalRandom(100,450); var radius=Utils.getIntervalRandom(50,200); var particleCount=Utils.getIntervalRandom(40,80); var speed=Utils.getIntervalRandom(10,20); var color="#"+Utils.getIntervalRandom(0,16777215).toString(16).padLeft(6,"f"); fireworks[i] = new Firework(x, shotHeight, radius, particleCount, color, speed); } } },100); window.setInterval(function(){ var currentIndex=Utils.getIntervalRandom(0,total); if(fireworks[currentIndex] && fireworks[currentIndex].parentElement && !fireworks[currentIndex].isShoted){ fireworks[currentIndex].shot(); } },500); } </script> </head> <body bgColor="#000000" onload="test();"> <div style="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:yellow;">Happy New Year</div> <div style="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:red;">2009</div> <a href="http://random.cnblogs.com" target="newWindow"><div style="width:100%;font-size:12px;text-align:center;color:#fff">Copyright by Random 2009 All Rights Reserved</div></a> </body></html>
