非常漂亮的js烟花效果


Posted in Javascript onMarch 10, 2020

本文实例为大家分享了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开发之三数组对象实例介绍
Nov 12 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
js实现延迟加载的方法
Jun 24 Javascript
理解javascript异步编程
Jan 27 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 #Javascript
微信小程序实现搜索功能
Mar 10 #Javascript
原生JS实现烟花效果
Mar 10 #Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 #Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 #Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 #Javascript
js模拟实现烟花特效
Mar 10 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
javascript简单实现命名空间效果
2014/03/06 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
js实现登录与注册界面
2017/11/01 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
python 自定义对象的打印方法
2019/01/12 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
五一手机促销方案
2014/03/08 职场文书
医药营销个人求职信
2014/04/12 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
师德师风自我评价范文
2014/09/11 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
浅谈Redis的事件驱动模型
2022/05/30 Redis