zoukankan      html  css  js  c++  java
  • 下雪效果

    下雪js效果调用:

    $(function(){
        $.fn.snow({
            minSize: 5,     //雪花的最小尺寸
            maxSize: 50,    //雪花的最大尺寸
            newOn: 300  //雪花出现的频率 这个数值越小雪花越多
        });
    });
    

    类:

    (function($){
        $.fn.snow = function(options){
         
                var $flake          = $('<div id="snowbox" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
                    documentHeight  = $(document).height(),
                    documentWidth   = $(document).width(),
                    defaults        = {
                                        minSize     : 10,       //雪花的最小尺寸
                                        maxSize     : 20,       //雪花的最大尺寸
                                        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 - 40,
                        endPositionLeft     = startPositionLeft - 100 + 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);
    

      

  • 相关阅读:
    Web——[HCTF 2018]WarmUp
    栈的设置+栈的越界问题+栈的极限大小
    栈的概念
    检测点3.1
    字节型数据和字型数据的小结
    汇编语言(王爽)学习记录_第一章
    sqli-labs less-1 --> less-4
    五角星
    STD二手图书交流平台团队博客-登陆问题的解决
    STD二手图书交流平台团队博客-界面构建
  • 原文地址:https://www.cnblogs.com/icyy/p/4512236.html
Copyright © 2011-2022 走看看