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

      

  • 相关阅读:
    #Hadoop集群部署
    #Linux Keepalived 负载均衡
    #Linux LVS 负载均衡
    #Kafka 彻底删除topic
    #Linux Keepalived 双机热备
    Python #图片验证码
    Linux #tar
    MongoDB #$set的问题
    Django #CSRF
    keystone环境搭建(源码方式+yum方式)(ocata版本)
  • 原文地址:https://www.cnblogs.com/icyy/p/4512236.html
Copyright © 2011-2022 走看看