jQuery效果之雪花飘落

前端开发作者： 2024-08-20 19:30:01

实现思路 1.在一定的频率下在页面中生成一定数目的雪花从上往下飘落； 2.在指定的时间内飘落后移除页面； 3.可设置雪花的大小，在一定范围内随机雪花大小； 4.什么时间后清除生成雪花，停止函数。 js

(function($){
    
    $.fn.snow = (options){
    
            var $flake          = $('<div class="flake" />').css({'position': 'absolute','top': '-50px'}),documentHeight  = $(document).height(),documentWidth   = $(document).width(),defaults        = {
                                    flakeChar   : "&#10052;",minSize     : 10500null
                                },options         = $.extend({},defaults,options);
                            
            $flake.html(options.flakeChar);

            var interval        = setInterval( (){
                var startPositionLeft   = Math.random() * documentWidth - 100 Math.random(),sizeFlake           = options.minSize + Math.random() * options.maxSize,endPositionTop      = documentHeight - defaults.maxSize - 40= 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'() {
                            $(this).remove()
                        }
                    );
            },options.newOn);

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

$((){
    $("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 });

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65681.html

相关资讯： jQuery效果之雪花飘落