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> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>js放烟花效果(面向对象版)</title> <styletype="text/css"> html,body{overflow:hidden;} body,div,p{margin:0;padding:0;} body{background:#000;font:12px/1.5arial;color:#7A7A7A;} a{text-decoration:none;outline:none;} #tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2pxsolid#484848;} #tips{top:0;border-width:002px;} #tipsa{font:14px/30pxarial;color:#FFF;background:#F06;display:inline-block;margin:10px5px0;padding:015px;border-radius:15px;} #tipsa.active{background:#FE0000;} #copyright{bottom:0;line-height:50px;border-width:2px00;} #copyrighta{color:#FFF;background:#7A7A7A;padding:2px5px;border-radius:10px;} #copyrighta:hover{background:#F90;} p{position:absolute;top:55px;width:100%;text-align:center;} </style> <scripttype="text/javascript"> varfgm={ on:function(element,type,handler){ returnelement.addEventListener?element.addEventListener(type,handler,false):element.attachEvent("on"+type,handler) }, un:function(element,type,handler){ returnelement.removeEventListener?element.removeEventListener(type,handler,false):element.detachEvent("on"+type,handler) }, bind:function(object,handler){ returnfunction(){ returnhandler.apply(object,arguments) } }, randomRange:function(lower,upper){ returnMath.floor(Math.random()*(upper-lower+1)+lower) }, getRanColor:function(){ varstr=this.randomRange(0,0xFFFFFF).toString(16); while(str.length<6)str="0"+str; return"#"+str } }; //初始化对象 functionFireWorks(){ this.type=0; this.timer=null; this.fnManual=fgm.bind(this,this.manual) } FireWorks.prototype={ initialize:function(){ clearTimeout(this.timer); fgm.un(document,"click",this.fnManual); switch(this.type){ case1: fgm.on(document,"click",this.fnManual); break; case2: this.auto(); break; }; }, manual:function(event){ event=event||window.event; this.__create__({ x:event.clientX, y:event.clientY }); }, auto:function() { varthat=this; that.timer=setTimeout(function(){ that.__create__({ x:fgm.randomRange(50,document.documentElement.clientWidth-50), y:fgm.randomRange(50,document.documentElement.clientHeight-150) }) that.auto(); },fgm.randomRange(900,1100)) }, __create__:function(param) { varthat=this; varoEntity=null; varoChip=null; varaChip=[]; vartimer=null; varoFrag=document.createDocumentFragment(); oEntity=document.createElement("div"); with(oEntity.style){ position="absolute"; top=document.documentElement.clientHeight+"px"; left=param.x+"px"; width="4px"; height="30px"; borderRadius="4px"; background=fgm.getRanColor(); }; document.body.appendChild(oEntity); oEntity.timer=setInterval(function(){ oEntity.style.top=oEntity.offsetTop-20+"px"; if(oEntity.offsetTop<=param.y){ clearInterval(oEntity.timer); document.body.removeChild(oEntity); (function(){ //在50-100之间随机生成碎片 //由于IE浏览器处理效率低,随机范围缩小至20-30 //自动放烟花时,随机范围缩小至20-30 varlen=(/msie/i.test(navigator.userAgent)||that.type==2)?fgm.randomRange(20,30):fgm.randomRange(50,100) for(i=0;i<len;i++){ oChip=document.createElement("div"); with(oChip.style){ position="absolute"; top=param.y+"px"; left=param.x+"px"; width="4px"; height="4px"; overflow="hidden"; borderRadius="4px"; background=fgm.getRanColor(); }; oChip.speedX=fgm.randomRange(-20,20); oChip.speedY=fgm.randomRange(-20,20); oFrag.appendChild(oChip); aChip[i]=oChip }; document.body.appendChild(oFrag); timer=setInterval(function(){ for(i=0;i<aChip.length;i++){ varobj=aChip[i]; with(obj.style){ top=obj.offsetTop+obj.speedY+"px"; left=obj.offsetLeft+obj.speedX+"px"; }; obj.speedY++; (obj.offsetTop<0||obj.offsetLeft<0||obj.offsetTop>document.documentElement.clientHeight||obj.offsetLeft>document.documentElement.clientWidth)&&(document.body.removeChild(obj),aChip.splice(i,1)) }; !aChip[0]&&clearInterval(timer); },30) })() } },30) } }; fgm.on(window,"load",function(){ varoTips=document.getElementById("tips"); varaBtn=oTips.getElementsByTagName("a"); varoFireWorks=newFireWorks(); fgm.on(oTips,"click",function(event){ varoEvent=event||window.event; varoTarget=oEvent.target||oEvent.srcElement; vari=0; if(oTarget.tagName.toUpperCase()=="A"){ for(i=0;i<aBtn.length;i++)aBtn[i].className=""; switch(oTarget.id){ case"manual": oFireWorks.type=1; break; case"auto": oFireWorks.type=2; break; case"stop": oFireWorks.type=0; break; } oFireWorks.initialize(); oTarget.className="active"; oEvent.stopPropagation?oEvent.stopPropagation():oEvent.cancelBubble=true } }); }); fgm.on(document,"contextmenu",function(event){ varoEvent=event||window.event; oEvent.preventDefault?oEvent.preventDefault():oEvent.returnValue=false }); </script> </head> <body> <divid="tips"><aid="manual"href="javascript:;">手动放烟花</a><aid="auto"href="javascript:;">自动放烟花</a><aid="stop"href="javascript:;">停止放烟花</a></div> <p>由于浏览器渲染能力有限,当浏览器为IE或选择自动放烟花时,随机生成的烟花碎片范围自动调整至20-30</p> <divid="copyright">建议使用Firefox,Chrome浏览器预览效果.By—Ferris,QQ:21314130</div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。