现在的位置: 首页 > WEB前端 > 正文
jQuery圣诞节雪花飘落插件
2013年12月21日 WEB前端 ⁄ 共 2522字 暂无评论 ⁄ 被围观 1,871 views+

这个js网页雪花效果jquery插件,只需要将 jq.snow.js 引入到你的网站,当然你的网站必须已经引用了jquery库,如果没有那你要想要引入jquery库才可以

建议把js文件在网站的 body 结束标签的前面引用,这样做的好处是这个特效的将在最后加载不影响贵网站主要内容的快速展示。

js网页雪花效果jquery插件插件参数说明:

minSize: 5,        //雪花的最小尺寸

maxSize: 50,     //雪花的最大尺寸

newOn: 1000        //雪花出现的频率 这个数值越小雪花越多

为网站增加js网页雪花效果jquery插件,特别适合圣诞、元旦、新年网站气氛

<script src="jq.snow.js"></script>
 <!--下面是调用方法和参数说明-->
 <script>
$(function(){
$.fn.snow({ 
minSize: 5, //雪花的最小尺寸
maxSize: 50,   //雪花的最大尺寸
newOn: 300 //雪花出现的频率 这个数值越小雪花越多
});
});
 </script>

下面代码保存为 jq.snow.js 的文件,代码如下(使用该代码时记得压缩):

/**
 * js网页雪花效果jquery插件 
 * 酷狗明 http://kugouming.com
 * @see http://workshop.rs
 */
(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"    //懒人建站 www.51xuediannao.com   整理
                                },
                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);

给我留言

您必须 [ 登录 ] 才能发表留言!