Live2D!为你的网站添加看板娘

转载
admin

首先

首先到大佬的 Github 去下载整理后的 Live2D 代码,毕竟整理后的话好下手 ~
下载后解压代码到你的博客网站根目录去。(目录位置可以自定义)
然后

把解压出来的文件夹改名为:live2d 。
在你博客程序头部文件(header.php)引入界面样式,在 head 标签内插入如下代码

<link rel="stylesheet" href="/live2d/css/live2d.css" />

在你博客程序页脚文件footer.php引入脚本,在最后一个</body>标签前插入如下代码:

<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="360" class="live2d"></canvas>
</div>

<script type="text/javascript">
    var message_Path = '/live2d/'
    var home_Path = 'https://cangshui.net/'  //此处修改为你的域名,必须带斜杠
</script>
<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "/live2d/model/tia/model.json");
</script>

鼠标放在页面某个元素上时,需要 Live2D 看板娘提示的请修改 message.json 文件。
实例

{

    "mouseover": [

        {

            "selector": ".title a",  //此处修改为你页面元素的标签名

            "text": ["要看看 {text} 么?"]  //此处修改为你需要提示的文字

        },

        {

            "selector": "#searchbox",

            "text": ["在找什么东西呢,需要帮忙吗?"]

        }

    ],

    "click": [  //此处是 Live2D 看板娘的触摸事件提示

        {

            "selector": "#landlord #live2d",

            "text": ["不要动手动脚的!快把手拿开~~", "真…真的是不知羞耻!","Hentai!", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗,这里有个变态一直在摸我(ó﹏ò。)"]

        }

    ]

}

清除浏览器缓存,刷新,看看效果吧
Live2D!为你的网站添加看板娘

版权协议须知!

本篇文章来源于 I AM I ,如本文章侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意

543 0 2019-11-03

2020年“微语程序”正式新春公测版发布

版权提示:微语程序免费开源禁止用于商业用途(如有有人执意要...

阅读全文
HTTPS/SSL证书自签源码

这是一款二次元风格向的SSL证书自签工具源码,可随时随地签...

阅读全文
分享个集成缩短防红域名API

这个API是博主空闲时间写的,也比较好维护,但也要且用且珍...

阅读全文
获取网站favicon小图标API接口

使用方法:直接在接口地址后面加上需要获取的图标的网址即可h...

阅读全文
选择表情
  • 默认
  • 护眼
  • 夜晚
  • Serif
  • Sans