這篇文章主要介紹了JS基於面向對象實現的放煙花效果,涉及javascript面向對象技術的使用技巧,需要的朋友可以參考下
本文實例講述了JS基於面向對象實現的放煙花效果。分享給大家供大家參考。具體實現方法如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 <!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程序設計有所幫助。
注< >：更多精彩教程請關注編程