起因

在逛博客时，偶然间看到一篇使用JS实现雪花特效的博文。仔细研究代码后发现其中的原因并不复杂，就有点类似于之前做过的生成星星案例以及发射子弹的案例的结合，于是就将其添加到了网站

思路

1. 每个雪花其实就是一个动态生成的div，其相对于页面绝对定位
2. 雪花的初始位置top值为负的自身的高度，left值随机，大小随机
3. 给每个雪花添加动画，让其从页面顶部匀速运动到页面底部，动画时间随机，动画结束移除自身

代码实现

(function ($) {
    $.fn.snow = function (options) {
        var $flake = $('<div class="snowbox" />').css({
            'position': 'absolute',
            'z-index': '9999',
            'top': '-50px'
        }).html('❄');
        documentHeight = $(document).height();
        documentWidth = $(document).width();
        defaults = {
            minSize: 6,
            maxSize: 10,
            newOn: 1000,
            flakeColor: "#fff" /* 此处可以定义雪花颜色 */
        };
        options = $.extend({}, defaults, options);
        var interval = setInterval(function () {
            var startPositionLeft = Math.random() * documentWidth - 100,
                startOpacity = 1,
                sizeFlake = options.minSize + Math.random() * options.maxSize,
                endPositionTop = documentHeight - 200,
                endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
                durationFall = documentHeight * 10 + Math.random() * 5000;
            $flake.clone().appendTo('#snow').css({
                left: startPositionLeft,
                opacity: startOpacity,
                'font-size': sizeFlake,
                color: options.flakeColor
            }).animate({
                top: endPositionTop,
                left: endPositionLeft,
                opacity: 0.8
            }, durationFall, 'linear', function () {
                $(this).remove()
            });
        }, options.newOn);
    };
})(jQuery);

// 调用snow函数
$.fn.snow({
    minSize: 15,
    /* 定义雪花最小尺寸 */
    maxSize: 30,
    /* 定义雪花最大尺寸 */
    newOn: 800 /* 定义密集程度，数字越小越密集 */
});