This article mainly introduces the JS based on the object-oriented implementation of the fireworks effect, involving JavaScript object-oriented technology use skills, the need for friends can refer to the
This article illustrates the effect of JS based on object-oriented implementation of the fireworks. Share to everyone for your reference. The implementation methods are as follows:
?
| 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 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 5, 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 11 9 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-18 0 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 Fireworks effect (object-oriented) </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;o Utline: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;d isplay: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;p adding: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.add EventListener? 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:fu Nction () {var str = this.randomrange (0, 0xFFFFFF). ToString () while (Str.length < 6) str = "0" + str; return "#" + St R}}; Initialize Object function FireWorks () {this.type = 0; this.timer = null; this.fnmanual = Fgm.bind (this, this.manual)} FIREWORKS.P Rototype = {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 (); }, Manual:function (event) {event = Event | | window.event this.__create__ ({x:event.clientx, y:event.clienty}); To:function () {var that = this; That.timer = settimeout (function () {that.__create__ ({x:fgm.randomrange). DOCUMENTELEMENT.CLIENTWIDTH-50), Y:fgm.randomrange (document.documentelement.clientheight-150)}) That.auto (); }, Fgm.randomrange (900, 1100))}, __create__: function (param) {var that = this; var oentity = null; var ochip = null; VA R 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 '; WI DTH = "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 <=) {clearinterval (Oentity.timer); Document.body.removeChild (oentity); (function () {///between 50-100 randomly generated fragments//due to the low efficiency of IE browser processing, the random range reduced to 20-30//automatic fireworks release, the random range reduced to 20-30 var len = (/msie/i.test Navigator.useragent) | | That.type = 2)? Fgm.randomrange (m): Fgm.randomrange for (i = 0; i < len; i++) {ochip = document.createelement ("div"); w ITH (ochip.style) {position = ' absolute '; top = param.y + ' px '; left = param.x + ' px '; width = ' 4px '; height = ' 4px '; over Flow = "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]; and (obj.style) {top = Obj.of Fsettop + obj.speedy + "px"; left = Obj.offsetleft + obj.sPeedx + "px"; }; obj.speedy++; (Obj.offsettop < 0 | | Obj.offsetleft < 0 | | obj.offsettop > Document.documentElement.clientHeight | | obj.offsetle FT > 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.srcelem Ent 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": OFir Eworks.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.preve Ntdefault (): Oevent.returnvalue = false}); </script> </head> <body> <div id= "Tips" ><a id= "manual" javascript:; " > Manual Fireworks </a><a id= "Auto" href= "javascript:;" > Automatic Fireworks </a><a id= "Stop" href= "javascript:;" > Stop Fireworks </a></div> <p> due to limited browser rendering capabilities, when the browser for IE or choose to automatically release fireworks, randomly generated fireworks fragment range automatically adjusted to 20-30</p> <div id= "Copyright" > suggest using Firefox, Chrome browser preview effect. By-ferris, qq:21314130</div> </body> </html> |
I hope this article will help you with your JavaScript programming.
Note < > : More Wonderful tutorials please focus on Triple programming
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
