• 下雪效果


    下雪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);
    

      

  • 相关阅读:
    Net Core -- 配置Kestrel端口
    NET Core迁移
    NET Core 2.0 微服务跨平台实践
    NET Core 与 Vue.js 服务端渲染
    Varnish 实战
    Hitchhiker 是一款开源的 Restful Api 测试工具
    ABP框架用Dapper实现通过SQL访问数据库
    开源框架总体介绍
    Net Core API网关Ocelot
    Jquery autocomplete插件
  • 原文地址:https://www.cnblogs.com/icyy/p/4512236.html
Copyright © 2020-2023  润新知