Js放烟花效果 - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放烟花效果（面向对象版）</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,p{margin:0;padding:0;}
body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
a{text-decoration:none;outline:none;}
#tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2px solid #484848;}
#tips{top:0;border-width:0 0 2px;}
#tips a{font:14px/30px arial;color:#FFF;background:#F06;display:inline-block;margin:10px 5px 0;padding:0 15px;border-radius:15px;}
#tips a.active{background:#FE0000;}
#copyright{bottom:0;line-height:50px;border-width:2px 0 0;}
#copyright a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;}
#copyright a:hover{background:#F90;}
p{position:absolute;top:55px;width:100%;text-align:center;}
</style>
<script type="text/javascript">
var fgm = {
	on: function(element, type, handler) {
		return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
	},
	un: function(element, type, handler) {
		return element.removeEventListener ? element.removeEventListener(type, handler, false) : element.detachEvent("on" + type, handler)
	},
	bind: function(object, handler) {
		return function() {
			return handler.apply(object, arguments)	
		}	
	},
	randomRange: function(lower, upper) {
		return Math.floor(Math.random() * (upper - lower + 1) + lower)	
	},
	getRanColor: function() {
		var str = this.randomRange(0, 0xFFFFFF).toString(16);
		while(str.length < 6) str = "0" + str;
		return "#" + str	
	}
};
//初始化对象
function FireWorks() {
	this.type = 0;
	this.timer = null;
	this.fnManual = fgm.bind(this, this.manual)
}
FireWorks.prototype = {
	initialize: function() {
		clearTimeout(this.timer);
		fgm.un(document, "click", this.fnManual);
		switch(this.type) {
			case 1:
				fgm.on(document, "click", this.fnManual);
				break;
			case 2:
				this.auto();
				break;
		};
	},
	manual: function(event) {
		event = event || window.event;
		this.__create__({
			x: event.clientX,
			y: event.clientY		
		});
	},
	auto: function ()
	{
		var that = this;
		that.timer = setTimeout(function() {			
			that.__create__({
				x: fgm.randomRange(50, document.documentElement.clientWidth - 50),
				y: fgm.randomRange(50, document.documentElement.clientHeight - 150)
			})	
			that.auto();
		}, fgm.randomRange(900, 1100))
	},
	__create__: function (param)
	{
		var that = this;
		var oEntity = null;
		var oChip = null;
		var aChip = [];
		var timer = null;
		var oFrag = document.createDocumentFragment();
		
		oEntity = document.createElement("div");
		with(oEntity.style) {
			position = "absolute";
			top = document.documentElement.clientHeight + "px";
			left = param.x + "px";
			width = "4px";
			height = "30px";
			borderRadius = "4px";
			background = fgm.getRanColor();
		};
		document.body.appendChild(oEntity);
		oEntity.timer = setInterval(function() {
			oEntity.style.top = oEntity.offsetTop - 20 + "px";
			if(oEntity.offsetTop <= param.y) {
				clearInterval(oEntity.timer);
				document.body.removeChild(oEntity);
				(function() {
					//在50-100之间随机生成碎片
					//由于IE浏览器处理效率低, 随机范围缩小至20-30
					//自动放烟花时, 随机范围缩小至20-30
					var len = (/msie/i.test(navigator.userAgent) || that.type == 2) ? fgm.randomRange(20, 30) : fgm.randomRange(50, 100)					
					for (i = 0; i < len; i++) {
						oChip = document.createElement("div");
						with(oChip.style) {
							position = "absolute";
							top = param.y + "px";
							left = param.x + "px";
							width = "4px";
							height = "4px";
							overflow = "hidden";
							borderRadius = "4px";
							background = fgm.getRanColor();				
						};
						oChip.speedX = fgm.randomRange(-20, 20);
						oChip.speedY = fgm.randomRange(-20, 20);
						oFrag.appendChild(oChip);
						aChip[i] = oChip
					};
					document.body.appendChild(oFrag);
					timer = setInterval(function() {
						for(i = 0; i < aChip.length; i++) {
							var obj = aChip[i];
							with(obj.style) {
								top = obj.offsetTop + obj.speedY + "px";
								left = obj.offsetLeft + obj.speedX + "px";
							};
							obj.speedY++;
							(obj.offsetTop < 0 || obj.offsetLeft < 0 || obj.offsetTop > document.documentElement.clientHeight || obj.offsetLeft > document.documentElement.clientWidth) && (document.body.removeChild(obj), aChip.splice(i, 1))
						};
						!aChip[0] && clearInterval(timer);
					}, 30)
				})()
			}
		}, 30)
	}
};
fgm.on(window, "load", function() {
	var oTips = document.getElementById("tips");
	var aBtn = oTips.getElementsByTagName("a");
	var oFireWorks = new FireWorks();
	
	fgm.on(oTips, "click", function(event) {
		var oEvent = event || window.event;
		var oTarget = oEvent.target || oEvent.srcElement;
		var i = 0;
		if(oTarget.tagName.toUpperCase() == "A") {
			for(i = 0; i < aBtn.length; i++) aBtn[i].className = "";
			switch(oTarget.id) {
				case "manual":
					oFireWorks.type = 1;
					break;
				case "auto":
					oFireWorks.type = 2;
					break;
				case "stop":
					oFireWorks.type = 0;
					break;
			}
			oFireWorks.initialize();
			oTarget.className = "active";
			oEvent.stopPropagation ? oEvent.stopPropagation() : oEvent.cancelBubble = true
		}
	});
});
fgm.on(document, "contextmenu", function(event) {
	var oEvent = event || window.event;
	oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false
});
</script>
</head>
<body>
<div id="tips"><a id="manual" href="javascript:;">手动放烟花</a><a id="auto" href="javascript:;">自动放烟花</a><a id="stop" href="javascript:;">停止放烟花</a></div>
<p>由于浏览器渲染能力有限, 当浏览器为IE或选择自动放烟花时, 随机生成的烟花碎片范围自动调整至20-30</p>
<div id="copyright">建议使用Firefox, Chrome浏览器预览效果. 如蒙转载请注明出处 <a href="http://js.fgm.cc">Fgm.cc</a> , By — Ferris, QQ:21314130</div>
</body>
</html>

AخA
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放烟花效果（面向对象版）</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,p{margin:0;padding:0;}
body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
a{text-decoration:none;outline:none;}
#tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2px solid #484848;}
#tips{top:0;border-width:0 0 2px;}
#tips a{font:14px/30px arial;color:#FFF;background:#F06;display:inline-block;margin:10px 5px 0;padding:0 15px;border-radius:15px;}
#tips a.active{background:#FE0000;}
#copyright{bottom:0;line-height:50px;border-width:2px 0 0;}

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

Js放烟花效果

分类

网站常用

描述

JavaScript自动放烟花效果，可以手动放烟花、自动放烟花，由于浏览器渲染能力有限, 当浏览器为IE或选择自动放烟花时, 随机生成的烟花碎片范围自动调整至20-30，建议使用Firefox, Chrome浏览器预览效果。