JQuery实现屏幕飘落雪花效果

     这个东东的源码是【软谋教育】徐老师提供的，感谢老师的讲解（PS：虽然当天我没有上课、但是课后我有复习的！）

    首先使用的时候需要引入JQuery.JS文件，然后引入snowFalling.js文件就可以实现了。先看一下效果



    这漫天的大雪不禁让我想起08、09、10、11年，那时候我们还是高中生，在漫天飘雪的【牙克石】一起奔赴网吧的道路、时间飞逝啊。。。

    JQuery代码：

    // 需要引入JQuery文件

    $(document).ready(function () {

    var minSize = 3;    // 飘落物最小尺寸

    var maxSize = 30;   // 飘落物最大尺寸

    var showRate = 20  // 飘落物出现的时间频率

    var snowColor = "#FFFFFF"   // 飘落物颜色

    var snowLayer = $('<div></div>').css({ 'position': 'absolute', 'top': '-50px' }).html('❄');  // 飘落物显示的层

    var winHeight = $(document).height();   // 获取页面高度

    var winWidth = $(document).width(); // 获取页面的宽度

    setInterval(function () {

        var a = Math.random();

        var startPositionLeft = Math.random() * winWidth - 100;    // 飘落物下落时随机位置

        var startOpacity = 0.7 + Math.random(); // 获取随机的透明度

        var sizeFlake = minSize + Math.random() * maxSize;  // 获取飘落物随机大小

        var endPositionTop = winHeight - 80;    // 飘落物距离窗体上端距离

        var endPositionLeft = (startPositionLeft + Math.random() * 500) >= winWidth ? winWidth - 50 : (startPositionLeft + Math.random() * 500); // 飘落物距离窗体左端距离

        if (endPositionLeft > winWidth) {

            endPositionLeft = winWidth - 100;

        }

        var durationFall = winHeight * 10 + Math.random() * 3000;   // 获取飘落物下落的随机速度

        snowLayer.clone().appendTo('body').css({

            left: startPositionLeft,

            opacity: startOpacity,

            'font-size': sizeFlake,

            color: snowColor

        }).animate({

            top: endPositionTop,

            left: endPositionLeft,

            opacity: 0.5

        }, durationFall, function () {

            $(this).remove();

        });

    }, showRate);

});