网站雪花特效,可设置雪花大小

前言

久伴在闲鱼博客看到的觉得还不错适合自节假日使用,就分享一下吧

效果

代码

"text/javascript">    
(function($){    
    $.fn.snow = function(options){    
    var $flake = $('"snowbox" />').css({'position''absolute','z-index':'9999''top''-50px'}).html('❄'),    
    documentHeight  = $(document).height(),    
    documentWidth   = $(document).width(),    
    defaults = {    
        minSize     : 10,    
        maxSize     : 20,    
        newOn       : 1000,    
        flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */    
    },    
    options = $.extend({}, defaults, options);    
    var interval= setInterval( function(){    
    var startPositionLeft = Math.random() * documentWidth - 100,    
    startOpacity = 0.5 + Math.random(),    
    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('body').css({    
        left: startPositionLeft,    
        opacity: startOpacity,    
        'font-size': sizeFlake,    
        color: options.flakeColor    
    }).animate({    
        top: endPositionTop,    
        left: endPositionLeft,    
        opacity0.2    
    },durationFall,'linear',function(){    
        $(this).remove()    
    });    
    }, options.newOn);    
    };    
})(jQuery);    
$(function(){    
    $.fn.snow({     
        minSize5/* 定义雪花最小尺寸 */    
        maxSize: 50,/* 定义雪花最大尺寸 */    
        newOn: 300  /* 定义密集程度,数字越小越密集 */    
    });    
});    
    

加群入久伴博客官方微信群

加入久伴官方微信群有啥优势?

1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈

2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑

3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言

扫描下方二维码即可加入交流讨论

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA赞助
共{{data.count}}人
人已赞助
2 条回复 A文章作者 M管理员
  1. 谢谢

    • 客气了

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索