demo1-default.html

<!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="assets/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><a href="demo2-autoload.html" style="color: #38A3DB; text-decoration: none;" title="一般网站引用推荐">Demo 2 - 自动加载 autoload.js</a></li>
        <li><a href="demo3-waifu-tips.html" style="color: #38A3DB; text-decoration: none;" title="博客园等网站引用推荐">Demo 3 - 内置 waifu-tips.json</a></li>
    </ul>
    
    <code><pre>
&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
    &lt;title&gt;Live2D 看板娘 v1.4 / Demo 1&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/waifu.min.css?v=1.4.2&quot;/&gt;
&lt;/head&gt;
&lt;body style=&quot;font-family: &#x27;Microsoft YaHei&#x27;;&quot;&gt;
    &lt;h2&gt;&lt;a href=&quot;https://www.fghrsh.net/post/123.html&quot; style=&quot;color: #38A3DB; text-decoration: none;&quot;&gt;Live2D 看板娘 v1.4&lt;/a&gt; / Demo 1&lt;/h2&gt;
    &lt;h3&gt; - 常规引用 &lt;span style=&quot;font-size: 12px;color: #666&quot;&gt;(常规博客引用推荐)&lt;/span&gt;&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;span title=&quot;常规博客引用推荐&quot;&gt;Demo 1 (当前面页)&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;demo2-autoload.html&quot; style=&quot;color: #38A3DB; text-decoration: none;&quot; title=&quot;一般网站引用推荐&quot;&gt;Demo 2 - 自动加载 autoload.js&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;demo3-waifu-tips.html&quot; style=&quot;color: #38A3DB; text-decoration: none;&quot; title=&quot;博客园等网站引用推荐&quot;&gt;Demo 3 - 内置 waifu-tips.json&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;!-- waifu-tips.js 依赖 JQuery 库 --&gt;
    &lt;script src=&quot;assets/jquery.min.js?v=3.3.1&quot;&gt;&lt;/script&gt;
    
    &lt;!-- 实现拖动效果，需引入 JQuery UI --&gt;
    &lt;script src=&quot;assets/jquery-ui.min.js?v=1.12.1&quot;&gt;&lt;/script&gt;
    
    &lt;div class=&quot;waifu&quot;&gt;
        &lt;div class=&quot;waifu-tips&quot;&gt;&lt;/div&gt;
        &lt;canvas id=&quot;live2d&quot; class=&quot;live2d&quot;&gt;&lt;/canvas&gt;
        &lt;div class=&quot;waifu-tool&quot;&gt;
            &lt;span class=&quot;fui-home&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;fui-chat&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;fui-eye&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;fui-user&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;fui-photo&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;fui-info-circle&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;fui-cross&quot;&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
        
    &lt;script src=&quot;assets/waifu-tips.min.js?v=1.4.2&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/live2d.min.js?v=1.0.5&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        /* 可直接修改部分参数 */
        live2d_settings[&#x27;modelId&#x27;] = 1;                  // 默认模型 ID
        live2d_settings[&#x27;modelTexturesId&#x27;] = 87;         // 默认材质 ID
        live2d_settings[&#x27;modelStorage&#x27;] = false;         // 不储存模型 ID
        live2d_settings[&#x27;canCloseLive2d&#x27;] = false;       // 隐藏 关闭看板娘 按钮
        live2d_settings[&#x27;canTurnToHomePage&#x27;] = false;    // 隐藏 返回首页 按钮
        live2d_settings[&#x27;waifuSize&#x27;] = &#x27;600x535&#x27;;        // 看板娘大小
        live2d_settings[&#x27;waifuTipsSize&#x27;] = &#x27;570x150&#x27;;    // 提示框大小
        live2d_settings[&#x27;waifuFontSize&#x27;] = &#x27;30px&#x27;;       // 提示框字体
        live2d_settings[&#x27;waifuToolFont&#x27;] = &#x27;36px&#x27;;       // 工具栏字体
        live2d_settings[&#x27;waifuToolLine&#x27;] = &#x27;50px&#x27;;       // 工具栏行高
        live2d_settings[&#x27;waifuToolTop&#x27;] = &#x27;-60px&#x27;;       // 工具栏顶部边距
        live2d_settings[&#x27;waifuDraggable&#x27;] = &#x27;axis-x&#x27;;    // 拖拽样式
        /* 在 initModel 前添加 */
        initModel(&quot;assets/waifu-tips.json?v=1.4.2&quot;)
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
    </pre></code>
    
    <!-- waifu-tips.js 依赖 JQuery 库 -->
    <script src="assets/jquery.min.js?v=3.3.1"></script>
    
    <!-- 实现拖动效果，需引入 JQuery UI -->
    <script src="assets/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="assets/waifu-tips.min.js?v=1.4.2"></script>
    <script src="assets/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("assets/waifu-tips.json?v=1.4.2")
    </script>
</body>
</html>