前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >给网站左下角加个live2d

给网站左下角加个live2d

作者头像
Blank.
发布2023-04-27 19:52:33
8710
发布2023-04-27 19:52:33
举报
文章被收录于专栏:Blank
效果演示

参考本站即可

图片[1]-给网站左下角加个live2d-小Q博客
图片[1]-给网站左下角加个live2d-小Q博客

制作教程

1.先下载所需文件:

https://wwkm.lanzouf.com/irqig0tl9wkh

2.将下方代码引入进网页的body中即可

注意代码中的文件路径,如果不在同级则需要自己修改一下,还有就是我把消息框和工具框都给注释了,需要自己删除注释并调整相应的大小即可

代码语言:javascript
复制
<!--css引入-->
<link rel="stylesheet" type="text/css" href="assets/waifu.css"/>
<!-- 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"] = "160x160";        // 看板娘大小
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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果演示
  • 制作教程
相关产品与服务
腾讯云 BI
腾讯云 BI(Business Intelligence,BI)提供从数据源接入、数据建模到数据可视化分析全流程的BI能力,帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计,使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程,并支持报表的分享、推送等企业协作场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档