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程序设计有所帮助。