← 作品展 CASE 01 / 05
jQuery · Cubism 2.1

Static DOM · 静态挂载

常规引用

fghrsh 看板娘 v1.4 · 静态挂载

把所有 DOM 与脚本写死，最传统的静态挂载。

jQuery 3.3.1 jQuery UI 1.12.1 Cubism 2.1 静态 DOM
正在检测组件…
需联网
01

实现要点

Implementation
  1. DOM 先行：.waifu 容器、.waifu-tips 气泡、#live2d 画布、.waifu-tool 工具栏都由页面直接提供，图标字体来自 waifu.min.css。
  2. 全局配置：模型 ID、材质 ID、尺寸、拖拽方向、按钮显隐，统一写在 live2d_settings 上。
  3. 依赖顺序：jQuery → jQuery UI → DOM → waifu-tips → live2d.min.js → 配置 → initModel，顺序颠倒会直接白屏。
  4. 拖拽来源：jQuery UI 只负责让 .waifu 容器沿 X 轴拖动，与模型渲染无关。

运行条件

运行状态
需联网　模型与材质按 ID 从远程接口拉取，离线环境不显示。
依赖
jQuery 3.3.1 / jQuery UI 1.12.1（js/）
waifu.min.css + 图标字体（css/、assets/）
资源
Cubism 2.1 模型（远程接口）
入口文件
01-default/demo1-default.html
初始化
在 live2d_settings 之后调用 initModel("../js/waifu-tips.json")，路径不带 ?v= 后缀。
窄屏行为
插件默认 waifuMinWidth = 768，窄于该宽度会自动隐藏看板娘；canvas 仍挂载，状态保持 LIVE。

完整接入代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D 看板娘 v1.4 / Demo 1</title>
    <link rel="stylesheet" type="text/css" href="../css/waifu.min.css?v=1.4.2"/>
</head>
<body style="font-family: 'Microsoft YaHei';">
    <h2><a href="https://www.fghrsh.net/post/123.html" style="color: #38A3DB; text-decoration: none;">Live2D 看板娘 v1.4</a> / Demo 1</h2>
    <h3> - 常规引用 <span style="font-size: 12px;color: #666">(常规博客引用推荐)</span></h3>
    <ul>
        <li><span title="常规博客引用推荐">Demo 1 (当前面页)</span></li>
        <li><span title="一般网站引用推荐">Demo 2 - 自动加载 autoload.js（已移除）</span></li>
        <li><span title="博客园等网站引用推荐">Demo 3 - 内置 waifu-tips.json（已移除）</span></li>
    </ul>

    <!-- waifu-tips.js 依赖 JQuery 库 -->
    <script src="../js/jquery.min.js?v=3.3.1"></script>

    <!-- 实现拖动效果，需引入 JQuery UI -->
    <script src="../js/jquery-ui.min.js?v=1.12.1"></script>

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

    <script src="../js/waifu-tips.min.js?v=1.4.2"></script>
    <script src="../js/live2d.min.js?v=1.0.5"></script>
    <script type="text/javascript">
        /* 可直接修改部分参数 */
        live2d_settings['modelId'] = 1;                  // 默认模型 ID
        live2d_settings['modelTexturesId'] = 87;         // 默认材质 ID
        live2d_settings['modelStorage'] = false;         // 不储存模型 ID
        live2d_settings['canCloseLive2d'] = false;       // 隐藏 关闭看板娘 按钮
        live2d_settings['canTurnToHomePage'] = false;    // 隐藏 返回首页 按钮
        live2d_settings['waifuSize'] = '600x535';        // 看板娘大小
        live2d_settings['waifuTipsSize'] = '570x150';    // 提示框大小
        live2d_settings['waifuFontSize'] = '30px';       // 提示框字体
        live2d_settings['waifuToolFont'] = '36px';       // 工具栏字体
        live2d_settings['waifuToolLine'] = '50px';       // 工具栏行高
        live2d_settings['waifuToolTop'] = '-60px';       // 工具栏顶部边距
        live2d_settings['waifuDraggable'] = 'axis-x';    // 拖拽样式
        /* 在 initModel 前添加 */
        initModel("../js/waifu-tips.json")
    </script>
</body>
</html>
03

注意

Caveats