动漫小可爱-网页添加L2Dwidget.js

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫小可爱title>
    <link rel="stylesheet" href="waifu/waifu.css">
head>

<body>

    <div class="waifu">
        <div class="waifu-tips">div>
        <canvas id="live2d" class="live2d">canvas>
        
        <div class="waifu-tool">
            <span class="fui-home">span>
            <span class="fui-chat">span>
            <span class="fui-eye">span>
            <span class="fui-user">span>
            <span class="fui-photo">span>
            <span class="fui-info-circle">span>
            <span class="fui-cross">span>
        div>
    div>
body>
<script src="js/jquery-1.8.3.min.js">script>
<script src="js/jquery-ui.min.js">script>
<script src="js/L2Dwidget.min.js">script>
<script src="waifu/waifu-tips.js">script>
<script src="waifu/live2d.min.js">script>
<script type="text/javascript">
    /* 可直接修改部分参数 */
    live2d_settings['hitokotoAPI'] = 'hitokoto.cn';  // 一言 API
    live2d_settings['modelId'] = 3;                  // 默认模型 ID
    live2d_settings['modelTexturesId'] = 2;          // 默认材质 ID
    live2d_settings['modelStorage'] = false;         // 不储存模型 ID
    initModel("waifu/waifu-tips.json")
    var selectAry = [
        ["chitose"],
        ["epsilon2_1"],
        ['haru'],
        ["gf"],
        ["haruto"],
        ["hibiki"],
        ["hijiki"],
        ["izumi"],
        ["koharu"],
        ["miku"],
        ["nico"],
        ["ni-j"],
        ["nipsilon"],
        ["nito"],
        ["nietzsche"],
        ["shizuku"],
        ["tororo"],
        ["tsumiki"],
        ["unitychan"],
        ["wanko"],
        ["z16"]
    ];
    var num = ['01', '02'];
    var mode = selectAry[parseInt(Math.random() * selectAry.length)][0];
    var modeClass = mode;
    if (mode == 'haru') {
        let S = num[parseInt(Math.random() * num.length)];
        mode = mode + '/' + S;
        modeClass = mode.replace('/', '');
    }
    L2Dwidget.init({
        "model": { "jsonPath": "packages/live2d-widget-model-" + mode + "/assets/" + modeClass + ".model.json", "scale": 1, "hHeadPos": 0.5, "vHeadPos": 0.618 },
        "dialog": {
            enable: true,
            script: {
                //每20s，显示一言（调用一言Api返回的句子）
                'every idle 20s': '$hitokoto$',
                'hover div': '星星在天上而你在我心里 (*/ω＼*)',
                //触摸到身体
                'tap body': '害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄',
                //触摸到头部
                'tap face': '~~'
            }
        },
        "mobile": { "show": true, scale: 0.5 },
        "display": {
            "superSample": 2,
            "width": 200,
            "height": 400,
            "position": "right",
            "hOffset": 0,
            "vOffset": 0
        }

    });
script>

html>
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

文件包：下载
在这里插入图片描述

相关阅读:
突破神奇的Cloudflare防火墙
【Hello Go】Go语言并发编程
1407. 排名靠前的旅行者
Spring组成-七大模块
干货：如何在前端统计用户访问来源？
DLL详解
2.2_3&2.2_4调度器和闲逛进程、调度算法的评价指标
CMT2380F32模块开发18-模拟电压比较器例程
数据结构--顺序表
RFID电力资产全周期智能化管理应用解决方案

原文地址：https://blog.csdn.net/weixin_45791806/article/details/132851830