非常漂亮的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 相关文章推荐
jquery动态加载图片数据练习代码
Aug 04 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
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
MySQL授权问题总结
2007/05/06 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python字符串逐字符或逐词反转方法
2015/05/21 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python实现疫情地图可视化
2021/02/05 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
个人欠款担保书
2014/05/20 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP