非常漂亮的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菜单特效大全

javascript仿QQ特效汇总

JavaScript时钟特效汇总

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

相关文章

  • javascript 操作table的特性

    javascript 操作table的特性

    javascript操作table的特性,大家可以看下,发挥下,实现更多的功能。
    2009-09-09
  • 浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    下面小编就为大家带来一篇浅谈JavaScript中面向对象的的深拷贝和浅拷贝。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 学习javascript文件加载优化

    学习javascript文件加载优化

    这篇文章主要为大家详细介绍了javascript文件加载优化,三种方式实现js文件加载优化,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • js实现文字截断功能

    js实现文字截断功能

    这篇文章主要为大家详细介绍了js代码如何实现文字截断功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javascript实现网页端解压并查看zip文件

    javascript实现网页端解压并查看zip文件

    昨天给大家分享了在网页端使用zip.js插件实现在线压缩文件的代码,今天给大家分享一下javascript实现网页端解压并查看zip文件的方法,非常的实用,有需要的小伙伴可以参考下
    2015-12-12
  • 使用js解决由border属性引起的div宽度问题

    使用js解决由border属性引起的div宽度问题

    由于border属性引起的div宽度问题,确实很让人头疼,在本文将为大家介绍下使用JS是如何解决的,感兴趣的朋友不要错过
    2013-11-11
  • js获取多个tagname的节点数组

    js获取多个tagname的节点数组

    写了个获取多个tagname节点集合的小方法。类似于jQuery的$(‘iput,select,textarea’,'#form’)的效果,返回是按节点在原有文档流中的顺序返回的
    2013-09-09
  • 实现图片首尾平滑轮播(JS原生方法—节流)

    实现图片首尾平滑轮播(JS原生方法—节流)

    下面小编就为大家带来一篇实现图片首尾平滑轮播(JS原生方法—节流)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Javascript string 扩展库代码

    Javascript string 扩展库代码

    Javascript原生的String处理函数显得很不够丰富
    2010-04-04
  • 微信小程序中如何使用flyio封装网络请求

    微信小程序中如何使用flyio封装网络请求

    这篇文章主要介绍了微信小程序中如何使用flyio封装网络请求,Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一、标准的Promise API,需要的朋友可以参考下
    2019-07-07

最新评论