博客页面美化 jQuery网页雪花飘落效果

作者：极客小俊 一个专注于web技术的80后
我不用拼过聪明人，我只需要拼过那些懒人 我就一定会超越大部分人!
CSDN@极客小俊，原创文章, B站技术分享
B站视频 : 👉 Bilibili.com 👈
个人博客: 👉 cnblogs.com 👈

请先确定 网页是否已载入JQurey，如果没有请在下雪代码之前引入JQ即可：

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

雪花效果JS代码 如下:

 /*样式一*/
        (function($){
            $.fn.snow = function(options){
                var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
                    documentHeight 	= $(document).height(),
                    documentWidth	= $(document).width(),
                    defaults = {
                        minSize		: 10,
                        maxSize		: 20,
                        newOn		: 1000,
                        flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#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 - 200,
                        endPositionLeft = startPositionLeft - 500 + 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);
        $(function(){
            $.fn.snow({
                minSize: 5, /* 定义雪花最小尺寸 */
                maxSize: 50,/* 定义雪花最大尺寸 */
                newOn: 300  /* 定义密集程度，数字越小越密集 */
            });
        });

效果如下

"点赞" "评论" "收藏"
大家的支持就是我坚持下去的动力!

---

如果以上内容有任何错误或者不准确的地方，欢迎在下面 👇 留个言指出、或者你有更好的想法，欢迎一起交流学习