jQuery效果—雪花飄落

標籤：append   設定   params   ext   ati   max   amp   移除   ons   

實現思路

1.在一定的頻率下在頁面中產生一定數目的雪花從上往下飄落；

2.在指定的時間內飄落後移除頁面；

3.可設定雪花的大小，在一定範圍內隨機雪花大小；

4.什麼時間後清除產生雪花，停止函數。

js代碼

(function($){        $.fn.snow = function(options){                var $flake          = $(‘<div class="flake" />‘).css({‘position‘: ‘absolute‘, ‘top‘: ‘-50px‘}),                documentHeight  = $(document).height(),                documentWidth   = $(document).width(),                defaults        = {                                    flakeChar   : "&#10052;",                                     minSize     : 10,                                    maxSize     : 20,                                    newOn       : 500,                                    flakeColor  : ‘#ffffff‘,                                    durationMillis: null                                },                options         = $.extend({}, defaults, options);                                        $flake.html(options.flakeChar);            var interval        = setInterval( function(){                var startPositionLeft   = Math.random() * documentWidth - 100,                    startOpacity        = 0.5 + Math.random(),                    sizeFlake           = options.minSize + Math.random() * options.maxSize,                    endPositionTop      = documentHeight - defaults.maxSize - 40,                    endPositionLeft     = startPositionLeft - 100 + Math.random() * 200,                    durationFall        = documentHeight * 10 + Math.random() * 5000;                $flake                    .clone()                    .appendTo(‘body‘)                    .css({                            left: startPositionLeft,                            opacity: startOpacity,                            ‘font-size‘: sizeFlake,                            color: options.flakeColor                    })                    .animate({                            top: endPositionTop,                            left: endPositionLeft,                            opacity: 0.2                        },                        durationFall,                        ‘linear‘,                        function() {                            $(this).remove()                        }                    );            }, options.newOn);            if (options.durationMillis) {                setTimeout(function() {                    clearInterval(interval);                }, options.durationMillis);            }       };    })(jQuery);

調用方式：

$(function(){    $("body").snow({‘durationMillis‘:2000}); //2s後停止產生雪花})

參數解釋：

 * @params flakeChar - 實現雪花圖案的html字元
 * @params minSize - 雪花的最小尺寸 * @params maxSize - 雪花的最大尺寸 * @params newOn - 雪花出現的頻率 * @params flakeColors - 雪花顏色 * @params durationMillis - 多少毫米後停止產生雪花
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });

 

jQuery效果—雪花飄落