live2D简单加载方式
live2D简单加载方式
个人网站优化时接触的一款动画插件,功能还可以,记录下
NO1:下载相关内容链接如下
链接: https://pan.baidu.com/s/1CMmWxnZI2YGoCZA9K4cP6Q 提取码: ekf5
NO2:解压后两个目录,live2d与live2d_api,将其放入项目public/static/home/目录下,如果你的是其他目录,需要修改JS等相关路径以便能正常访问
NO3:使用方式,在html页面内添加元素及相关引用如下:
<!-- 引用liv2D CSS布局 -->
<link rel="stylesheet" type="text/css" href="/static/home/live2d/assets/waifu.css" />
<!-- live2D 元素-->
<div class="waifu">
<div class="waifu-tips"></div>
<canvas id="live2d" width="280" height="300" 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>
<!-- 引用liv2D JS及入口函数-->
<script src="/static/home/live2d/assets/waifu-tips.js"></script>
<script src="/static/home/live2d/assets/live2d.js"></script>
<script type="text/javascript">
initModel("/static/home/live2d/assets/");
</script>
NO4:说明:waifu-tips.js内含有元素点击响应操作,部署完成后点击无反应,将class的点击响应改为监听点击即可,操作如下:
原始处理:
$('.waifu-tool .fui-eye').click(function (){
loadOtherModel();
});
更改为:
$(document).on('click', '.waifu-tool .fui-eye', function(e){
loadOtherModel();
});