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

      

  • 相关阅读:
    Linux Shell 01 脚本与变量
    Linux下shell颜色配置
    Linux下Redis安装及配置
    Linux Shell 03 条件测试
    OSX下VirtualBox安装CentOS
    Log4j配置与使用
    Linux 环境变量的配置
    OS X下安装Redis及配置开机启动
    圈复杂度
    (转)Qt Model/View 学习笔记 (一)——Qt Model/View模式简介
  • 原文地址:https://www.cnblogs.com/icyy/p/4512236.html
Copyright © 2011-2022 走看看