访问这里直接观赏 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>X Fireworks</title> <mce:style><!-- body { background-color: #000; } --></mce:style><style mce_bogus="1"> body { background-color: #000; } </style> <mce:script type="text/javascript"><!-- /*A zhangyx production. Enjoy it!*/ var H = document.documentElement.clientHeight; var W = document.documentElement.clientWidth; var G = 3; var OFFSET_BOTTOM = 50; var T_STEP = window.ActiveXObject ? 0.5 : 0.3; var MAIN_BLAZE_SIZE = 15; var MAIN_BLAZE_LASTS = Math.floor(Math.sqrt(2 * (H - OFFSET_BOTTOM) / G)); var BLAZE_SIZE = 15; var BLAZE_COUNT = 20; var BLAZE_ANGLE = 2 * Math.PI / BLAZE_COUNT; var BLAZE_LASTS = 12; var BLAZE_MAX_SPEED = 20; var TRACK_SIZE = 15; var TRACK_INTERVAL = 2; var TRACK_LASTS = 4; var FW_STYLE = [["*", "."], ["^", "."], ["*", "*"], [".", "."], ["o", "."], ["O", "o"]]; var TOTAL_FIREWORKS = 2; function Fireworks() { this.engine = new PhysicalEngine(); this.status = Fireworks.INIT; this.blazes = []; this.tracks = []; this.intervalCounter = 0; } Fireworks.INIT = 0 Fireworks.RISING = 1; Fireworks.PRE_BLAZE = 2; Fireworks.BLAZE = 3; Fireworks.DEAD = 4; var textDiv; var shineBlaze; Fireworks.prototype = { step: function() { switch (this.status) { case Fireworks.INIT: this.blazes.push(this.engine.getMainBlaze()); this.status = Fireworks.RISING; break; case Fireworks.RISING: this._commonManagement(); if (this.blazes[0].lasts <= 0) { this.status = Fireworks.PRE_BLAZE; } break; case Fireworks.PRE_BLAZE: this.engine.getBlazes(this.blazes); document.body.removeChild(this.blazes[0]); this.blazes.shift(); this.status = Fireworks.BLAZE; shineBlaze = this; break; case Fireworks.BLAZE: this._commonManagement(); if (this.blazes[0].color.r <= 0) { this.status = Fireworks.DEAD; } break; case Fireworks.DEAD: if (shineBlaze == this) shineBlaze = null; var remove = function(con) { while (con.length != 0) { document.body.removeChild(con[0]); con.shift(); } }; remove(this.blazes); remove(this.tracks); break; } }, _commonManagement: function() { this.intervalCounter++; this.intervalCounter %= TRACK_INTERVAL; var length = this.blazes.length; for (var i = 0; i < length; i++) { var blaze = this.blazes[i]; this.engine.transBlaze(this.blazes[i]); if (this.intervalCounter == 0) { this.tracks.push(this.engine.getTrack(blaze)); } } var length = this.tracks.length; for (var i = 0; i < length; i++) { var track = this.tracks[i]; this.engine.transTrack(track); if (track.lasts <= 0) { this.tracks.shift(); length--; i--; document.body.removeChild(track); } } } }; function PhysicalEngine() { var style = FW_STYLE[Math.round((FW_STYLE.length - 1) * Math.random())]; this.blazeChar = style[0]; this.trackChar = style[1]; } PhysicalEngine.prototype = { getMainBlaze: function() { var blaze = document.createElement("div"); blaze.style.position = "absolute"; blaze.style.zIndex = 100; blaze.lasts = MAIN_BLAZE_LASTS * (1 + Math.random()) / 2; blaze.color = { r: 255 * Math.random(), g: 255 * Math.random(), b: 255 * Math.random() }; blaze.path = { x: Math.round(W * Math.random()), y: H - OFFSET_BOTTOM }; blaze.speed = { x: 0, y: - G * blaze.lasts }; blaze.size = MAIN_BLAZE_SIZE; blaze.color.rd = blaze.color.r / blaze.lasts * T_STEP; blaze.color.gd = blaze.color.g / blaze.lasts * T_STEP; blaze.color.bd = blaze.color.b / blaze.lasts * T_STEP; blaze.speed.xd = - 0; blaze.speed.yd = G * T_STEP; blaze.innerHTML = this.blazeChar; this._setCSS(blaze); document.body.appendChild(blaze); return blaze; }, getBlazes: function(blazes) { var mainBlaze = blazes[0]; var speed = (1 + Math.random()) / 2 * BLAZE_MAX_SPEED; var speedType = Math.round(Math.random()); var accType = Math.round(Math.random()); for (var i = 0; i < BLAZE_COUNT; i++) { var blaze = document.createElement("div"); blaze.style.position = "absolute"; blaze.style.zIndex = 100; blaze.lasts = BLAZE_LASTS; blaze.color = { r: 255 * Math.random(), g: 255 * Math.random(), b: 255 * Math.random() }; blaze.path = { x: mainBlaze.path.x, y: mainBlaze.path.y }; if (speedType) { blaze.speed = { x: speed * Math.cos(BLAZE_ANGLE * i), y: speed * Math.sin(BLAZE_ANGLE * i) } } else { blaze.speed = { x: (1 + Math.random()) / 2 * BLAZE_MAX_SPEED * Math.cos(BLAZE_ANGLE * i), y: (1 + Math.random()) / 2 * BLAZE_MAX_SPEED * Math.sin(BLAZE_ANGLE * i) } } blaze.size = BLAZE_SIZE; blaze.color.rd = blaze.color.r / BLAZE_LASTS * T_STEP blaze.color.gd = blaze.color.g / BLAZE_LASTS * T_STEP blaze.color.bd = blaze.color.b / BLAZE_LASTS * T_STEP if (accType) { blaze.speed.xd = blaze.speed.x / BLAZE_LASTS * T_STEP; blaze.speed.yd = (blaze.speed.y / BLAZE_LASTS + G) * T_STEP; } else { blaze.speed.xd = 0; blaze.speed.yd = 0; } blaze.innerHTML = this.blazeChar; this._setCSS(blaze); document.body.appendChild(blaze); blazes.push(blaze); } }, getTrack: function(blaze) { var track = document.createElement("div"); track.style.position = "absolute"; track.style.zIndex = 50; track.lasts = TRACK_LASTS track.color = { r: blaze.color.r, g: blaze.color.g, b: blaze.color.b } track.path = { x: blaze.path.x, y: blaze.path.y }; track.size = TRACK_SIZE; track.color.rd = track.color.r / track.lasts * T_STEP; track.color.gd = track.color.g / track.lasts * T_STEP; track.color.bd = track.color.b / track.lasts * T_STEP; track.innerHTML = this.trackChar; this._setCSS(track); document.body.appendChild(track); return track; }, transBlaze: function(blaze) { blaze.color.r -= blaze.color.rd; blaze.color.g -= blaze.color.gd; blaze.color.b -= blaze.color.bd; blaze.path.x += blaze.speed.x * T_STEP; blaze.path.y += blaze.speed.y * T_STEP; blaze.speed.x += blaze.speed.xd; blaze.speed.y += blaze.speed.yd; blaze.lasts -= T_STEP; this._setCSS(blaze); }, transTrack: function(track) { track.color.r -= track.color.rd; track.color.g -= track.color.gd; track.color.b -= track.color.bd; track.lasts -= T_STEP; }, _setCSS: function(obj) { var style = obj.style; style.left = Math.floor(obj.path.x) + "px"; style.top = Math.floor(obj.path.y) + "px"; style.fontSize = obj.size + "px"; style.color = "rgb(" + Math.floor(obj.color.r) + "," + Math.floor(obj.color.g) + "," + Math.floor(obj.color.b) + ")"; } }; function setOut() { var container = []; textDiv = document.getElementById("text"); textDiv.style.left = (W - textDiv.clientWidth) / 2 + "px"; textDiv.style.top = (H - textDiv.clientHeight) / 2 + "px"; for (var i = 0; i < TOTAL_FIREWORKS; i++) { container.push(new Fireworks()); } window.setInterval(function() { for (var i = 0; i < TOTAL_FIREWORKS; i++) { container[i].step(); if (container[i].status == Fireworks.DEAD) { container[i].step(); container[i].status = Fireworks.INIT; } } if (shineBlaze) textDiv.style.color = shineBlaze.blazes[0].style.color; }, 10); } // --></mce:script> </head> <body οnlοad="setOut();"> <div id="text" style="position: absolute; font-size: 50px; text-align: center;" mce_style="position: absolute; font-size: 50px; text-align: center;"> Happy 2009! </div> </body> </html>