JS实现超炫网页烟花动画效果的方法
本文实例讲述了JS实现超炫网页烟花动画效果的方法。分享给大家供大家参考。具体分析如下：
非常炫的使用JS实现的一个网页烟花燃放动画效果，能适应JS做出这样的动画来
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超炫网页烟花效果</title>
</head>
<styletype="text/css">
.fire{display:block;overflow:hidden;font-size:12px;position:absolute};
body{overflow:hidden;background:#000}
html{overflow:hidden;background:#000}
</style>
<body>
</body>
<scripttype="text/javascript">
varFire=function(r,color){
this.radius=r||12;
this.color=color;
this.xpos=0;
this.ypos=0;
this.zpos=0;
this.vx=0;
this.vy=0;
this.vz=0;
this.mass=1;
this.x=0;
this.y=0;
this.p=document.createElement("span");
this.p.className="fire";
this.p.innerHTML="*";
this.p.style.fontSize=this.radius+"px";
this.p.style.color="#"+this.color;
}
Fire.prototype={
append:function(parent){
parent.appendChild(this.p);
},
setSize:function(scale){
this.p.style.fontSize=this.radius*scale+"px";
},
setPosition:function(x,y){
this.p.style.left=x+"px";
this.p.style.top= y+"px";
},
setVisible:function(b){
this.p.style.display=b?"block":"none";
}
}
varfireworks=function(){
varfires=newArray();
varcount=150;
varfl=250;
varvpx=500;
varvpy=300;
vargravity=.5;
varfloor=200;
varbounce=-.8;
vartimer;
varwind=((Math.floor(Math.random()*3)+3)/10)*(Math.random()*2-1>0?1:-1)*.25;
varwpos=0;
varwcount;
return{
init:function(){
wcount=50+Math.floor(Math.random()*100);
for(vari=0;i<count;i++){
varcolor=0xFF0000;
color=(Math.random()*0xFFFFFF).toString(16).toString().split(".")[0];
while(color.length<6){
color="0"+color;
}
varfire=newFire(12,color);
fires.push(fire);
fire.ypos=-100;
fire.vz=Math.random()*6-3;
fire.vx=(Math.random()*2-1)*2;
fire.vy=Math.random()*-15-15;
fire.x=500
fire.y=600;
fire.append(document.body);
}
varthat=this;
timer=setInterval(function(){
wpos++;
if(wpos>=wcount){
wpos=0;
wcount=50+Math.floor(Math.random()*100);
wind=((Math.floor(Math.random()*3)+3)/10)*(Math.random()*2-1>0?1:-1)*.25;
}
for(vari=0;i<count;i++){
that.move(fires[i]);
}
},30);
},
move:function(fire){
fire.vy+=gravity;
fire.x+=fire.vx;
fire.y+=fire.vy;
fire.vx+=wind;
fire.setPosition(fire.x,fire.y);
if(fire.x<0||fire.x>1000||fire.y <0||fire.y >600){
fire.vx=(Math.random()*2-1)*2;
fire.vy=Math.random()*-15-15;
fire.x=500;
fire.y=600;
fire.setPosition(fire.x,fire.y);
}
}
}
}
fireworks().init();
</script>
</html>
希望本文所述对大家的javascript程序设计有所帮助。