js雪花特效_跟随页面滚动的下雪特效

这星期宁波有些地方已经开始下雪了，气温一下子降了很多，又快过年了。冬天最喜欢的就是下雪了，我想没有几个人不喜欢的，所以就从网络上到处收集有关雪花的特效，今天就来分享第一个JS雪花特效。这是个从淘宝网上拿下来的下雪特效，雪花从页面的顶部一直往下飘落，当你向下滚动页面时雪花又从当前页面的顶部开始下，而不是一直是从页面顶部落下来的。

js雪花特效代码

 (function(){
        function k(a,b,c){
            if(a.addEventListener)
                a.addEventListener(b,c,false);
            else {
                a.attachEvent&&a.attachEvent("on"+b,c)
            }
        }
        function g(a){
            if(typeof window.onload!="function"){
                window.onload=a;
            }else{
                var b=window.onload;
                window.onload=function(){
                    b();
                    a()
                }
            }
        }
        function h(){
            var a={};
            for(type in{Top:"",Left:""}){
                var b=type=="Top"?"Y":"X";
                if(typeof window["page"+b+"Offset"]!="undefined")
                    a[type.toLowerCase()]=window["page"+b+"Offset"];
                else{
                    b=document.documentElement.clientHeight?document.documentElement:document.body;
                    a[type.toLowerCase()]=b["scroll"+type]
                }
            }
            return a
        }
        function l(){
            var a=document.body,b;
            if(window.innerHeight)
                b=window.innerHeight;
            else if(a.parentElement.clientHeight)
                b=a.parentElement.clientHeight;
            else if(a&&a.clientHeight)
                b=a.clientHeight;
            return b
        }
        function i(a){
            this.parent=document.body;
            this.createEl(this.parent,a);
            this.size=Math.random()*5+3;
            this.el.style.width=Math.round(this.size)+"px";
            this.el.style.height=Math.round(this.size)+"px";
            this.maxLeft=document.body.offsetWidth-this.size;
            this.maxTop=document.body.offsetHeight- this.size;
            this.left=Math.random()*this.maxLeft;
            this.top=h().top+1;
            this.angle=1.4+0.2*Math.random();
            this.minAngle=1.4;
            this.maxAngle=1.6;
            this.angleDelta=0.01*Math.random();
            this.speed=2+Math.random()
        }
        var j=false;
        g(function(){
            j=true
        });
        var f=true;
        window.createSnow=function(a,b){
            if(j){
                var c=[],m=setInterval(function(){
                    f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));
                    !f&&!c.length&&clearInterval(m);
                    for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)
                        if(c[d])
                        if(c[d].top<e||c[d].top+c[d].size+1>e+n){
                            c[d].remove();
                            c[d]=null;
                            c.splice(d,1)
                        }else{
                            c[d].move();
                            c[d].draw()
                        }
                },40);
                k(window,"scroll",function(){
                    for(var e=c.length-1;e>=0;e--)
                        c[e].draw()
                })
            }else 
                g(function(){
                    createSnow(a,b)
                })
        };
        window.removeSnow=function(){
            f=false
        };
        i.prototype={
            createEl:function(a,b){
                        
                        this.el=document.createElement("img");
                        this.el.setAttribute("src","now.gif");
                        //this.el.setAttribute("class","fixpng");
                        this.el.style.position="absolute";
                        this.el.style.display="block";
                        this.el.style.zIndex="99";
                        //document.getElementById('snow').appendChild(this.el);
                        this.parent.appendChild(this.el)
                     },
            move:function(){
                     if(this.angle< this.minAngle||this.angle>this.maxAngle)
                         this.angleDelta=-this.angleDelta;
                    this.angle+=this.angleDelta;
                    this.left+=this.speed*Math.cos(this.angle*Math.PI);
                    this.top-=this.speed*Math.sin(this.angle*Math.PI);
                    if(this.left<0)
                        this.left=this.maxLeft;
                    else if(this.left>this.maxLeft)
                        this.left=0
                 },
            draw:function(){
                     this.el.style.top=Math.round(this.top)+"px";
                    this.el.style.left=Math.round(this.left)+"px"
                 },
            remove:function(){
                //document.getElementById('snow').removeChild(this.el);
                //document.getElementById('snow').this.el=null;
                this.parent.removeChild(this.el);
                this.parent=this.el=null
            }
        }
    })();
    /**
     * This function takes 2 arguments
     * First is the path to the directory with snowflake images
     * Second is the maximum number of snowflakes, please do not
     * set this number above 60 as it will impact the performance
     */
    createSnow('', 60);

直接复制上面的js代码就可以查看到效果，如果想了下载更多雪花特效可以访问 jsctrlc特效网 :http://www.jsctrlc.com/tags/雪花/