查看文章
 
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

类别:Js||添加到搜藏 |分享到i贴吧|浏览(126)|评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
     

   
帮助中心 | 空间客服 | 投诉中心 | 空间协议
©2012 Baidu