幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了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 id="box"><div id="start"></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 id='d"+i+"'></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时钟特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,烟花
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...