天冷了,没啥本事给大家下个雪吧

112 阅读1分钟

天冷了,没啥本事给大家下个雪吧

不多逼逼直接上代码

//代码基于jquery随意引入一个版本就好了

(function ($) {
    $.fn.snow = function (options) {
    //构建你的雪花
      var $flake = $('<div id = "snowbox"/>').css({ 'position': 'absolute', 'top'20%', 'z-index': '9999' }).html('&#10052'),
    $flakePC = $('<div id = "snowbox"/>').css({ 'position': 'absolute', 'top': '120%', 'z-index': '9999' }).html('&#10052'),
    //获取屏幕宽高
    documentHeight = $(document).height(),
    documentWidth = $(document).width(),
    defaults = {
    // 雪花最小、最大尺寸、出现频率、雪花颜色、PCor移动端
    minSize: 10,
    maxSize: 20,
    newOn: 500,
    flakeColor: "#AFDAEF",
    type: 1
    },
// 将一个新的空对象({})做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。
options = $.extend({}, defaults, options);
//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。关于数量和时间都要定时函数来实现
    var interval = setInterval(function () {
    //随机出现于x轴
    var startPositionLeft = Math.random() * documentWidth,
    //随机透明度
    startOpacity = 0.5 + Math.random(),
    //随机大小
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    //结束y轴位置
    endPositionTop = documentHeight,
    //结束x轴位置
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    //自由下落持续时间
    durationFall = documentHeight * 10 + Math.random() * 5000;
    //为了适配
    if (options.type == 1) {
        $flakePC.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()});
    } else {
        $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);
    };
})(jQuery);

$(function () {
    let type = null
    //简单的判断屏幕宽度
    if ($(document).width() < 700) {
        type = 0
    } else {
        type = 1
    }
    $.fn.snow({
        minSize: 5,
        maxSize: 50,
        newOn: 300,
        type: type
    });
});

效果展示,没做gif有机会补上

图片.png PS:修复几个小bug

    //结束y轴位置
    endPositionTop = documentHeight - 55,
    //要减去flake本身的大小不然会出现屏幕的抖动
    //简单使用可以使用overflow:hidden
    $(this).remove()
    //删除的是jquery对象如果要html里删除要使用
    $(this).detach()