自定义文字五环烟花，清洁工版

最新推荐文章于 2024-09-24 11:09:25 发布

王集鹄

最新推荐文章于 2024-09-24 11:09:25 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/zswang/article/details/3706791

版权

<html>
<head><title>贺岁礼花●五环--2009清洁工版</title></head>
<body style="overflow:hidden;background-color:Black;">

<a href="http://blog.csdn.net/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>