jQuery效果—雪花飘落

栏目: jQuery · 发布时间: 6年前

内容简介:jQuery效果—雪花飘落

实现思路

1.在一定的频率下在页面中生成一定数目的雪花从上往下飘落;

2.在指定的时间内飘落后移除页面;

3.可设置雪花的大小,在一定范围内随机雪花大小;

4.什么时间后清除生成雪花,停止函数。

js代码

(function($){
    
    $.fn.snow = function(options){
    
            var $flake          = $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}),
                documentHeight  = $(document).height(),
                documentWidth   = $(document).width(),
                defaults        = {
                                    flakeChar   : "❄", 
                                    minSize     : 10,
                                    maxSize     : 20,
                                    newOn       : 500,
                                    flakeColor  : '#ffffff',
                                    durationMillis: null
                                },
                options         = $.extend({}, defaults, options);
                            
            $flake.html(options.flakeChar);

            var interval        = setInterval( function(){
                var startPositionLeft   = Math.random() * documentWidth - 100,
                    startOpacity        = 0.5 + Math.random(),
                    sizeFlake           = options.minSize + Math.random() * options.maxSize,
                    endPositionTop      = documentHeight - defaults.maxSize - 40,
                    endPositionLeft     = startPositionLeft - 100 + Math.random() * 200,
                    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);

            if (options.durationMillis) {
                setTimeout(function() {
                    clearInterval(interval);
                }, options.durationMillis);
            }   
    };
    
})(jQuery);

调用方式:

$(function(){
    $("body").snow({'durationMillis':2000}); //2s后停止生成雪花
})

参数解释:

* @params flakeChar - 实现雪花图案的html字符
 * @params minSize - 雪花的最小尺寸
 * @params maxSize - 雪花的最大尺寸
 * @params newOn - 雪花出现的频率
 * @params flakeColors - 雪花颜色
 * @params durationMillis - 多少毫米后停止生成雪花
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Types and Programming Languages

Types and Programming Languages

Benjamin C. Pierce / The MIT Press / 2002-2-1 / USD 95.00

A type system is a syntactic method for automatically checking the absence of certain erroneous behaviors by classifying program phrases according to the kinds of values they compute. The study of typ......一起来看看 《Types and Programming Languages》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具