javascript特效——烟花燃放的效果[xyytit]

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

1. 示例效果：

2. Html代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <script type="text/javascript" src="firework.js"></script>

         <script type="text/javascript">

             function test() {

                 var fireworks=[];

                 var total=15;

                 //控制烟花散开的频率

                 window.setInterval(function () {

                     for (var i = 0; i < total; i++) {

                         if (!fireworks[i] || !fireworks[i].parentElement) {

                             var x = Utils.getIntervalRandom(50, document.body.offsetWidth - 50);

                             var shotHeight = Utils.getIntervalRandom(100, 450);//控制烟花散开的高度范围

                             var radius = Utils.getIntervalRandom(50, 200);//控制烟花散开的半径

                             var particleCount = Utils.getIntervalRandom(20, 100);//烟花散开的子点数

                             var speed = Utils.getIntervalRandom(10, 200);//烟花散开的速度

                             var color = "#" + Utils.getIntervalRandom(0, 16777215).toString(16).padLeft(6, "f");//控制烟花的颜色

                             var size = Utils.getIntervalRandom(1, 28); //自定义添加烟花大小

                             fireworks[i] = new Firework(x, shotHeight, radius, particleCount, color, speed, size);

                         }

                     }

                 }, 100);

                 //控制烟花燃放的频率

                 window.setInterval(function(){

                     var currentIndex=Utils.getIntervalRandom(0,total);

                     if(fireworks[currentIndex] && fireworks[currentIndex].parentElement && !fireworks[currentIndex].isShoted){

                         fireworks[currentIndex].shot();

                     }

                 },200);//控制烟花燃放速度，值越小，烟花越多

             }

         </script>

     </head>

     <body bgColor="#000000" onload="test();">

         <div style="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:yellow;">Happy New Year</div>

         <div style="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:red;">祝大家新年快乐！</div>

     </body>

 </html>

3. javascript代码：

 var Utils={};

 Utils.$E=function(id){

     return document.getElementById(id);

 };

 Utils.$C=function(tagName){

     return document.createElement(tagName);

 };

 Utils.getIntervalRandom=function(min,max){

     return parseInt(Math.random()*(max-min)+min);

 };

 Utils.INTERVAL_SPEED=30;//烟花上升速度，值越大，上升越慢

 if(navigator.appName.toLowerCase().indexOf("netscape")!=-1)

 {

     Utils.INTERVAL_SPEED=Utils.INTERVAL_SPEED+(Utils.INTERVAL_SPEED/6);

 }

 String.prototype.padLeft=function(sLen,padChar){

     var result=this;

     for(i=this.length;i<sLen;i++){

         result=padChar+result;

     }

     return result;

 };

 var Firework = function (x, shotHeight, radius, particleCount, color, speed, size) {

     this.shotHeight = shotHeight || 200;

     this.radius = radius || 100;

     this.particleCount = particleCount || 10;

     this.color = color || "#FFffff";

     this.parentElement = document.body;

     this.x = x;

     this.shottingSpeed = speed || 3;

     this.isShoted = false;

     this.isFlash = true;//是否有闪屏

     this.size = size;//自定义添加烟花大小尺寸

     this._particles = [];

     this._particleShape = unescape("•");//烟花显示的内容

     this._shottingShape = "|";

     this._depth = 3;

     this._shotting = Utils.$C("div");

     this._flashing = Utils.$C("div");

     this._disposeCount = 0;

     var _this = this;

     void function initialize() {

         for (var i = 0; i < _this.particleCount; i++) {

             _this._particles[i] = Utils.$C("div");

             _this._particles[i].style.position = "fixed";

             _this._particles[i].style.left = _this.x + "px";

             _this._particles[i].style.top = _this.shotHeight + "px";

             _this._particles[i].style.zIndex = 100;

             _this._particles[i].style.color = _this.color;

             _this._particles[i].style.display = "none";

             _this._particles[i].innerHTML = _this._particleShape;

             _this._particles[i].distance = Utils.getIntervalRandom(1, _this.radius - parseInt((i % _this._depth) * (_this.radius / _this._depth)));

             _this._particles[i].speed = Utils.getIntervalRandom(1, 4) * _this._particles[i].distance * 0.06;

             _this.parentElement.appendChild(_this._particles[i]);

             _this._setSize(_this._particles[i], _this.size);

         }

         _this._shotting.speed = _this.shottingSpeed;

         _this._shotting.innerHTML = _this._shottingShape;

         _this._shotting.style.position = "fixed";

         _this._shotting.style.fontWeight = "900";

         _this._shotting.style.left = _this.x + "px";

         //_this._shotting.style.top=_this.parentElement.offsetTop+_this.parentElement.offsetHeight-_this._shotting.offsetHeight+"px";

         _this._shotting.style.top = "700px";

         _this._shotting.style.zIndex = 100;

         _this._shotting.style.color = _this.color;

         _this._setSize(_this._shotting, 15);

         _this.parentElement.appendChild(_this._shotting);

         _this._flashing.style.width = "100%";

         _this._flashing.style.height = "100%";

         _this._flashing.style.left = "0";

         _this._flashing.style.top = "0";

         _this._flashing.style.backgroundColor = "#ffffee";

         _this._flashing.style.position = "fixed";

         _this._flashing.style.zIndex = 200;

         _this._flashing.style.display = "none";

         _this._flashing.style.MozOpacity = 0.5;

         _this._flashing.style.filter = "alpha(opacity=50)";

         _this.parentElement.appendChild(_this._flashing);

     } ();

 };

 Firework.prototype.shot=function(){

     var _this=this;

     _this.isShoted=true;

     var shotInterval=window.setInterval(function(){

         if(parseInt(_this._shotting.style.top)>_this.shotHeight){

             _this._shotting.style.top=parseInt(_this._shotting.style.top)-_this._shotting.speed+"px";

         }

         else{

             window.clearInterval(shotInterval);

             _this.parentElement.removeChild(_this._shotting);

             _this.bomb();

             _this._shotting=null;

         }    

     },Utils.INTERVAL_SPEED);

 };

 Firework.prototype.bomb=function(){

     var _this=this;

     if(_this.isFlash){

         _this._flashing.style.display="";

         var flashTimeout=window.setTimeout(function(){

             _this.parentElement.removeChild(_this._flashing);

             window.clearTimeout(flashTimeout);

         },10);//闪屏闪烁频率，值越小，闪烁越快

     }

     else{

         _this.parentElement.removeChild(_this._flashing);

     }

     for (var i = 0; i <_this._particles.length; i++) {

         _this._moveParticle(_this._particles[i], Utils.getIntervalRandom(0,360));

     }

 };

 Firework.prototype._setSize=function(obj,value){

     obj.style.fontSize=parseInt(value)+"px";

 };

 Firework.prototype._moveParticle=function(particle,angle){

     var _this=this;

     var initX=parseInt(particle.style.left);

     var initY=parseInt(particle.style.top);

     var currentDistance=0;

     var currentX=initX;

     var currentY=initY;

     particle.style.display="";

     particle.intervalId=window.setInterval(function(){

         if(currentDistance<particle.distance){

             var newX,newY;

             var xAngle=angle*(2*Math.PI/360);

             var xDirection=Math.abs(Math.cos(xAngle))/Math.cos(xAngle);

             var yDirection=Math.abs(Math.sin(xAngle))/Math.sin(xAngle);

             if(Math.abs(Math.tan(xAngle))<=1){

                 var deltaX=Math.abs(particle.speed*Math.cos(xAngle))*xDirection;

                 newX=currentX+deltaX;

                 newY=-(newX-initX)*Math.tan(xAngle)+initY;

                 currentDistance+=Math.abs(deltaX);

             }

             else{

                 var deltaY=Math.abs(particle.speed*Math.sin(xAngle))*yDirection;

                 newY=currentY-deltaY;

                 newX=-(newY-initY)/Math.tan(xAngle)+initX;

                 currentDistance+=Math.abs(deltaY);

             }

             currentX=newX;

             currentY=newY;

             particle.style.left=currentX+"px";

             particle.style.top=currentY+"px";

         }

         else{

             window.clearInterval(particle.intervalId);

             _this.parentElement.removeChild(particle);

             particle=null;

             if(++_this._disposeCount==_this.particleCount){

                 _this._particles.length=0;

                 _this.parentElement=null;

                 _this=null;

             }

         }

     },Utils.INTERVAL_SPEED);

 };

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

iOS 烟花撒花效果，图层渐变，图层倒影特效。CAEmitterLayer粒子发射器
iOS 烟花撒花效果,图层渐变,图层倒影特效.CAEmitterLayer粒子发射器上一节我写了一个关于视图图层的相关类,有关CALayer这个类的使用和一些使用方法,详细看这里,就是我们在处理视图 ...
原生JavaScript 全特效微博发布面板效果实现
javaScript实现微博发布面板效果.---转载白超华采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...
Canvas与javaScript特效笔记
第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...
Javascript特效代码大全(420个)（转）
转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习 ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...
【JavaScript】在同一个网页中实现多个JavaScript特效
在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...
10种JavaScript特效实例让你的网站更吸引人
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...
JavaScript特效源码(1、文字特效)
注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...
HTML5夜空烟花绽放动画效果
模板描述:HTML5夜空烟花绽放动画效果基于HTML5 canvas制作,模拟夜空烟花绽放动画效果,烟花会在夜空打出贺词,有新年快乐.合家幸福.万事如意.心想事成.财源广进等,文字可以自定义,做成各种 ...
JavaScript特效（调试笔记）
JavaScript特效一.在网页上显示当前的时间日期,例如:“2016年3月26日星期六”. js源代码: function getTime() { var today = new Date() ...

随机推荐

EC笔记，第二部分：6&period;若不想使用编译器默认生成的函数，就该明确拒绝
6.若不想使用编译器默认生成的函数,就该明确拒绝 1.有的时候不希望对象被复制和赋值,那么就把复制构造函数与赋值运算符放在private:中,但是这两个函数是否需要实现呢?假设实现了,那么你的类成员方 ...
作为一个web开发人员，哪些技术细节是在发布站点前你需要考虑到的
前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的”每个程序员必知之WEB开发”. 原文: http://programme ...
什么是 block
什么是 block 1.提前准备好的一段可以执行的代码 2.block 可以当做参数传递 3.在需要的时候执行 block 4,block 中使用 self 时肯产生循环引用 block 做网络异步耗 ...
github桌面软件使用教程
github桌面软件使用教程首先要先安装桌面版官网,或者百度搜github windows下载即可可以再github网站上直接点击,把代码添加的桌面软件中也可以再左上角添加项目,比如actu ...
解决：Determining IP Information for eth0 一直停留无法进入系统
问题场景: vm centos6.4网卡之前一直没异常,可今天启动时一直卡在Determining IP Information for eth0,无法进入系统.网上说了非常多办法,大多都是不着边的说 ...
微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
关闭mac的SIP + 一定有用的删除mac自带ABC的方法
如果你被这ABC输入法弄得很是不开心.那就看看吧!!!亲测一定有效. mac 关闭系统完整性保护 SIP(System Integrity Protection) 重启系统按住 command+R ...
手动用tomcat启动war包，无法访问web项目
先说一下自己采的小坑,网上大多解答都是复制来复制去,不说重点在哪.我这里简单总结下访问路径问题一.用idea打成war包,具体步骤如下图: 步骤:在项目配置选Artifacts新建Web Appli ...
yii主题
修改应用的配置文件(protected/config/main.php)中加入 return array( ’theme’=>’basic’, ); 所有的视图文件必须位于views下 ,布局视 ...
Django 自定义分页
1.路由 urls.py url(r'^index2.html/', views.index2), 2.views.py def index2(request): # 数据总条数当前页每页显示条数 ...