jquery/zepto 圣诞节雪花飞扬

下载地址：

http://www.html5tricks.com/jquery-html5-christ-snow.html

演示地址:

http://www.html5tricks.com/jquery-html5-christ-snow.html

 

个人的demo：

新建并且引用以下js文件：

(function($){
    $.snowfall = function(element, options){
        var    defaults = {
                flakeCount : 35,
                flakeColor : '#ffffff',
                flakeIndex: 999999,
                minSize : 1,
                maxSize : 2,
                minSpeed : 1,
                maxSpeed : 5,
                round : false,
                shadow : false,
                collection : false,
                collectionHeight : 40,
                deviceorientation : false
            },
            options = $.extend(defaults, options),
            random = function random(min, max){
                return Math.round(min + Math.random()*(max-min)); 
            };
            
            $(element).data("snowfall", this);            
            
            // Snow flake object
            function Flake(_x, _y, _size, _speed, _id)
            {
                // Flake properties
                this.id = _id; 
                this.x  = _x;
                this.y  = _y;
                this.size = _size;
                this.speed = _speed;
                this.step = 0;
                this.stepSize = random(1,10) / 100;
    
                if(options.collection){
                    this.target = canvasCollection[random(0,canvasCollection.length-1)];
                }
                
                var flakeMarkup = $(document.createElement("div")).attr({'class': 'snowfall-flakes', 'id' : 'flake-' + this.id}).css({'width' : this.size, 'height' : this.size, 'background' : options.flakeColor, 'position' : 'absolute', 'top' : this.y, 'left' : this.x, 'fontSize' : 0, 'zIndex' : options.flakeIndex});
                
                if($(element).get(0).tagName === $(document).get(0).tagName){
                    $('body').append(flakeMarkup);
                    element = $('body');
                }else{
                    $(element).append(flakeMarkup);
                }
                
                this.element = document.getElementById('flake-' + this.id);
                
                // Update function, used to update the snow flakes, and checks current snowflake against bounds
                this.update = function(){
                    this.y += this.speed;
                    
                    if(this.y > (elHeight) - (this.size  + 6)){
                        this.reset();
                    }
                    
                    this.element.style.top = this.y + 'px';
                    this.element.style.left = this.x + 'px';
                    
                    this.step += this.stepSize;

                    if (doRatio === false) {
                        this.x += Math.cos(this.step);
                    } else {
                        this.x += (doRatio + Math.cos(this.step));
                    }

                    // Pileup check
                    if(options.collection){
                        if(this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y){
                            var ctx = this.target.element.getContext("2d"),
                                curX = this.x - this.target.x,
                                curY = this.y - this.target.y,
                                colData = this.target.colData;
                                
                                if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] !== undefined || curY+this.speed+this.size > this.target.height){
                                    if(curY+this.speed+this.size > this.target.height){
                                        while(curY+this.speed+this.size > this.target.height && this.speed > 0){
                                            this.speed *= .5;
                                        }

                                        ctx.fillStyle = "#fff";
                                        
                                        if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] == undefined){
                                            colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] = 1;
                                            ctx.fillRect(curX, (curY)+this.speed+this.size, this.size, this.size);
                                        }else{
                                            colData[parseInt(curX)][parseInt(curY+this.speed)] = 1;
                                            ctx.fillRect(curX, curY+this.speed, this.size, this.size);
                                        }
                                        this.reset();
                                    }else{
                                        // flow to the sides
                                        this.speed = 1;
                                        this.stepSize = 0;
                                    
                                        if(parseInt(curX)+1 < this.target.width && colData[parseInt(curX)+1][parseInt(curY)+1] == undefined ){
                                            // go left
                                            this.x++;
                                        }else if(parseInt(curX)-1 > 0 && colData[parseInt(curX)-1][parseInt(curY)+1] == undefined ){
                                            // go right
                                            this.x--;
                                        }else{
                                            //stop
                                            ctx.fillStyle = "#fff";
                                            ctx.fillRect(curX, curY, this.size, this.size);
                                            colData[parseInt(curX)][parseInt(curY)] = 1;
                                            this.reset();
                                        }
                                    }
                                }
                        }
                    }
                    
                    if(this.x > (elWidth) - widthOffset || this.x < widthOffset){
                        this.reset();
                    }
                }
                
                // Resets the snowflake once it reaches one of the bounds set
                this.reset = function(){
                    this.y = 0;
                    this.x = random(widthOffset, elWidth - widthOffset);
                    this.stepSize = random(1,10) / 100;
                    this.size = random((options.minSize * 100), (options.maxSize * 100)) / 100;
                    this.speed = random(options.minSpeed, options.maxSpeed);
                }
            }
        
            // Private vars
            var flakes = [],
                flakeId = 0,
                i = 0,
                elHeight = $(element).height(),
                elWidth = $(element).width(),
                widthOffset = 0,
                snowTimeout = 0;
        
            // Collection Piece ******************************
            if(options.collection !== false){
                var testElem = document.createElement('canvas');
                if(!!(testElem.getContext && testElem.getContext('2d'))){
                    var canvasCollection = [],
                        elements = $(options.collection),
                        collectionHeight = options.collectionHeight;
                    
                    for(var i =0; i < elements.length; i++){
                            var bounds = elements[i].getBoundingClientRect(),
                                canvas = document.createElement('canvas'),
                                collisionData = [];

                            if(bounds.top-collectionHeight > 0){                                    
                                document.body.appendChild(canvas);
                                canvas.style.position = 'absolute';
                                canvas.height = collectionHeight;
                                canvas.width = bounds.width;
                                canvas.style.left = bounds.left + 'px';
                                canvas.style.top = bounds.top-collectionHeight + 'px';
                                
                                for(var w = 0; w < bounds.width; w++){
                                    collisionData[w] = [];
                                }
                                
                                canvasCollection.push({element :canvas, x : bounds.left, y : bounds.top-collectionHeight, width : bounds.width, height: collectionHeight, colData : collisionData});
                            }
                    }
                }else{
                    // Canvas element isnt supported
                    options.collection = false;
                }
            }
            // ************************************************
            
            // This will reduce the horizontal scroll bar from displaying, when the effect is applied to the whole page
            if($(element).get(0).tagName === $(document).get(0).tagName){
                widthOffset = 25;
            }
            
            // Bind the window resize event so we can get the innerHeight again
            $(window).bind("resize", function(){  
                elHeight = $(element).height();
                elWidth = $(element).width();
            }); 
            

            // initialize the flakes
            for(i = 0; i < options.flakeCount; i+=1){
                flakeId = flakes.length;
                flakes.push(new Flake(random(widthOffset,elWidth - widthOffset), random(0, elHeight), random((options.minSize * 100), (options.maxSize * 100)) / 100, random(options.minSpeed, options.maxSpeed), flakeId));
            }

            // This adds the style to make the snowflakes round via border radius property 
            if(options.round){
                $('.snowfall-flakes').css({'-moz-border-radius' : options.maxSize, '-webkit-border-radius' : options.maxSize, 'border-radius' : options.maxSize});
            }
            
            // This adds shadows just below the snowflake so they pop a bit on lighter colored web pages
            if(options.shadow){
                $('.snowfall-flakes').css({'-moz-box-shadow' : '1px 1px 1px #555', '-webkit-box-shadow' : '1px 1px 1px #555', 'box-shadow' : '1px 1px 1px #555'});
            }

            // On newer Macbooks Snowflakes will fall based on deviceorientation
            var doRatio = false;
            if (options.deviceorientation) {
                $(window).bind('deviceorientation', function(event) {
                    doRatio = event.originalEvent.gamma * 0.1;
                });
            }

            // this controls flow of the updating snow
            function snow(){
                for( i = 0; i < flakes.length; i += 1){
                    flakes[i].update();
                }
                
                snowTimeout = setTimeout(function(){snow()}, 30);
            }
            
            snow();
        
        // Public Methods
        
        // clears the snowflakes
        this.clear = function(){
                        $(element).children('.snowfall-flakes').remove();
                        flakes = [];
                        clearTimeout(snowTimeout);
                    };
    };
    
    // Initialize the options and the plugin
    $.fn.snowfall = function(options){
        if(typeof(options) == "object" || options == undefined){        
                 return this.each(function(i){
                    (new $.snowfall(this, options)); 
                });    
        }else if (typeof(options) == "string") {
            return this.each(function(i){
                var snow = $(this).data('snowfall');
                if(snow){
                    snow.clear();
                }
            });
        }
    };
})(zepto);

使用方式，请务必在页面完全加载之后使用以下代码，其他具体参数请查看演示地址的源码

$(document).snowfall({round : true, minSize: 2, maxSize:4}); // add rounded