JavaScript煙花特效

2024-09-05 12:21:46

字體：大中小

來源：轉載

供稿：網友

JavaScript煙花特效，過年了，放到你的網頁上祝賀大家牛年大吉吧，是不是很不錯？

<!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=gb2312" /><title>禮花特效</title><style type="text/css">    html,body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;}    .ball{color:#FF0000; position:absolute; font-size:16px;}    .star{color:#FF0000; position:absolute; font-size:4px;}</style><script type="text/javascript">function Fireworks(sky, loop){    this.sky = sky;    this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth;    this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight;    this.x = this.y = 0;    this.step = 20;    this.delay = 30;    this.stars = [];    this.r = 10;    this.step2 = 7;    this.radius = 90;    this.angle = 45;    this.num = 16;    this.loop = loop;    this.degree = 2;    this.t = 0;    this.delt = 0;    this.max = 30;    this.cur = 1;    this.points = null;}Fireworks.prototype = {    init : function(){        this.x = parseInt(this.skyWidth/1.3 * Math.random()) + this.skyWidth / 8;        this.y = this.skyHeight;        this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5;    },    setOpacity : function(obj, p){        if(p > 85){            var opacity = 100 - (p - 85) * 4;            if(document.all){                obj.style.filter = "alpha(opacity=" + opacity + ")";                }else{                obj.style.MozOpacity = opacity / 100;            }        }    },    getNextPoint : function(degree, coeff, t){        var tt = 1.0 - t;        for(var rr = 1; rr <= degree; rr++){            for(var i=0; i <= degree-rr; i++){                coeff[i] = tt * coeff[i] + t * coeff[i+1];            }        }        return coeff[0];    },    showBall : function(){        this.ball = document.createElement("div");        this.ball.innerHTML = "●";        this.ball.className = "ball";        this.ball.style.left = this.x + "px";        this.ball.style.top = this.y + "px";        this.sky.appendChild(this.ball);    },    moveBall : function(){        var self = this;        if(this.y > this._y){            var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10);            this.y -= (this.step - p * 1.6);            this.ball.style.fontSize = 16 - p + "px";            this.ball.style.top = this.y + "px";            setTimeout(function(){self.moveBall();}, this.delay);        }else{            this.fire();        }    },    hideBall : function(){        this.sky.removeChild(this.ball);        this.ball = null;    },    showStars : function(){        var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00','#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00'];        var n = cs = parseInt(Math.random() * colors.length / 2);        var cc = parseInt(Math.random() * colors.length  / 2);        var colorMode = parseInt(Math.random() * 2);        var star = Math.round(Math.random()) == 1 ? "★" : "☆";        this.r = 10;        this.radius = Math.round(Math.random() * 30) + 60;        this.num = Math.round(Math.random() * 5 + 5) * 2;        this.angle = 180 / this.num * 2;                for(var i=1; i<=this.num; i++){            this.stars[i] = document.createElement("div");            this.stars[i].innerHTML = star;            this.stars[i].className = "star";            if(colorMode == 1){                this.stars[i].style.color = colors[n];                if(++n > cs + cc)                    n = cs;            }else{                this.stars[i].style.color = colors[parseInt(Math.random() * colors.length)];            }            this.sky.appendChild(this.stars[i]);        }    },    moveStars : function(){        var self = this;        if(this.r < this.radius){            var p = this.step2 - parseInt(this.r / this.radius * 5);            p = p < 1 ? 1 : p;            this.r += p;            p = parseInt(this.r / this.radius * 100);            for(var i=1; i<=this.num; i++){                this.stars[i].style.left = this.x - Math.round(this.r * Math.sin(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";                this.stars[i].style.top = this.y - Math.round(this.r * Math.cos(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";                this.stars[i].style.fontSize = 4 + p/10 + "px";                this.setOpacity(this.stars[i], p);            }            setTimeout(function(){self.moveStars();}, this.delay);        }else{            setTimeout(function(){self.hideStars();}, 200 * Math.random());        }    },    initBezier : function(){        var coeff_x = [];         var coeff_y = [];                this.points = [];        this.t = 0;        this.delt = 1.0 / this.max;        this.cur = 1;        var a = parseInt(Math.random() * 5) * 90;        coeff_x[0] = this.x;        coeff_y[0] = this.y;        for(var i=1; i<=this.num; i++){            coeff_x[1] = this.x + Math.sin(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;            coeff_y[1] = this.y + Math.cos(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;            coeff_x[2] = this.x + Math.sin(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;            coeff_y[2] = this.y + Math.cos(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;            this.points[(i-1)*2] = coeff_x.slice(0);            this.points[(i-1)*2+1] = coeff_y.slice(0);        }    },    moveStars2 : function(){        var self = this;        if(this.cur < this.max){            this.t += this.delt;            this.cur++;            p = parseInt(this.cur / this.max * 100);            for(var i=1; i<=this.num; i++){                this.stars[i].style.left = this.getNextPoint(this.degree, this.points[(i-1)*2], this.t) + "px";                this.stars[i].style.top = this.getNextPoint(this.degree, this.points[(i-1)*2+1], this.t) + "px";                this.stars[i].style.fontSize = 4 + p/10 + "px";                this.setOpacity(this.stars[i], p);            }            setTimeout(function(){self.moveStars2();}, this.delay);        }else{            setTimeout(function(){self.hideStars();}, 200 * Math.random());        }    },    hideStars : function(){        for(var i=1; i<=this.num; i++){            this.sky.removeChild(this.stars[i]);            this.stars[i] = null;            if(this.points != null){                delete this.points[(i-1)*2];                delete this.points[(i-1)*2+1];            }        }        if(this.points){            delete this.points;        }        this.points = null;        if(this.loop){            this.play();        }    },    fire : function(){        this.hideBall();        this.showStars();                var effect = parseInt(Math.random() * 2) + 1;        switch(effect){            case 1:                this.moveStars();                break;            case 2:                this.initBezier();                this.moveStars2();                break;        }    },    play : function(){        this.init();        this.showBall();        this.moveBall();    }};window.onload = function(){    for(var i=0; i<5; i++)        new Fireworks(document.body, true).play();};</script></head><body></body></html>

上一篇：很炫的網頁背景調色器

下一篇：網頁背景調色器，調整RGB三基色值