IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    JavaScript 飞雪特效

    Debug客栈发表于 2020-01-12 19:40:09
    love 0
    Featured image of post JavaScript 飞雪特效

    马上就要到了传统节日“春节”?,网站添加了飞雪❄️特效,从网上找了源代码,先要感谢张戈博客分享?,现计划将网站在今天上线至过年回来下线,看看可以么,你可以复制到自己的网站或者博客体验一波,加上《一剪梅》真是别有一番滋味。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    
    <script type="text/javascript">
    (function($){
     $.fn.snow = function(options){
     var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
     documentHeight = $(document).height(),
     documentWidth = $(document).width(),
     defaults = {
     minSize : 6,
     maxSize : 10,
     newOn : 1000,
     flakeColor : "#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,
     opacity: 0.2
     },durationFall,'linear',function(){
     $(this).remove()
     });
     }, options.newOn);
     };
    })(jQuery);
    $(function(){
     $.fn.snow({
     minSize: 5, /* 定义雪花最小尺寸 */
     maxSize: 20,/* 定义雪花最大尺寸 */
     newOn: 800 /* 定义密集程度,数字越小越密集 */
     });
    });
    </script>
    


沪ICP备19023445号-2号
友情链接