JS--烟花效果
2020-03-29 13:25
711 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #container{ width: 80%; height: 500px; margin: 30px auto; background-color: #000000; border: 2px solid #000000; cursor: pointer; position: relative; overflow: hidden; } .fire{ width: 5px; height: 20px; position: absolute; bottom: 0; border-top-left-radius: 90%; border-top-right-radius: 90%; border-bottom-left-radius: 60%; border-bottom-right-radius: 60%; } .s_fire{ width: 5px; height: 5px; border-radius: 50%; position: absolute; } </style> </head> <body> <div id="container"></div> </body> <script src="move.2.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> class Fire{ constructor(pos) { this.cont=document.getElementById("container"); this.x=pos.x; this.y=pos.y; } create(){ this.f=document.createElement("div"); this.f.className="fire"; this.f.style.backgroundColor=randColor(); this.cont.appendChild(this.f); this.f.style.left=this.x+"px"; this.move(); } move(){ move(this.f,{top:this.y},()=>{ this.f.remove(); var sFireNum=rand(15,30); var r=rand(150,300); for(var i=0;i<sFireNum;i++){ var sF=new SmallFire({ cont:this.cont, x:this.x, y:this.y, r:r, i:i, sum:sFireNum }); sF.create(); } }); } } class SmallFire{ constructor(obj) { this.cont=obj.cont; this.x=obj.x; this.y=obj.y; this.r=obj.r; this.i=obj.i; this.sum=obj.sum; } create(){ this.f=document.createElement("div"); this.f.className="s_fire"; this.f.style.backgroundColor=randColor(); this.cont.appendChild(this.f); this.f.style.left=this.x+"px"; this.f.style.top=this.y+"px"; this.move(); } move(){ move(this.f,{ left:parseInt(Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.x, top:parseInt(Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.y, },()=>{ this.f.remove() }); } } var ocant=document.getElementById("container"); ocant.onclick=function(eve){ var e=eve||window.evevt; var x=e.pageX-this.offsetLeft; var y=e.pageY-this.offsetTop; var f=new Fire({ x:x, y:y }); f.create(); } function rand(min,max){ return Math.round(Math.random()*(max-min)+min); } function randColor(){ return`rgb(${rand(0,255)},${rand(0,255)},${rand(0,255)})`; } </script> </html>
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐