首页 > 代码库 > 烟花特效

烟花特效

 

 

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();

}

 

 

烟花特效