挂绳动态GiF

参考地址：挂绳小猫咪

效果预览看本站

原来只是图片，于是突发奇想进行了尝试

修改 head.pug 文件

在[BlogRoot]/themes/butterfly/layout/includes/head.pug)最后一行加入如下代码：

1
#myscoll

添加 js 和css文件

在[BlogRoot]/node_modules/hexo-theme-butterfly/source/js文件夹下新建一个cat.js，将以下代码复制到文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
var getBasicInfo = function () {
    /* 窗口高度 */
    var ViewH = $(window).height();
    /* document高度 */
    var DocH = $("body")[0].scrollHeight;
    /* 滚动的高度 */
    var ScrollTop = $(window).scrollTop();
    /* 可滚动的高度 */
    var S_V = DocH - ViewH;
    var Band_H = ScrollTop / (DocH - ViewH) * 100;
    return {
        ViewH: ViewH,
        DocH: DocH,
        ScrollTop: ScrollTop,
        Band_H: Band_H,
        S_V: S_V
    }
};

function show(basicInfo) {
    if (basicInfo.ScrollTop > 0.001) {
        $(".neko").css('display', 'block');
    } else {
        $(".neko").css('display', 'none');
    }
}

(function ($) {
    $.fn.nekoScroll = function (option) {
        var defaultSetting = {
            top: '0',
            scroWidth: 6 + 'px',
            z_index: 9999,
            zoom: 0.9,
            borderRadius: 5 + 'px',
            right: 60 + 'px',
            nekoImg: "/img/top-img/gif/Luffy.gif", //自定义动态图
            hoverMsg: "一起吃🍖", //自定义内容
            color: "#6f42c1",
            during: 500,
            blog_body: "body",
        };
        var setting = $.extend(defaultSetting, option);
        var getThis = this.prop("className") !== "" ? "." + this.prop("className") : this.prop("id") !== "" ? "#" +
            this.prop("id") : this.prop("nodeName");
        if ($(".neko").length == 0) {
            this.after("<div class=\"neko\" id=" + setting.nekoname + " data-msg=\"" + setting.hoverMsg + "\"></div>");
        }
        let basicInfo = getBasicInfo();
        $(getThis)
            .css({
                'position': 'fixed',
                'width': setting.scroWidth,
                'top': setting.top,
                'height': basicInfo.Band_H * setting.zoom * basicInfo.ViewH * 0.01 + 'px',
                'z-index': setting.z_index,
                'background-color': setting.bgcolor,
                "border-radius": setting.borderRadius,
                'right': setting.right,
                'background-image': 'linear-gradient(45deg, #12c2e9, #c471ed, #f64f59)', // 修改绳子颜色
                'border-radius': '2em',
                'background-size': 'contain'
            });
        $("#" + setting.nekoname)
            .css({
                'position': 'fixed',
                'top': basicInfo.Band_H * setting.zoom * basicInfo.ViewH * 0.01 - 50 + 'px',
                'z-index': setting.z_index * 10,
                'right': setting.right,
                'background-image': 'url(' + setting.nekoImg + ')',
            });
        show(getBasicInfo());
        $(window)
            .scroll(function () {
                let basicInfo = getBasicInfo();
                show(basicInfo);
                $(getThis)
                    .css({
                        'position': 'fixed',
                        'width': setting.scroWidth,
                        'top': setting.top,
                        'height': basicInfo.Band_H * setting.zoom * basicInfo.ViewH * 0.01 + 'px',
                        'z-index': setting.z_index,
                        'background-color': setting.bgcolor,
                        "border-radius": setting.borderRadius,
                        'right': setting.right,
                        'background-image': 'linear-gradient(45deg, #12c2e9, #c471ed, #f64f59)', // 修改绳子颜色
                        'border-radius': '2em',
                        'background-size': 'contain'
                    });
                $("#" + setting.nekoname)
                    .css({
                        'position': 'fixed',
                        'top': basicInfo.Band_H * setting.zoom * basicInfo.ViewH * 0.01 - 50 + 'px',
                        'z-index': setting.z_index * 10,
                        'right': setting.right,
                        'background-image': 'url(' + setting.nekoImg + ')',
                    });
                if (basicInfo.ScrollTop == basicInfo.S_V) {
                    $("#" + setting.nekoname)
                        .addClass("showMsg")
                } else {
                    $("#" + setting.nekoname)
                        .removeClass("showMsg");
                    $("#" + setting.nekoname)
                        .attr("data-msg", setting.hoverMsg);
                }
            });
        this.click(function (e) {
            btf.scrollToDest(0, 500)
        });
        $("#" + setting.nekoname)
            .click(function () {
                btf.scrollToDest(0, 500)
            });
        return this;
    }
})(jQuery);

$(document).ready(function () {
    if (document.body.clientWidth > 992) {
        //部分自定义
        $("#myscoll").nekoScroll({
            bgcolor: 'rgb(0 0 0 / .5)', //背景颜色，没有绳子背景图片时有效
            borderRadius: '2em',
            zoom: 0.9
        });
        //自定义（去掉以下注释，并注释掉其他的查看效果）
        /*
        $("#myscoll").nekoScroll({
            nekoname:'neko1', //nekoname，相当于id
            nekoImg:'img/top-img/cat.png', //neko的背景图片
            scImg:"img/sz1.png", //绳子的背景图片
            bgcolor:'#1e90ff', //背景颜色，没有绳子背景图片时有效
            zoom:0.9, //绳子长度的缩放值
            hoverMsg:'你好~喵', //鼠标浮动到neko上方的对话框信息
            right:'100px', //距离页面右边的距离
            fontFamily:'楷体', //对话框字体
            fontSize:'14px', //对话框字体的大小
            color:'#1e90ff', //对话框字体颜色
            scroWidth:'8px', //绳子的宽度
            z_index:100, //不用解释了吧
            during:1200, //从顶部到底部滑动的时长
        });
        */
    }
});

在[BlogRoot]/node_modules/hexo-theme-butterfly/source/css文件夹下新建一个cat.css，将以下代码复制到文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
body::-webkit-scrollbar {
    width: 0;
}

.neko {
    width: 64px;
    height: 64px;
    background-image: url("/img/top-img/gif/Luffy.gif");//自定义动态图
    position: absolute;
    right: 32px;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(50%);
    cursor: pointer;
    font-family: tzy;
    font-weight: 600;
    font-size: 16px;
    color: #6f42c1;
    display: none;
}

.neko::after {
    display: none;
    width: 100px;
    height: 100px;
    background-image: url("/img/top-img/cloud.png");
    background-size: contain;
    z-index: 9999;
    position: absolute;
    right: 50%;
    text-align: center;
    line-height: 100px;
    top: -115%;

}

.neko.showMsg::after {
    content: attr(data-msg);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neko:hover::after {
    content: attr(data-msg);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neko.fontColor::after {
    color: #333;
}

/**
 * @description: 滚动条样式  跟猫二选一
 */
@media screen and (max-width:992px) {
    ::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important
    }

    ::-webkit-scrollbar-track {
        border-radius: 2em;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgb(255 255 255 / .3);
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
        border-radius: 2em
    }

    ::-webkit-scrollbar-corner {
        background-color: transparent
    }
}

记住一定要修改gif路径 我自定义的路径是/img/top-img/gif/

配置文件引入js和css

[Blogroot]\_config.butterfly.yml 找到 inject,引入 js和 css:

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/cat.css"> #猫咪
  bottom:
    - <script defer data-pjax src="/js/cat.js"></script> #猫咪

最后三连

执行 hexo cl,hexo g,hexo s 三连即可看到效果.