非常漂亮的js烟花效果
更新时间：2020年03月10日 15:33:24 作者：Maple－轩
这篇文章主要为大家详细介绍了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 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的同学比较陌生,下面这篇文章主要给大家介绍了关于js防抖具体实现以及详细原理步骤的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
本篇文章主要是对javascript实现数字验证码的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
本文为大家介绍下利用JavaScript实现在浏览器状态栏显示停留时间即在状态栏上显示访问者在本页停留的时间2013-12-12
这篇文章主要介绍了Javascript数据结构与算法之列表详解,本文讲解了列表的抽象数据类型定义、如何实现列表类等内容,需要的朋友可以参考下2015-03-03
下面小编就为大家带来一篇JavaScript-html标题滚动效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了JavaScript模块管理的简单实现方式,它方便组织你的代码，提高项目的可维护性。一个项目的可维护性高不高，也体现一个程序员的水平，在如今越来越复杂的前端项目，这一点尤为重要。,需要的朋友可以参考下2019-06-06
通过js脚本复制网页上的一个表格的不错实现方法...2006-12-12
这篇文章主要介绍了JavaScript设计模式之策略模式实例,本文分析了Jquery源码并给出了自己的实现,需要的朋友可以参考下2014-10-10
在项目中遇到一个问题需要实现批量打印功能,研究了测试了一番解决了,把相关的功能记录下,这篇文章主要介绍了前端利用PrintJs实现批量打印文件功能的相关资料,需要的朋友可以参考下2025-02-02
我想在页面里把想要的关键词加亮凸出(用颜色区分出来)显示,这样让客户一眼能看到重的东西,然后在加亮的关键词上可以加上超连接.请问高手们怎么实现宋的功能.就像搜索引擎的那种..搜索关键词的时候就显示红色的.2008-06-06
最新评论