非常漂亮的js烟花效果

这篇文章主要为大家详细介绍了js实现非常亮的烟花效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现漂亮烟花效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>烟花</title> <style type="text/css"> div>div{ width:10px; height:10px; border-radius: 50%; position: absolute; top:900px; left:600px; background-color: red; } </style> </head> <body> <div><div></div></div> </body> <script type="text/javascript"> var sta = 800; var staa = 8; var startid = setInterval(function (){ start.style.top = (sta-=staa)+"px"; staa -=0.06; if(staa<=0.5){ clearInterval(startid); start.style.display="none"; za(); } },10); var g = 0.01; var lv = 0; var times = 0; var opa =1; function za(){ addiv(); var s2 = setInterval(function(){ lv+=g; for(var i=0;i<200;i++){ var elem = document.getElementById("d"+i); elem.style.left = (arrl[i]+=(arrv[i]*Math.cos(arrr[i])))+"px"; elem.style.top = (arrt[i]+=(arrv[i]*Math.sin(arrr[i])+lv))+"px"; elem.style.opacity= (opa-=0.00001); if(arrv[i]>0) arrv[i]-=0.001; else arrv[i]=0; } if(times++>=1000) clearInterval(s2); },10); } var arrr = []; var arrl = []; var arrt = []; var arrv = []; var arro = [] function addiv(){ for(var i=0;i<200;i++){ box.innerHTML+="<div></div>" arrl[i]=600; arrt[i]=sta; arrv[i]=Math.random()*2+0.1; arrr[i]=Math.random()*Math.PI*2; } } </script> </html>

更多JavaScript精彩特效分享给大家:

Javascript菜单特效大全

javascript仿QQ特效汇总

JavaScript时钟特效汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/820c8f39fdd92efad2bcfe54d5dd77e5.html