说明

复现了大佬的操作,这里总结一下。
大佬源文章:https://nocilol.me/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02/

步骤

下载live2d.js:https://github.com/journey-ad/live2d_src/releases

新建waifu-tips.js

function render(template, context) {
    var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;

    return template.replace(tokenReg, function (word, slash1, token, slash2) {
        if (slash1 || slash2) {
            return word.replace("\\", "");
        }

        var variables = token.replace(/\s/g, "").split(".");
        var currentObject = context;
        var i, length, variable;

        for (i = 0, length = variables.length; i < length; ++i) {
            variable = variables[i];
            currentObject = currentObject[variable];
            if (currentObject === undefined || currentObject === null)
                return "";
        }
        return currentObject;
    });
}
String.prototype.render = function (context) {
    return render(this, context);
};

var re = /x/;
console.log(re);
re.toString = function () {
    showMessage("哈哈,你打开了控制台,是想要看看我的秘密吗?", 5000);
    return "";
};

$(document).on("copy", function () {
    showMessage("你都复制了些什么呀,转载要记得加上出处哦", 5000);
});

$.ajax({
    cache: true,
    url: "path/to/waifu-tips.json",
    dataType: "json",
    success: function (result) {
        $.each(result.mouseover, function (index, tips) {
            $(document).on("mouseover", tips.selector, function () {
                var text = tips.text;
                if (Array.isArray(tips.text))
                    text =
                        tips.text[
                            Math.floor(Math.random() * tips.text.length + 1) - 1
                        ];
                text = text.render({ text: $(this).text() });
                showMessage(text, 3000);
            });
        });
        $.each(result.click, function (index, tips) {
            $(document).on("click", tips.selector, function () {
                var text = tips.text;
                if (Array.isArray(tips.text))
                    text =
                        tips.text[
                            Math.floor(Math.random() * tips.text.length + 1) - 1
                        ];
                text = text.render({ text: $(this).text() });
                showMessage(text, 3000);
            });
        });
    },
});

(function () {
    var text;
    if (document.referrer !== "") {
        var referrer = document.createElement("a");
        referrer.href = document.referrer;
        text =
            'Hello! 来自 <span style="color:#0099cc;">' +
            referrer.hostname +
            "</span> 的朋友";
        var domain = referrer.hostname.split(".")[1];
        if (domain == "baidu") {
            text =
                'Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' +
                referrer.search.split("&wd=")[1].split("&")[0] +
                "</span> 找到的我吗?";
        } else if (domain == "so") {
            text =
                'Hello! 来自 360搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' +
                referrer.search.split("&q=")[1].split("&")[0] +
                "</span> 找到的我吗?";
        } else if (domain == "google") {
            text =
                'Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style="color:#0099cc;">『' +
                document.title.split(" - ")[0] +
                "』</span>";
        }
    } else {
        if (window.location.href == "https://imjad.cn/") {
            //如果是主页
            var now = new Date().getHours();
            if (now > 23 || now <= 5) {
                text = "你是夜猫子呀?这么晚还不睡觉,明天起的来嘛";
            } else if (now > 5 && now <= 7) {
                text = "早上好!一日之计在于晨,美好的一天就要开始了";
            } else if (now > 7 && now <= 11) {
                text = "上午好!工作顺利嘛,不要久坐,多起来走动走动哦!";
            } else if (now > 11 && now <= 14) {
                text = "中午了,工作了一个上午,现在是午餐时间!";
            } else if (now > 14 && now <= 17) {
                text = "午后很容易犯困呢,今天的运动目标完成了吗?";
            } else if (now > 17 && now <= 19) {
                text = "傍晚了!窗外夕阳的景色很美丽呢,最美不过夕阳红~";
            } else if (now > 19 && now <= 21) {
                text = "晚上好,今天过得怎么样?";
            } else if (now > 21 && now <= 23) {
                text = "已经这么晚了呀,早点休息吧,晚安~";
            } else {
                text = "嗨~ 快来逗我玩吧!";
            }
        } else {
            text =
                '欢迎阅读<span style="color:#0099cc;">『' +
                document.title.split(" - ")[0] +
                "』</span>";
        }
    }
    showMessage(text, 6000);
})();

window.setInterval(showHitokoto, 30000);

function showHitokoto() {
    $.getJSON(
        "https://api.imjad.cn/hitokoto/?cat=&charset=utf-8&length=28&encode=json",
        function (result) {
            showMessage(result.hitokoto, 5000);
        }
    );
}

function showMessage(text, timeout) {
    if (Array.isArray(text))
        text = text[Math.floor(Math.random() * text.length + 1) - 1];
    console.log(text);
    $(".waifu-tips").stop();
    $(".waifu-tips").html(text).fadeTo(200, 1);
    if (timeout === null) timeout = 5000;
    hideMessage(timeout);
}
function hideMessage(timeout) {
    $(".waifu-tips").stop().css("opacity", 1);
    if (timeout === null) timeout = 5000;
    $(".waifu-tips").delay(timeout).fadeTo(200, 0);
}

新建waifu-tips.json,可以设置看板娘交互文字

{
    "mouseover": [
        {
            "selector": ".container a[href^='http']",
            "text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么?"]
        },
        {
            "selector": ".fui-home",
            "text": ["点击前往首页,想回到上一页可以使用浏览器的后退功能哦"]
        },
        {
            "selector": "#tor_show",
            "text": ["翻页比较麻烦吗,点击可以显示这篇文章的目录呢"]
        },
        {
            "selector": "#comment_go,.fui-chat",
            "text": ["想要去评论些什么吗?"]
        },
        {
            "selector": "#night_mode",
            "text": ["深夜时要爱护眼睛呀"]
        },
        {
            "selector": "#qrcode",
            "text": ["手机扫一下就能继续看,很方便呢"]
        },
        {
            "selector": ".comment_reply",
            "text": ["要吐槽些什么呢"]
        },
        {
            "selector": "#back-to-top",
            "text": ["回到开始的地方吧"]
        },
        {
            "selector": "#author",
            "text": ["该怎么称呼你呢"]
        },
        {
            "selector": "#mail",
            "text": ["留下你的邮箱,不然就是无头像人士了"]
        },
        {
            "selector": "#url",
            "text": ["你的家在哪里呢,好让我去参观参观"]
        },
        {
            "selector": "#textarea",
            "text": ["认真填写哦,垃圾评论是禁止事项"]
        },
        {
            "selector": ".OwO-logo",
            "text": ["要插入一个表情吗"]
        },
        {
            "selector": "#csubmit",
            "text": ["要提交了吗,首次评论需要审核,请耐心等待~"]
        },
        {
            "selector": ".ImageBox",
            "text": ["点击图片可以放大呢"]
        },
        {
            "selector": "input[name=s]",
            "text": ["找不到想看的内容?搜索看看吧"]
        },
        {
            "selector": ".previous",
            "text": ["去上一页看看吧"]
        },
        {
            "selector": ".next",
            "text": ["去下一页看看吧"]
        },
        {
            "selector": ".dropdown-toggle",
            "text": ["这里是菜单"]
        },
        {
            "selector": "c-player a.play-icon",
            "text": ["想要听点音乐吗"]
        },
        {
            "selector": "c-player div.time",
            "text": ["在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢"]
        },
        {
            "selector": "c-player div.volume",
            "text": ["在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢"]
        },
        {
            "selector": "c-player div.list-button",
            "text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"]
        },
        {
            "selector": "c-player div.lyric-button",
            "text": ["有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢"]
        },
        {
            "selector": ".waifu #live2d",
            "text": ["干嘛呢你,快把手拿开", "鼠…鼠标放错地方了!"]
        }
    ],
    "click": [
        {
            "selector": ".waifu #live2d",
            "text": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗,这里有个变态一直在摸我(ó﹏ò。)"]
        }
    ]
}

新建style.css

.waifu {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 0;
    transition: all 0.3s ease-in-out;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}
.waifu:hover {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
@media (max-width: 768px) {
    .waifu {
        display: none;
    }
}
.waifu-tips {
    opacity: 0;
    width: 250px;
    height: 70px;
    margin: -20px 20px;
    padding: 5px 10px;
    border: 1px solid rgba(224, 186, 140, 0.62);
    border-radius: 12px;
    background-color: rgba(236, 217, 188, 0.5);
    box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
    animation-delay: 5s;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-name: shake;
    animation-timing-function: ease-in-out;
}
.waifu #live2d {
    position: relative;
}

@keyframes shake {
    2% {
        transform: translate(0.5px, -1.5px) rotate(-0.5deg);
    }

    4% {
        transform: translate(0.5px, 1.5px) rotate(1.5deg);
    }

    6% {
        transform: translate(1.5px, 1.5px) rotate(1.5deg);
    }

    8% {
        transform: translate(2.5px, 1.5px) rotate(0.5deg);
    }

    10% {
        transform: translate(0.5px, 2.5px) rotate(0.5deg);
    }

    12% {
        transform: translate(1.5px, 1.5px) rotate(0.5deg);
    }

    14% {
        transform: translate(0.5px, 0.5px) rotate(0.5deg);
    }

    16% {
        transform: translate(-1.5px, -0.5px) rotate(1.5deg);
    }

    18% {
        transform: translate(0.5px, 0.5px) rotate(1.5deg);
    }

    20% {
        transform: translate(2.5px, 2.5px) rotate(1.5deg);
    }

    22% {
        transform: translate(0.5px, -1.5px) rotate(1.5deg);
    }

    24% {
        transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
    }

    26% {
        transform: translate(1.5px, 0.5px) rotate(1.5deg);
    }

    28% {
        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
    }

    30% {
        transform: translate(1.5px, -0.5px) rotate(-0.5deg);
    }

    32% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
    }

    34% {
        transform: translate(2.5px, 2.5px) rotate(-0.5deg);
    }

    36% {
        transform: translate(0.5px, -1.5px) rotate(0.5deg);
    }

    38% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg);
    }

    40% {
        transform: translate(-0.5px, 2.5px) rotate(0.5deg);
    }

    42% {
        transform: translate(-1.5px, 2.5px) rotate(0.5deg);
    }

    44% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
    }

    46% {
        transform: translate(1.5px, -0.5px) rotate(-0.5deg);
    }

    48% {
        transform: translate(2.5px, -0.5px) rotate(0.5deg);
    }

    50% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
    }

    52% {
        transform: translate(-0.5px, 1.5px) rotate(0.5deg);
    }

    54% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
    }

    56% {
        transform: translate(0.5px, 2.5px) rotate(1.5deg);
    }

    58% {
        transform: translate(2.5px, 2.5px) rotate(0.5deg);
    }

    60% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
    }

    62% {
        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
    }

    64% {
        transform: translate(-1.5px, 1.5px) rotate(1.5deg);
    }

    66% {
        transform: translate(0.5px, 2.5px) rotate(1.5deg);
    }

    68% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
    }

    70% {
        transform: translate(2.5px, 2.5px) rotate(0.5deg);
    }

    72% {
        transform: translate(-0.5px, -1.5px) rotate(1.5deg);
    }

    74% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
    }

    76% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
    }

    78% {
        transform: translate(-1.5px, 2.5px) rotate(0.5deg);
    }

    80% {
        transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
    }

    82% {
        transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
    }

    84% {
        transform: translate(-0.5px, 0.5px) rotate(1.5deg);
    }

    86% {
        transform: translate(2.5px, 1.5px) rotate(0.5deg);
    }

    88% {
        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
    }

    90% {
        transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
    }

    92% {
        transform: translate(-1.5px, -1.5px) rotate(1.5deg);
    }

    94% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
    }

    96% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg);
    }

    98% {
        transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
    }

    0%,
    100% {
        transform: translate(0, 0) rotate(0);
    }
}

网页中插入以下内容

<link rel="stylesheet" href="style.css" />
<div class="waifu">
    <div class="waifu-tips"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>
<script src="//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script async src="waifu-tips.js"></script>
<script src="live2d.js"></script>
<script type="text/javascript">
    // 这里填写模型的model.json的地址
    loadlive2d("live2d", "models/snow_miku/model.json");
</script>

其中model需要自己制造或者下载大佬分享的

这个网站有一些分享的模型:https://mx.paul.ren/

案例

https://pan.2bboy.com/home/test/live2d/

最后修改:2021 年 05 月 19 日
你的赞赏是我前进的动力