2. 技术人生
    3. 庆元旦，放烟花(纯javascript版烟花效果)

    庆元旦，放烟花(纯javascript版烟花效果)

    技术2022-05-20  48

    转载自：随机博客http://www.cnblogs.com/random/archive/2009/01/01/1366394.html

    2008年过去了，新的2009年到来了，2008太不平凡，发生了太多事，包括我自己，不管怎么样，困难过去就是一个新的阶段，继续+U。

           在这里写了一个JS的烟花特效，以此来庆祝新的一年，祝大家元旦快乐！

           实现原理：每个烟花颗粒是一个div对象，让每一个烟花颗粒对象以一个坐标点，按随机角度由内向外移动，每组烟花的颗粒数不同，发射的速度也不同，颜色也不同，都是随机产生的。当多个烟花颗粒同时移动的时候，就产生了类似烟花爆炸的效果，ok，现在看看效果和相关代码：

     

       

     

    firework.js代码 ：

    var Utils={};

    Utils.$E=function(id){

        return document.getElementById(id);

    };

    Utils.$C=function(tagName){

        return document.createElement(tagName);

    };

    Utils.getIntervalRandom=function(min,max){

        return parseInt(Math.random()*(max-min)+min);

    };

    Utils.INTERVAL_SPEED=30;

    if(navigator.appName.toLowerCase().indexOf("netscape")!=-1)

    {

        Utils.INTERVAL_SPEED=Utils.INTERVAL_SPEED+(Utils.INTERVAL_SPEED/6);

    }

    String.prototype.padLeft=function(sLen,padChar){

        var result=this;

        for(i=this.length;i<sLen;i++){

            result=padChar+result;

        }

        return result;

    };

    var Firework=function(x,shotHeight,radius,particleCount,color,speed){

        this.shotHeight=shotHeight || 200;

        this.radius=radius || 100;

        this.particleCount=particleCount || 10;

        this.color=color || "#FF0000";

        this.parentElement=document.body;

        this.x=x;

        this.shottingSpeed=speed || 3;

        this.isShoted=false;

        this.isFlash=true;

        

        this._particles=[];

        this._particleShape=unescape("%u25CF");

        this._shottingShape="|";

        this._depth=3;

        this._shotting=Utils.$C("div");

        this._flashing=Utils.$C("div");

        this._disposeCount=0;

        

        var _this=this;

        

        void function initialize(){

            for(var i=0;i<_this.particleCount;i++){

                _this._particles[i]=Utils.$C("div");

                _this._particles[i].style.position="absolute";

                _this._particles[i].style.left=_this.x+"px";

                _this._particles[i].style.top=_this.shotHeight+"px";

                _this._particles[i].style.zIndex=100;

                _this._particles[i].style.color=_this.color;

                _this._particles[i].style.display="none";

                _this._particles[i].innerHTML=_this._particleShape;

                _this._particles[i].distance=Utils.getIntervalRandom(1,_this.radius-parseInt((i%_this._depth)*(_this.radius/_this._depth)));

                _this._particles[i].speed=Utils.getIntervalRandom(1,4)*_this._particles[i].distance*0.06;

                _this.parentElement.appendChild(_this._particles[i]);

                _this._setSize(_this._particles[i],5);

            }

            

            _this._shotting.speed=_this.shottingSpeed;

            _this._shotting.innerHTML=_this._shottingShape;

            _this._shotting.style.position="absolute";

            _this._shotting.style.fontWeight="900";

            _this._shotting.style.left=_this.x+"px";

            //_this._shotting.style.top=_this.parentElement.offsetTop+_this.parentElement.offsetHeight-_this._shotting.offsetHeight+"px";

            _this._shotting.style.top="700px";

            _this._shotting.style.zIndex=100;

            _this._shotting.style.color=_this.color;

            _this._setSize(_this._shotting,15);

            _this.parentElement.appendChild(_this._shotting);

            

            _this._flashing.style.width="100%";

            _this._flashing.style.height="100%";

            _this._flashing.style.left="0";

            _this._flashing.style.top="0";

            _this._flashing.style.backgroundColor="#ffffee";

            _this._flashing.style.position="absolute";

            _this._flashing.style.zIndex=200;

            _this._flashing.style.display="none";

            _this._flashing.style.MozOpacity=0.5;

            _this._flashing.style.filter="alpha(opacity=50)";

            _this.parentElement.appendChild(_this._flashing);

            

        }();

    };

    Firework.prototype.shot=function(){

        var _this=this;

        _this.isShoted=true;

        var shotInterval=window.setInterval(function(){

            if(parseInt(_this._shotting.style.top)>_this.shotHeight){

                _this._shotting.style.top=parseInt(_this._shotting.style.top)-_this._shotting.speed+"px";

            }

            else{

                window.clearInterval(shotInterval);

                _this.parentElement.removeChild(_this._shotting);

                _this.bomb();

                _this._shotting=null;

            }    

        },Utils.INTERVAL_SPEED);

    };

    Firework.prototype.bomb=function(){

        var _this=this;

        if(_this.isFlash){

            _this._flashing.style.display="";

            var flashTimeout=window.setTimeout(function(){

                _this.parentElement.removeChild(_this._flashing);

                window.clearTimeout(flashTimeout);

            },10);

        }

        else{

            _this.parentElement.removeChild(_this._flashing);

        }

        

        for (var i = 0; i <_this._particles.length; i++) {

            _this._moveParticle(_this._particles[i], Utils.getIntervalRandom(0,360));

        }

    };

    Firework.prototype._setSize=function(obj,value){

        obj.style.fontSize=parseInt(value)+"px";

    };

    Firework.prototype._moveParticle=function(particle,angle){

        var _this=this;

        var initX=parseInt(particle.style.left);

        var initY=parseInt(particle.style.top);

        var currentDistance=0;

        var currentX=initX;

        var currentY=initY;

        particle.style.display="";

        

        particle.intervalId=window.setInterval(function(){

            if(currentDistance<particle.distance){

                var newX,newY;

                var xAngle=angle*(2*Math.PI/360);

                var xDirection=Math.abs(Math.cos(xAngle))/Math.cos(xAngle);

                var yDirection=Math.abs(Math.sin(xAngle))/Math.sin(xAngle);

        

                if(Math.abs(Math.tan(xAngle))<=1){

                    var deltaX=Math.abs(particle.speed*Math.cos(xAngle))*xDirection;

                    newX=currentX+deltaX;

                    newY=-(newX-initX)*Math.tan(xAngle)+initY;

                    currentDistance+=Math.abs(deltaX);

                }

                else{

                    var deltaY=Math.abs(particle.speed*Math.sin(xAngle))*yDirection;

                    newY=currentY-deltaY;

                    newX=-(newY-initY)/Math.tan(xAngle)+initX;

                    currentDistance+=Math.abs(deltaY);

                }

                currentX=newX;

                currentY=newY;

                particle.style.left=currentX+"px";

                particle.style.top=currentY+"px";

            }

            else{

                window.clearInterval(particle.intervalId);

                _this.parentElement.removeChild(particle);

                particle=null;

                if(++_this._disposeCount==_this.particleCount){

                    _this._particles.length=0;

                    _this.parentElement=null;

                    _this=null;

                }

            }

        },Utils.INTERVAL_SPEED);

    };

     

    HTML页面代码：

     

    <!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>

    < ><>

            <script type="text/javascript">

                function test(){

                    var fireworks=[];

                    var total=15;

                    window.setInterval(function(){

                        for (var i = 0; i < total; i++) {

                            if (!fireworks[i] || !fireworks[i].parentElement) {

                                var x=Utils.getIntervalRandom(50,document.body.offsetWidth-50);

                                var shotHeight=Utils.getIntervalRandom(100,450);

                                var radius=Utils.getIntervalRandom(50,200);

                                var particleCount=Utils.getIntervalRandom(40,80);

                                var speed=Utils.getIntervalRandom(10,20);

                                var color="#"+Utils.getIntervalRandom(0,16777215).toString(16).padLeft(6,"f");

                                fireworks[i] = new Firework(x, shotHeight, radius, particleCount, color, speed);

                            }

                        }

                    },100);

                    

                    window.setInterval(function(){

                        var currentIndex=Utils.getIntervalRandom(0,total);

                        if(fireworks[currentIndex] && fireworks[currentIndex].parentElement && !fireworks[currentIndex].isShoted){

                            fireworks[currentIndex].shot();

                        }

                    },500);

                }

            </script>

        </head>

        <body bgColor="#000000" οnlοad="test();">

            <div style="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:yellow;">Happy New Year</div>

            <div style="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:red;">2009</div>

            <a href="http://random.cnblogs.com" target="newWindow"><div style="width:100%;font-size:12px;text-align:center;color:#fff">Copyright by Random 2009 All Rights Reserved</div></a>

        </body>

    </html>

    专利

    最新回复(0)