查看文章 |
Javascript实现的放烟花的效果
2010-01-25 22:31
数学还是很有用的,在构思怎么实现烟花四射效果的时候,一开始想用普通坐标加抛物线函数(想复杂了一点,结果没做出来),发现每个花朵的路径都是一个不同对称轴不同导数的抛物线——复杂,不过稍一仔细想,只要不是特别炫的轨迹效果,用极坐标就可以了——每个烟花的幅角决定其运动方向(速度是一样的)——ok,show the code function HappyNewYear(argObj) { if(typeof argObj=='object') { this.className=argObj.className;//must be an array this.time=argObj.time||2000;//null or number this.num=argObj.num||4;//null or number this.starnum=argObj.starnum||12; }else{ throw new Error('Argument is not right!'); } this.init(); } HappyNewYear.prototype= { init:function() { var _this=this; HappyNewYear.__x=document.documentElement.clientWidth-100; HappyNewYear.__y=document.documentElement.clientHeight-100; this.htmlI=[]; var htmlI; for(var i=0;i<this.num;i++) { htmlI=document.createElement('div'); htmlI.innerHTML='HAPPY NEW YEAR'; htmlI.className=this.className[i]||this.className[i%4]; htmlI.style.visibility='hidden'; htmlI.style.position='absolute'; document.body.appendChild(htmlI); htmlI.width=htmlI.clientWidth; htmlI.height=htmlI.clientHeight; htmlI.weight=this.starnum; this.htmlI.push(htmlI); } //htmlI=null; document.oncontextmenu=function() { for(var i in _this.htmlI) { for(var j in _this.htmlI[i].star) { clearInterval(_this.htmlI[i].star[j].timer); }; }; clearInterval(_this.timer); }; }, begin:function() { var _this=this; var i=0; this.timer=setInterval( function() { if(_this.htmlI[i]&&_this.htmlI[i].style.visibility=='hidden') { _this.setXY(_this.htmlI[i]); } i++; if(i>=_this.num) { i=0; } },1500 ); }, setXY:function(obj) { obj.style.left=parseInt(Math.random()*(HappyNewYear.__x-400))+'px'; obj.style.top= (parseInt(Math.random()*HappyNewYear.__y)>20)?parseInt(Math.random()*HappyNewYear.__y)-20+'px':parseInt(Math.random()*HappyNewYear.__y)+'px'; obj.x=parseInt(obj.style.left)+parseInt(obj.offsetWidth/2); obj.y=parseInt(obj.style.top); obj.weight=this.starnum; obj.star=[]; obj.style.visibility='visible'; while(obj.star.length<this.starnum) { this.createStar(obj); } for(var j=0;j<this.starnum;j++) { if(obj.star[j].style.visibility!='hidden') { this.path(obj.star[j],obj); } } }, createStar:function(obj) { var star=document.createElement('div'); star.innerHTML='*'; star.style.position='absolute'; star.style.left=obj.x+'px'; star.style.top=obj.y+'px'; // star.style.visibility='hidden'; star.className=obj.className; document.body.appendChild(star); star.timer=0; obj.star.push(star); obj.star[obj.star.length-1].i=obj.star.length-1; obj.star[obj.star.length-1].trian=(obj.star.length-1)/this.starnum*2*Math.PI; }, path:function(star,htmlI) { star.style.visibility='visible'; star.style.left=htmlI.x+'px'; star.style.top=htmlI.y+'px'; var _this=this; star.timer=setInterval( function() { if(Math.pow(parseInt(star.style.left)-htmlI.x,2)+Math.pow(parseInt(star.style.top)-htmlI.y,2)>=49000||parseInt(star.style.left)+100> HappyNewYear.__x||parseInt(star.style.top)>= HappyNewYear.__y) { star.style.visibility='hidden'; htmlI.weight--; clearInterval(star.timer); if(htmlI.weight<=0) { htmlI.weight=this.starnum; htmlI.style.visibility='hidden'; } }else{ star.style.left=parseInt(star.style.left)+10*Math.cos(star.trian)+'px'; star.style.top=parseInt(star.style.top)+10*Math.sin(star.trian)+'px'; } },100 ); } } //实例化,设置烟花的颜色,,每个烟花包含的子元素数量 var _star=new HappyNewYear({className:['green','blue','yellow','red'],starnum:16,num:8}); document.onclick=function() { //开始放 _star.begin(); } 测试地址 http://diggcd.com:888/talk/happynewyear.htm |
最近读者:

