博客网站添加下雪特效插件

整个站都会开始下雪,感觉嘚一下就上来了!并且特效不会影响网站操作。

源码截图

源码截图

代码如下:

  • 外链式
  • color: "#cccccc"是雪花颜色,可以自己改
<script src="https://www.cenguigui.cn/tianjia/snow" rel="external nofollow" ></script>
 <script>var sf = new Snowflakes({color: "#cccccc"});</script>

还有一种:

  • 你要做成js外链,也可以内嵌,看自己喜好
  • flakeColor: "#00ffff" 是雪花颜色,可以自己改
代码如下:
<!--雪花-->
                <script src="https://www.cenguigui.cn/tianjia/xuehua.js"></script>
                <script type="text/javascript">
                    (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: "#00ffff" /* 此处可以定义雪花颜色,若要白色可以改为#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: 800  /* 定义密集程度,数字越小越密集 */
                        });
                    });
            
                </script>
                <!--雪花  end-->

樱花

  • 外链式,自己可以搬运代码上传到自己服务器或者自己用作本地都行
<!-- 樱花 -->
<script src="https://www.cenguigui.cn/log/sakura.js"></script>
<!-- 樱花    end-->
最后修改:2023 年 04 月 07 日
如果觉得我的文章对你有用,请随意赞赏