首页 > 代码库 > 烟花特效
烟花特效
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>烟花易冷</title> </head> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/firework.css"> <script type="text/javascript" src="http://www.mamicode.com/firework.js"></script> <body>
</body> </html>
css
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
background: #000;
}
#firework{
width: 5px;
height: 20px;
background: #fff;
border-radius: 10px;
position: absolute;
left: 50%;
margin-left: -2px;
bottom: 0;
}
.piece{
width: 4px;
height: 4px;
background: #f00;
}
js
function ofirework(){
this.create=function({left,top}={}){ var fire=document.createElement("div"); fire.id="firework"; fire.style.left=left+"px"; fire.style.top=top+"px"; document.body.appendChild(fire); this.el=fire;
return this;
}, this.pos=function(){ var _self=this; document.onclick=function(e){ var e=e||window.event; var il=e.clientX; var it=e.clientY;
_self.create({left:il,top:it}).move();
}
}, this.move=function(){ var _self=this; // this.timer=null; // var speed=0; // this.timer=setInterval(function(){
// _self.el.style.top=_self.el.offsetTop-speed+"px"; // speed+=5;
// if(_self.el.offsetTop<=100){
// clearInterval(_self.timer); _self.boom();
// } // },50)
}, this.boom=function(){ var _self=this; for(var i=0;i<20;i++){ var piece=new oPiece();
piece.create(); piece.et.style.top=_self.el.offsetTop+"px"; piece.et.style.left=_self.el.offsetLeft+"px";
piece.move();
} _self.del();
}, this.del=function(){
document.body.removeChild(this.el); }
}
function oPiece(){ this.create=function(){ var color=["red","white", "pink","brown","gold","purple","rubine"]; var pie=document.createElement("div"); pie.className="piece"; pie.style.backgroundColor=color[Math.floor(Math.random()*color.length)]; pie.style.position="absolute"; document.body.appendChild(pie); this.et=pie;
return this;
}, this.del=function(){ document.body.removeChild(this.et); }, this.move=function(){ var _self=this; var iw=document.documentElement.clientWidth; var ih=document.documentElement.clientHeight; var speedX=Math.random()*-20+10; var speedY=Math.random()*4;
this.timer=null; this.timer=setInterval(function(){
_self.et.style.left=_self.et.offsetLeft-speedX+"px"; _self.et.style.top=_self.et.offsetTop-speedY+"px";
speedY-=1;
if(_self.et.offsetLeft>iw-_self.et.offsetWidth-5||_self.et.offsetLeft<0|| _self.et.offsetTop>ih-_self.et.offsetHeight-50||_self.et.offsetTop<0){
clearInterval(_self.timer); _self.del(); }
},100) }
} window.onload=function(){ var firework=new ofirework(); // firework.create().move(); firework.pos();
}
烟花特效