春节临近，要做活动促销专题页面，百度了下，找到一些烟花燃放的特效，整理并添加了修改烟花各种参数的注释，便于大家修改使用，版权归原作者所有。

1. 示例效果：

下载源码：点击这里

2. Html代码：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3.  <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5.      <head>
  6.  
  7.          <script type="text/javascript" src="firework.js"></script>
  8.  
  9.          <script type="text/javascript">
  10.  
  11.              function test() {
  12.  
  13.                  var fireworks=[];
  14.  
  15.                  var total=15;
  16.                  //控制烟花散开的频率
  17.                  window.setInterval(function () {
  18.  
  19.                      for (var i = 0; i < total; i++) {
  20.  
  21.                          if (!fireworks[i] || !fireworks[i].parentElement) {
  22.  
  23.                              var x = Utils.getIntervalRandom(50, document.body.offsetWidth - 50);
  24.  
  25.                              var shotHeight = Utils.getIntervalRandom(100, 450);//控制烟花散开的高度范围
  26.  
  27.                              var radius = Utils.getIntervalRandom(50, 200);//控制烟花散开的半径
  28.  
  29.                              var particleCount = Utils.getIntervalRandom(20, 100);//烟花散开的子点数
  30.  
  31.                              var speed = Utils.getIntervalRandom(10, 200);//烟花散开的速度
  32.  
  33.                              var color = "#" + Utils.getIntervalRandom(0, 16777215).toString(16).padLeft(6, "f");//控制烟花的颜色
  34.  
  35.                              var size = Utils.getIntervalRandom(1, 28); //自定义添加烟花大小
  36.  
  37.                              fireworks[i] = new Firework(x, shotHeight, radius, particleCount, color, speed, size);
  38.  
  39.                          }
  40.  
  41.                      }
  42.  
  43.                  }, 100);
  44.  
  45.                  //控制烟花燃放的频率
  46.                  window.setInterval(function(){
  47.  
  48.                      var currentIndex=Utils.getIntervalRandom(0,total);
  49.  
  50.                      if(fireworks[currentIndex] && fireworks[currentIndex].parentElement && !fireworks[currentIndex].isShoted){
  51.  
  52.                          fireworks[currentIndex].shot();
  53.  
  54.                      }
  55.                  },200);//控制烟花燃放速度，值越小，烟花越多
  56.  
  57.              }
  58.          </script>
  59.  
  60.      </head>
  61.  
  62.      <body bgColor="#000000" onload="test();">
  63.  
  64.          <div style="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:yellow;">Happy New Year</div>
  65.  
  66.          <div style="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:red;">祝大家新年快乐！</div>
  67.      </body>
  68.  
  69.  </html>

3. javascript代码：

  1.  var Utils={};
  2.  
  3.  Utils.$E=function(id){
  4.  
  5.      return document.getElementById(id);
  6.  };
  7.  
  8.  Utils.$C=function(tagName){
  9.  
  10.      return document.createElement(tagName);
  11.  };
  12.  
  13.  Utils.getIntervalRandom=function(min,max){
  14.  
  15.      return parseInt(Math.random()*(max-min)+min);
  16.  
  17.  };
  18.  
  19.  Utils.INTERVAL_SPEED=30;//烟花上升速度，值越大，上升越慢
  20.  
  21.  if(navigator.appName.toLowerCase().indexOf("netscape")!=-1)
  22.  {
  23.      Utils.INTERVAL_SPEED=Utils.INTERVAL_SPEED+(Utils.INTERVAL_SPEED/6);
  24.  }
  25.  
  26.  String.prototype.padLeft=function(sLen,padChar){
  27.      var result=this;
  28.      for(i=this.length;i<sLen;i++){
  29.          result=padChar+result;
  30.      }
  31.      return result;
  32.  };
  33.  
  34.  var Firework = function (x, shotHeight, radius, particleCount, color, speed, size) {
  35.  
  36.      this.shotHeight = shotHeight || 200;
  37.  
  38.      this.radius = radius || 100;
  39.  
  40.      this.particleCount = particleCount || 10;
  41.  
  42.      this.color = color || "#FFffff";
  43.  
  44.      this.parentElement = document.body;
  45.  
  46.      this.x = x;
  47.  
  48.      this.shottingSpeed = speed || 3;
  49.  
  50.      this.isShoted = false;
  51.  
  52.      this.isFlash = true;//是否有闪屏
  53.  
  54.      this.size = size;//自定义添加烟花大小尺寸
  55.  
  56.      this._particles = [];
  57.  
  58.      this._particleShape = unescape("•");//烟花显示的内容
  59.  
  60.      this._shottingShape = "|";
  61.  
  62.      this._depth = 3;
  63.  
  64.      this._shotting = Utils.$C("div");
  65.  
  66.      this._flashing = Utils.$C("div");
  67.  
  68.      this._disposeCount = 0;
  69.  
  70.      var _this = this;
  71.  
  72.      void function initialize() {
  73.  
  74.          for (var i = 0; i < _this.particleCount; i++) {
  75.  
  76.              _this._particles[i] = Utils.$C("div");
  77.  
  78.              _this._particles[i].style.position = "fixed";
  79.  
  80.              _this._particles[i].style.left = _this.x + "px";
  81.  
  82.              _this._particles[i].style.top = _this.shotHeight + "px";
  83.  
  84.              _this._particles[i].style.zIndex = 100;
  85.  
  86.              _this._particles[i].style.color = _this.color;
  87.  
  88.              _this._particles[i].style.display = "none";
  89.  
  90.              _this._particles[i].innerHTML = _this._particleShape;
  91.  
  92.              _this._particles[i].distance = Utils.getIntervalRandom(1, _this.radius - parseInt((i % _this._depth) * (_this.radius / _this._depth)));
  93.  
  94.              _this._particles[i].speed = Utils.getIntervalRandom(1, 4) * _this._particles[i].distance * 0.06;
  95.  
  96.              _this.parentElement.appendChild(_this._particles[i]);
  97.  
  98.              _this._setSize(_this._particles[i], _this.size);
  99.  
  100.          }
  101.  
  102.          _this._shotting.speed = _this.shottingSpeed;
  103.  
  104.          _this._shotting.innerHTML = _this._shottingShape;
  105.  
  106.          _this._shotting.style.position = "fixed";
  107.  
  108.          _this._shotting.style.fontWeight = "900";
  109.  
  110.          _this._shotting.style.left = _this.x + "px";
  111.  
  112.          //_this._shotting.style.top=_this.parentElement.offsetTop+_this.parentElement.offsetHeight-_this._shotting.offsetHeight+"px";
  113.  
  114.          _this._shotting.style.top = "700px";
  115.  
  116.          _this._shotting.style.zIndex = 100;
  117.  
  118.          _this._shotting.style.color = _this.color;
  119.  
  120.          _this._setSize(_this._shotting, 15);
  121.  
  122.          _this.parentElement.appendChild(_this._shotting);
  123.  
  124.          _this._flashing.style.width = "100%";
  125.  
  126.          _this._flashing.style.height = "100%";
  127.  
  128.          _this._flashing.style.left = "0";
  129.  
  130.          _this._flashing.style.top = "0";
  131.  
  132.          _this._flashing.style.backgroundColor = "#ffffee";
  133.  
  134.          _this._flashing.style.position = "fixed";
  135.  
  136.          _this._flashing.style.zIndex = 200;
  137.  
  138.          _this._flashing.style.display = "none";
  139.  
  140.          _this._flashing.style.MozOpacity = 0.5;
  141.  
  142.          _this._flashing.style.filter = "alpha(opacity=50)";
  143.  
  144.          _this.parentElement.appendChild(_this._flashing);
  145.  
  146.      } ();
  147.  
  148.  };
  149.  
  150.  Firework.prototype.shot=function(){
  151.  
  152.      var _this=this;
  153.  
  154.      _this.isShoted=true;
  155.  
  156.      var shotInterval=window.setInterval(function(){
  157.  
  158.          if(parseInt(_this._shotting.style.top)>_this.shotHeight){
  159.  
  160.              _this._shotting.style.top=parseInt(_this._shotting.style.top)-_this._shotting.speed+"px";
  161.  
  162.          }
  163.  
  164.          else{
  165.  
  166.              window.clearInterval(shotInterval);
  167.  
  168.              _this.parentElement.removeChild(_this._shotting);
  169.  
  170.              _this.bomb();
  171.  
  172.              _this._shotting=null;
  173.  
  174.          }    
  175.  
  176.      },Utils.INTERVAL_SPEED);
  177.  
  178.  };
  179.  
  180.  Firework.prototype.bomb=function(){
  181.  
  182.      var _this=this;
  183.  
  184.      if(_this.isFlash){
  185.  
  186.          _this._flashing.style.display="";
  187.  
  188.          var flashTimeout=window.setTimeout(function(){
  189.  
  190.              _this.parentElement.removeChild(_this._flashing);
  191.  
  192.              window.clearTimeout(flashTimeout);
  193.  
  194.          },10);//闪屏闪烁频率，值越小，闪烁越快
  195.  
  196.      }
  197.  
  198.      else{
  199.  
  200.          _this.parentElement.removeChild(_this._flashing);
  201.  
  202.      }
  203.  
  204.      for (var i = 0; i <_this._particles.length; i++) {
  205.  
  206.          _this._moveParticle(_this._particles[i], Utils.getIntervalRandom(0,360));
  207.  
  208.      }
  209.  
  210.  };
  211.  
  212.  Firework.prototype._setSize=function(obj,value){
  213.  
  214.      obj.style.fontSize=parseInt(value)+"px";
  215.  
  216.  };
  217.  
  218.  Firework.prototype._moveParticle=function(particle,angle){
  219.  
  220.      var _this=this;
  221.  
  222.      var initX=parseInt(particle.style.left);
  223.  
  224.      var initY=parseInt(particle.style.top);
  225.  
  226.      var currentDistance=0;
  227.  
  228.      var currentX=initX;
  229.  
  230.      var currentY=initY;
  231.  
  232.      particle.style.display="";
  233.  
  234.      particle.intervalId=window.setInterval(function(){
  235.  
  236.          if(currentDistance<particle.distance){
  237.  
  238.              var newX,newY;
  239.  
  240.              var xAngle=angle*(2*Math.PI/360);
  241.  
  242.              var xDirection=Math.abs(Math.cos(xAngle))/Math.cos(xAngle);
  243.  
  244.              var yDirection=Math.abs(Math.sin(xAngle))/Math.sin(xAngle);
  245.  
  246.              if(Math.abs(Math.tan(xAngle))<=1){
  247.  
  248.                  var deltaX=Math.abs(particle.speed*Math.cos(xAngle))*xDirection;
  249.  
  250.                  newX=currentX+deltaX;
  251.  
  252.                  newY=-(newX-initX)*Math.tan(xAngle)+initY;
  253.  
  254.                  currentDistance+=Math.abs(deltaX);
  255.  
  256.              }
  257.  
  258.              else{
  259.  
  260.                  var deltaY=Math.abs(particle.speed*Math.sin(xAngle))*yDirection;
  261.  
  262.                  newY=currentY-deltaY;
  263.  
  264.                  newX=-(newY-initY)/Math.tan(xAngle)+initX;
  265.  
  266.                  currentDistance+=Math.abs(deltaY);
  267.  
  268.              }
  269.  
  270.              currentX=newX;
  271.  
  272.              currentY=newY;
  273.  
  274.              particle.style.left=currentX+"px";
  275.  
  276.              particle.style.top=currentY+"px";
  277.  
  278.          }
  279.  
  280.          else{
  281.  
  282.              window.clearInterval(particle.intervalId);
  283.  
  284.              _this.parentElement.removeChild(particle);
  285.  
  286.              particle=null;
  287.  
  288.              if(++_this._disposeCount==_this.particleCount){
  289.  
  290.                  _this._particles.length=0;
  291.  
  292.                  _this.parentElement=null;
  293.  
  294.                  _this=null;
  295.  
  296.              }
  297.  
  298.          }
  299.  
  300.      },Utils.INTERVAL_SPEED);
  301.  
  302.  };

javascript特效——烟花燃放的效果[xyytit]的更多相关文章

  1. iOS 烟花撒花效果，图层渐变，图层倒影特效。CAEmitterLayer粒子发射器

    iOS 烟花撒花效果,图层渐变,图层倒影特效.CAEmitterLayer粒子发射器 上一节我写了一个关于视图图层的相关类,有关CALayer这个类的使用和一些使用方法,详细看这里,就是我们在处理视图 ...

  2. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  3. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

  4. Javascript特效代码大全(420个)（转）

    转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习  ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...

  5. 【JavaScript】在同一个网页中实现多个JavaScript特效

    在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...

  6. 10种JavaScript特效实例让你的网站更吸引人

    我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...

  7. JavaScript特效源码(1、文字特效)

    注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...

  8. HTML5夜空烟花绽放动画效果

    模板描述:HTML5夜空烟花绽放动画效果基于HTML5 canvas制作,模拟夜空烟花绽放动画效果,烟花会在夜空打出贺词,有新年快乐.合家幸福.万事如意.心想事成.财源广进等,文字可以自定义,做成各种 ...

  9. JavaScript特效（调试笔记）

    JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...

随机推荐

  1. 【转】扫盲 同步利器、分布式网盘--BT Sync

    原文地址:http://program-think.blogspot.com/2015/01/BitTorrent-Sync.html先向大伙儿宣布个好消息——经过多位热心读者的大力支持,经过几天的努 ...

  2. .net 模拟登录Post提交

    最近在做一个项目,要求集成到第三方系统中,由于先前没有做过类似的活,所以折腾了几天,蹭着有闲情的时候记录一下. 以下实例,都是我用Asp.net语言进行开发的,关于HTML元素的获取,使用的是Goog ...

  3. yii create url (一)

    1.$this->redirect这里的$this是当前的controller.可能是应用程序的也 可能是模块下的 这里仅将解一下第一个参能是url,当url是一个字符串时,它会自己动跳转 如$ ...

  4. Android之登录时密码的保护

    在很多的Android项目中都需要用户登录.注册.这样的话在开发中做好保护用户密码的工作就显得尤为重要.这里我把自己的密码保护方法记录下来. 这是我建了一个保存密码的文件,以便于检查自己保存密码或者上 ...

  5. Android - ADB 的使用

    一.什么是ADB? 1.ADB全称Android Debug Bridge, 是android sdk里的一个工具,用这个工具可以直接操作管理android模拟器或者真实的andriod设备 2.AD ...

  6. c语言模拟实现oc引用计数

    #include<stdio.h> #include<stdlib.h> //在c中引入 引用计数机制 // 要解决的问题:  1,指向某块动态内存的指针有几个? //    ...

  7. 认识Activity，创建第一个android应用-Hello Word

    2016-04-05 配置好Java.eclipse和Android环境就花费了一天时间.下载SDK真是费了不少时间.现在终于找到解决SDK更新的好方法了(更新自己电脑上的hosts文件,就可以使用G ...

  8. [转]三大WEB服务器对比分析（apache ,lighttpd,nginx）

    原博文地址:http://www.blogjava.net/daniel-tu/archive/2008/12/29/248883.html 一．软件介绍(apache  lighttpd  ngin ...

  9. 15、安全工程师要阅读的书籍 - IT软件人员书籍系列文章

    信息安全工程师是一个比较新兴的角色.在2016年今年的下半年软考就将安全工程师纳入了考试科目,说明国家对安全工程师的需求还是不错的.安全工程师包括硬件和软件两块内容吧.这里描述的安全工程师主要是针对软 ...

  10. header("location:test.php")跳转成功需要注意的

    header("location:test.php")跳转成功除了需要注意以下三点还有一个前提必须要注意: 1.location和":"号间不能有空格,否则会出 ...