码迷,mamicode.com
首页 > 其他好文 > 详细

下雪效果

时间:2015-05-18 18:08:54      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:

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

  

下雪效果

标签:

原文地址:http://www.cnblogs.com/icyy/p/4512236.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!