核心产品
帮助中心
时间：2021-05-26
本文实例讲述了JS基于面向对象实现的放烟花效果。分享给大家供大家参考。具体实现方法如下：
<!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>js放烟花效果（面向对象版）</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浏览器预览效果. By — Ferris, QQ:21314130</div></body></html>希望本文所述对大家的javascript程序设计有所帮助。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
先编写一个烟花绽放的动画效果。放烟花时，一个烟花可分为两个阶段：（1）烟花上升到空中；（2）烟花炸开成碎片，炸开的碎片慢慢消散。为此抽象出两个对象类：Firew
本文实例讲述了js基于面向对象实现网页TAB选项卡菜单效果代码。分享给大家供大家参考。具体如下：这是一款自动的网页TAB，基于面向对象的选项卡菜单，由于时间关系
本文实例为大家分享了JS面向对象之多选框实现代码，供大家参考，具体内容如下描述：JS面向对象——多选框的实现效果：实现：Utile.js(function(){
本文实例为大家分享了JS面向对象之单选框实现代码，供大家参考，具体内容如下描述：JS面向对象——单选框的实现效果：实现：Utile.js(function(){
本文实例讲述了JS实现超炫网页烟花动画效果的方法。分享给大家供大家参考。具体分析如下：非常炫的使用JS实现的一个网页烟花燃放动画效果，能适应JS做出这样的动画来
