本文展示了一个使用JavaScript实现的贺岁礼花效果，通过创建动态的文字粒子模拟烟花绽放的过程。该程序能在网页上生成随鼠标移动而变化的绚丽文字烟花。
<script type="text/javascript"> function btnClick() { var txt_source = document.getElementById("txt_source"); var txt_dest = document.getElementById("txt_dest"); var a_dest = document.getElementById("a_dest"); var url = location.toString(); url = url.split(//?/g)[0]; txt_dest.value = url + "?text=" + escape(txt_source.value); a_dest.href = txt_dest.value; a_dest.innerHTML = txt_dest.value; } </script> 请输入文字：
链接：
测试 <html> <head><title>贺岁礼花●五环--2009清洁工版</title></head> <body style="overflow:hidden;background-color:Black;"> <!--作者：王集鹄 日期：2009年1月3日 转贴请注明出处：http://hi.youkuaiyun.com/zswang--> <a href="http://blog.youkuaiyun.com/zswang/archive/2009/01/04/3706791.aspx" style="right:10px;bottom:10px;position:absolute;font-size:12px;color:Green;">我也做一个！</a> </body> <script type="text/javascript"> var charIndex = 0; function hsl2color(hsl) { if (hsl.h > 360 || hsl.h < 0 || hsl.s > 100 || hsl.s < 0 || hsl.l > 100 || hsl.l < 0) return "#000000"; var rgb = {r: 0, g: 0, b: 0}; if (hsl.h <= 60) { rgb.r = 255; rgb.g = Math.floor(255 / 60 * hsl.h); } else if (hsl.h <= 120) { rgb.r = Math.floor(255 - (255 / 60) * (hsl.h - 60)); rgb.g = 255; } else if (hsl.h <= 180) { rgb.g = 255; rgb.b = Math.floor((255 / 60) * (hsl.h - 120)); } else if (hsl.h <= 240) { rgb.g = Math.floor(255 - (255 / 60) * (hsl.h - 180)); rgb.b = 255; } else if (hsl.h <= 300) { rgb.r = Math.floor((255 / 60) * (hsl.h - 240)); rgb.b = 255; } else if (hsl.h <= 360) { rgb.r = 255; rgb.b = Math.floor(255 - (255 / 60) * (hsl.h - 300)); } var sat = Math.abs((hsl.s - 100) / 100); rgb.r = Math.floor(rgb.r - (rgb.r - 128) * sat); rgb.g = Math.floor(rgb.g - (rgb.g - 128) * sat); rgb.b = Math.floor(rgb.b - (rgb.b - 128) * sat); var lum = (hsl.l - 50) / 50; if (lum > 0) { rgb.r = Math.floor(rgb.r + (255 - rgb.r) * lum); rgb.g = Math.floor(rgb.g + (255 - rgb.g) * lum); rgb.b = Math.floor(rgb.b + (255 - rgb.b) * lum); } else if (lum < 0) { rgb.r = Math.floor(rgb.r + rgb.r * lum); rgb.g = Math.floor(rgb.g + rgb.g * lum); rgb.b = Math.floor(rgb.b + rgb.b * lum); } return "#" + ("00000" + (rgb.r * 256 * 256 + rgb.g * 256 + rgb.b).toString(16)).replace(/^.*(.{6}$)/g, "$1"); } function Ball(parent, text) { this.parent = parent; this.text = text; this.visible = true; this.span = document.createElement("span"); this.span.innerHTML = this.text; this.span.style.position = "absolute"; } Ball.prototype.update = function(color, x, y, size, alpha, speed, fire) { this.fire = fire; this.alpha = alpha; this.speed = speed; this.gravity = 0; this.x = x; this.y = y; this.color = color; this.hsl = {h: color, s: 100, l: 80}; this.size = size; this.doChange(); } Ball.prototype.doChange = function() { with (this.span.style) { fontSize = this.size + "px"; left = this.x + "px"; top = this.y + "px"; color = hsl2color(this.hsl); } if (!this.span.parent) this.parent.insertBefore(this.span, this.parent.firstChild); } Ball.prototype.move = function() { this.x = Math.cos(this.alpha) * this.speed + this.x; this.y = Math.sin(this.alpha) * this.speed + this.y; this.y = this.gravity + this.y; this.gravity += 0.05; this.hsl.l -= this.fire; this.doChange(); } Ball.prototype.hide = function() { if (!this.visible) return; this.visible = false; this.span.style.display = "none"; } Ball.prototype.show = function() { if (this.visible) return; this.visible = true; this.span.style.display = "block"; } function Firework(parent, text, size, count, speed) { this.parent = parent; this.speed = speed; this.size = size; this.total = 0; this.active = false; this.balls = new Array(count); for (var i = 0; i < this.balls.length; i++) { this.balls[i] = new Ball(parent, text); this.balls[i].firework = this; this.balls[i].index = i; this.balls[i].hide(); } } Firework.prototype.tick = function() { if (!this.active) return; if (typeof this.ontick == "function") this.ontick(this); for (var i = 0; i < this.balls.length; i++) { if (!this.balls[i].visible) continue; if (typeof this.onballmove == "function") this.onballmove(this.balls[i]); else this.balls[i].move(); } var self = this; this.timer = setTimeout(function() { self.tick(); }, 5); } Firework.prototype.replay = function() { this.active = true; this.tick(); if (typeof this.onreplay == "function") this.onreplay(this); } function createFirework() { var match = (//?text/=(.+)$/g).exec(location); if (match) chars = unescape(match[1]); else return; document.title = chars; var firework = new Firework(document.body, "●", 12, 105, 0); firework.ontick = function () { if (this.total % 80 == 0) { var h = document.body.clientHeight || document.documentElement.clientHeight; var w = document.body.clientWidth || document.documentElement.clientWidth; for (var i = 0; i < 5; i++) { var color; var speed = 9.3; var alpha = Math.PI * 1.5; switch (i) { case 0: color = 240; speed = 12.7; alpha -= 0.43; break; // 蓝色 case 1: color = 30; alpha -= 0.27; break; // 黄色 case 2: speed = 11.5; break; // 黑色 case 3: color = 120; alpha += 0.27; break; // 绿色 case 4: color = 0; speed = 12.7; alpha += 0.43; break; // 红色 } this.balls[i].update(color, w / 2, h, 32, alpha, speed, 0.5); this.balls[i].span.innerHTML = chars.charAt(charIndex); this.balls[i].hsl.l = 50; if (i == 2) { this.balls[i].hsl.h = 0; this.balls[i].hsl.s = 0; } this.balls[i].show(); } charIndex = (charIndex + 1) % chars.length; } if (this.total % 80 == 45) { var count = 5; for (var i = 0; i < 5; i++) { this.balls[i].hide(); for (var j = 0; j < 20; j++) { this.balls[count].update(this.balls[i].color, this.balls[i].x, this.balls[i].y, 24, j / 20 * 2 * Math.PI, 7, 3.9); if (i == 2) { this.balls[count].hsl.h = 0; this.balls[count].hsl.s = 0; } this.balls[count].span.innerHTML = this.balls[i].span.innerHTML; this.balls[count].show(); count++; } } } this.total++; } firework.total = 0; firework.replay(); } createFirework(); </script> </html><script type="text/javascript"> function createFirework() { var match = (//?text/=(.+)$/g).exec(location); if (match) chars = unescape(match[1]); else { btnClick(); return; } document.write(document.getElementById('textareaHtml').value); document.close(); } window.onload = function () { createFirework(); }; </script>
链接：
测试 <html> <head><title>贺岁礼花●五环--2009清洁工版</title></head> <body style="overflow:hidden;background-color:Black;"> <!--作者：王集鹄 日期：2009年1月3日 转贴请注明出处：http://hi.youkuaiyun.com/zswang--> <a href="http://blog.youkuaiyun.com/zswang/archive/2009/01/04/3706791.aspx" style="right:10px;bottom:10px;position:absolute;font-size:12px;color:Green;">我也做一个！</a> </body> <script type="text/javascript"> var charIndex = 0; function hsl2color(hsl) { if (hsl.h > 360 || hsl.h < 0 || hsl.s > 100 || hsl.s < 0 || hsl.l > 100 || hsl.l < 0) return "#000000"; var rgb = {r: 0, g: 0, b: 0}; if (hsl.h <= 60) { rgb.r = 255; rgb.g = Math.floor(255 / 60 * hsl.h); } else if (hsl.h <= 120) { rgb.r = Math.floor(255 - (255 / 60) * (hsl.h - 60)); rgb.g = 255; } else if (hsl.h <= 180) { rgb.g = 255; rgb.b = Math.floor((255 / 60) * (hsl.h - 120)); } else if (hsl.h <= 240) { rgb.g = Math.floor(255 - (255 / 60) * (hsl.h - 180)); rgb.b = 255; } else if (hsl.h <= 300) { rgb.r = Math.floor((255 / 60) * (hsl.h - 240)); rgb.b = 255; } else if (hsl.h <= 360) { rgb.r = 255; rgb.b = Math.floor(255 - (255 / 60) * (hsl.h - 300)); } var sat = Math.abs((hsl.s - 100) / 100); rgb.r = Math.floor(rgb.r - (rgb.r - 128) * sat); rgb.g = Math.floor(rgb.g - (rgb.g - 128) * sat); rgb.b = Math.floor(rgb.b - (rgb.b - 128) * sat); var lum = (hsl.l - 50) / 50; if (lum > 0) { rgb.r = Math.floor(rgb.r + (255 - rgb.r) * lum); rgb.g = Math.floor(rgb.g + (255 - rgb.g) * lum); rgb.b = Math.floor(rgb.b + (255 - rgb.b) * lum); } else if (lum < 0) { rgb.r = Math.floor(rgb.r + rgb.r * lum); rgb.g = Math.floor(rgb.g + rgb.g * lum); rgb.b = Math.floor(rgb.b + rgb.b * lum); } return "#" + ("00000" + (rgb.r * 256 * 256 + rgb.g * 256 + rgb.b).toString(16)).replace(/^.*(.{6}$)/g, "$1"); } function Ball(parent, text) { this.parent = parent; this.text = text; this.visible = true; this.span = document.createElement("span"); this.span.innerHTML = this.text; this.span.style.position = "absolute"; } Ball.prototype.update = function(color, x, y, size, alpha, speed, fire) { this.fire = fire; this.alpha = alpha; this.speed = speed; this.gravity = 0; this.x = x; this.y = y; this.color = color; this.hsl = {h: color, s: 100, l: 80}; this.size = size; this.doChange(); } Ball.prototype.doChange = function() { with (this.span.style) { fontSize = this.size + "px"; left = this.x + "px"; top = this.y + "px"; color = hsl2color(this.hsl); } if (!this.span.parent) this.parent.insertBefore(this.span, this.parent.firstChild); } Ball.prototype.move = function() { this.x = Math.cos(this.alpha) * this.speed + this.x; this.y = Math.sin(this.alpha) * this.speed + this.y; this.y = this.gravity + this.y; this.gravity += 0.05; this.hsl.l -= this.fire; this.doChange(); } Ball.prototype.hide = function() { if (!this.visible) return; this.visible = false; this.span.style.display = "none"; } Ball.prototype.show = function() { if (this.visible) return; this.visible = true; this.span.style.display = "block"; } function Firework(parent, text, size, count, speed) { this.parent = parent; this.speed = speed; this.size = size; this.total = 0; this.active = false; this.balls = new Array(count); for (var i = 0; i < this.balls.length; i++) { this.balls[i] = new Ball(parent, text); this.balls[i].firework = this; this.balls[i].index = i; this.balls[i].hide(); } } Firework.prototype.tick = function() { if (!this.active) return; if (typeof this.ontick == "function") this.ontick(this); for (var i = 0; i < this.balls.length; i++) { if (!this.balls[i].visible) continue; if (typeof this.onballmove == "function") this.onballmove(this.balls[i]); else this.balls[i].move(); } var self = this; this.timer = setTimeout(function() { self.tick(); }, 5); } Firework.prototype.replay = function() { this.active = true; this.tick(); if (typeof this.onreplay == "function") this.onreplay(this); } function createFirework() { var match = (//?text/=(.+)$/g).exec(location); if (match) chars = unescape(match[1]); else return; document.title = chars; var firework = new Firework(document.body, "●", 12, 105, 0); firework.ontick = function () { if (this.total % 80 == 0) { var h = document.body.clientHeight || document.documentElement.clientHeight; var w = document.body.clientWidth || document.documentElement.clientWidth; for (var i = 0; i < 5; i++) { var color; var speed = 9.3; var alpha = Math.PI * 1.5; switch (i) { case 0: color = 240; speed = 12.7; alpha -= 0.43; break; // 蓝色 case 1: color = 30; alpha -= 0.27; break; // 黄色 case 2: speed = 11.5; break; // 黑色 case 3: color = 120; alpha += 0.27; break; // 绿色 case 4: color = 0; speed = 12.7; alpha += 0.43; break; // 红色 } this.balls[i].update(color, w / 2, h, 32, alpha, speed, 0.5); this.balls[i].span.innerHTML = chars.charAt(charIndex); this.balls[i].hsl.l = 50; if (i == 2) { this.balls[i].hsl.h = 0; this.balls[i].hsl.s = 0; } this.balls[i].show(); } charIndex = (charIndex + 1) % chars.length; } if (this.total % 80 == 45) { var count = 5; for (var i = 0; i < 5; i++) { this.balls[i].hide(); for (var j = 0; j < 20; j++) { this.balls[count].update(this.balls[i].color, this.balls[i].x, this.balls[i].y, 24, j / 20 * 2 * Math.PI, 7, 3.9); if (i == 2) { this.balls[count].hsl.h = 0; this.balls[count].hsl.s = 0; } this.balls[count].span.innerHTML = this.balls[i].span.innerHTML; this.balls[count].show(); count++; } } } this.total++; } firework.total = 0; firework.replay(); } createFirework(); </script> </html><script type="text/javascript"> function createFirework() { var match = (//?text/=(.+)$/g).exec(location); if (match) chars = unescape(match[1]); else { btnClick(); return; } document.write(document.getElementById('textareaHtml').value); document.close(); } window.onload = function () { createFirework(); }; </script>
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
