在网页右下角添加一个卡通动漫人物
示例网站
今天就来讲讲如何在自己的博客中添加类似的功能。
一、第一种方法
引入js（L2Dwidget.0.min.js与L2Dwidget.min.js）
<script type="text/javascript" charset="utf-8" async="" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"></script>
<script type="text/javascript">
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，
//(切换模型需要改动)
// "https://unpkg.com/(live2d-widget-model-koharu)@1.0.5/assets/(koharu).model.json"
jsonPath: "./live2dw/live2d-widget-model-shizuku/assets/koharu.model.json",
"scale": 1
},
"display": {
"superSample": 2,
"width": 200, // 宽度
"height": 400, // 高度
"position": "right", // 模型位置
"hOffset": 0, // 纵向偏移
"vOffset": 0 // 横向偏移
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
在你的 index.html 中添加上面的代码，你就可以马上看到属于你的妹子啦
如果你不喜欢这个妹子
那我们就来换个妹子，在 init 方法中更改下面属性：
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
scale: 1
}
jsonPath 格式：unpkg.com/live2d-widg…
其中 jsonPath 就是这个模型的地址，只需要更换其中的 chitose 为对应模型的名称即可，共有22个不同的小可爱供你选择。
这里我就列举九种，其他的各位小伙伴就自己一一去试试吧
chitose
Epsilon2.1
haru_1
haru_2
haruto
hibiki
shizuku
tororo
wanko
使用教程
1.下载模型
2.将下载的文件拷贝到项目中
3.在 index.html 中添加上面的内容
注意：引入的js文件也可以下载到本地，引入本地的js
二、第二种方法
直接添加下面的代码，运行后有7个模型，直接那旁边的按钮就可以切换，但是切换有点慢（第一个模型有70+的衣服，其他模型没试）
效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
</head>
<body>
</body>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</html>
