装修博客园-live2d（其一）

声明：live2d的模型和方法都是引用别人的，所以要引用相关js和css
下面代码直接复制即可有效果

<!--左下角live2d效果-->
<!-- waifu-tips.js 依赖 JQuery 库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 实现拖动效果，需引入 JQuery UI -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.min.js"></script>
<script src="https://live2d-cdn.fghrsh.net/assets/1.4.2/live2d.min.js"></script>

<div class="waifu ui-draggable ui-draggable-handle" style="left: 0px; display: none;">
<div class="waifu-tips" style="width: 570px; height: 150px; top: -60px; font-size: 30px; opacity: 0;"></div>
<canvas id="live2d" class="live2d" width="600" height="535"></canvas>
<div class="waifu-tool" style="font-size: 36px;">
<span class="fui-home" style="line-height: 50px; display: none;"></span>
<span class="fui-chat" style="line-height: 50px;"></span>
<span class="fui-eye" style="line-height: 50px;"></span>
<span class="fui-user" style="line-height: 50px;"></span>
<span class="fui-photo" style="line-height: 50px;"></span>
<span class="fui-info-circle" style="line-height: 50px;"></span>
<span class="fui-cross" style="line-height: 50px; display: none;"></span>
</div>
</div>
<script type="text/javascript">
setTimeout(() => {
       /* 可直接修改部分参数 */
        live2d_settings['modelId'] = 6;                  // 默认模型 ID
        live2d_settings['modelTexturesId'] = 9;         // 默认材质 ID
        live2d_settings['modelStorage'] = false;         // 不储存模型 ID
        live2d_settings['canCloseLive2d'] = false;       // 隐藏关闭看板娘按钮
        live2d_settings['canTurnToHomePage'] = false;    // 隐藏返回首页按钮
        live2d_settings['waifuSize'] = '300x267.5';        // 看板娘大小
        live2d_settings['waifuTipsSize'] = '285x75';    // 提示框大小
        live2d_settings['waifuFontSize'] = '15px';       // 提示框字体
        live2d_settings['waifuToolFont'] = '18px';       // 工具栏字体
        live2d_settings['waifuToolLine'] = '25px';       // 工具栏行高
        live2d_settings['waifuToolTop'] = '-60px';       // 工具栏顶部边距
        live2d_settings['waifuDraggable'] = 'axis-x';    // 拖拽样式
        /* 在 initModel 前添加 */
       initModel("https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.json");
}, 600)
</script>

装修博客园-live2d（其一）

猜你喜欢