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

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

查看所有标签

猜你喜欢:

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

互联网爆破术:快速掌握互联网运营全链条实战技巧

互联网爆破术:快速掌握互联网运营全链条实战技巧

茶文 / 电子工业出版社 / 2018-7 / 49.00元

《互联网爆破术:快速掌握互联网运营全链条实战技巧》是一本实用的互联网运营书籍,可以让读者快速掌握运营全链条的干货技巧和相关模型,涵盖如何有效寻找市场的需求爆破点,通过测试一步步放大并引爆,直至赢利。《互联网爆破术:快速掌握互联网运营全链条实战技巧》非常适合互联网运营人员及互联网创业者阅读,它可以帮读者快速了解互联网运营的核心技巧,并用最低的成本取得成功。本书5大特色:快速入门、实战干货、低成本、系......一起来看看 《互联网爆破术:快速掌握互联网运营全链条实战技巧》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

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

Base64 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具