说明
功能说明：一款完美的网页交互性动画
附加：多套可用模型 + demo
安装
①NPM
npm install --save hexo-helper-live2d②本地下载
使用
1.引入css (头部引入)
<link rel="stylesheet" href="路径/live2d/css/live2d.css" />2.引入js (body尾部引入)
<script type="text/javascript" src="路径/live2d/js/live2d.js"></script>如需点击效果还需引入jquery及以下js
jquery :
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>事件交互:(修改域名为你的域名)
<script type="text/javascript">
var message_Path = '/live2d/'
var home_Path = 'https://www.osuu.net/'
</script>
<script type="text/javascript" src="/live2d/js/message.js"></script>③加载人物
<script type="text/javascript">
loadlive2d("live2d", "/live2d/model/tia/model.json");
</script>④渲染/显示人物 (需要在哪里显示就放到哪里)
<div id="landlord">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="280" height="350" class="live2d"></canvas>
<!--如需隐藏按钮请启用以下按钮-->
<!--<div class="hide-button">隐藏</div>-->
</div>PS1:
如需使页面手机访问时隐藏live2d插件请在写入一下js代码
if (checkmobile() == true) {
//手机时 -可填写让dom结构显示人物块隐藏
} else {
}PS2:
替换模型:
①将需要的模型精灵图复制到 live2d\model\tia\textures 文件夹
②将对应模型moc核心文件复制到 live2d\live2d\model\tia 文件夹
③修改 live2d\model\tia 文件夹内 model.json 文件内模型名字与图片地址
PS3:
鼠标点击提示文字请修改 live2d 文件夹内message.json
示例：
{
"mouseover": [
{
"selector": ".title a", //此处修改为你页面元素的标签名
"text": ["要看看 {text} 么？"] //此处修改为你需要提示的文字
},
{
"selector": "#searchbox",
"text": ["在找什么东西呢，需要帮忙吗？"]
}
],
"click": [ //此处是 Live2D 看板娘的触摸事件提示
{
"selector": "#landlord #live2d",
"text": ["不要动手动脚的！快把手拿开~~", "真…真的是不知羞耻！","Hentai！", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)"]
}
]
}© 版权声明
站内部分资源由网友投稿或收集于网络，若侵犯了您的合法权益，请联系我们删除
THE END
- 最新
- 最热
只看作者