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() ...
随机推荐
- Oracle EXP-00091的解决方法
[sql] EXP-00091: 正在导出有问题的统计信息.www.2cto.com . . 正在导出表 WF_GENERAL导出了 EXP-00091: 正 ...
- Android EditText输入最大值提示功能
public class LengthFilter implements InputFilter { public LengthFilter(int max) { mMax = max; } @Ove ...
- iOS自定义字体
1.下载字体库,如:DINCond-Bold.otf 2.双击,在mac上安装 3.把下载的字体库拖入工程中: 4.配置info.plist文件 5.xib方式设置自定义字体:Font选Custom, ...
- Android 采用Layout Inflater创建一个View对象
接着上文<Android ListViewview入门>,本文使用android的Inflater来实现 在layouyt文件夹中新建一个list_item.xml的文件,添加如下代码: ...
- Mac系统如何编辑hosts文件
Mac系统如何编辑hosts文件 Hosts 是一个没有扩展名的系统文件,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登录的网址时,系 统会首先 ...
- XCode6无论如何都无法升级为XCode8为什么呀？
因为开发微信支付需要IOS9.0版本,但是本来的XCode是6.0版本,所以最高的是8.3版本,所以要进行升级更新,但是打开更新中心发现没有更新提示,所以到AppStore里面进行下载,因为本机已经安 ...
- iOS--（UITableViewCell）、（UITableViewController）微信个人主页
本文主要实现了微信的个人主页的设置: 目录文件如下: 实现代码如下: RootTableViewController.h #import <UIKit/UIKit.h> @interfac ...
- 在FlashDevelop里使用1.8版本的的TortoiseSVN
前几天更新TortoiseSVN到1.8版本后发现FD(FlashDevelop)里不能使用svn了,在项目面板里的所有文件及文件夹都不能正确显示svn状态了,清一色都显示为未添加版本控制的状态图标, ...
- ADO.Net（四）——扩展属性和配置文件应用
一.扩展属性 处理:有外键关系时将代号化信息处理成原始文字,让用户可看懂的(粗略解释) 利用扩展属性 如:Info表中的民族列显示的是民族代号处理成Nation表中的民族名称 需要在Info类里面扩展 ...
- ES6新增值比较函数Object.is
在这之前我们比较值使用两等号 “==” 或 三等号“===”, 三等号更加严格,只要比较两方类型不同立即返回false. 另外,有且只有一个值不和自己相等,它是NaN 现在ES6又加了一个Object ...