如何直接在博客或前端html网页上添加L2D网页二次元可动小人用L2Dwidget.js就可以了

原创已于 2024-03-22 21:36:18 修改

· 5.9k 阅读

59 ·

版权

文章标签：

#javascript #博客园美化 #页面美化 #JS插件 #可动小人插件

于 2020-09-02 12:55:34 首次发布

博客专区专栏收录该内容

9 篇文章

订阅专栏

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

在博客园中加入可动小人

我们只需要将代码添加到博客园的
找到设置里面—博客侧边栏公告，在下面的文本框中加入如下代码:

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
  <script>
    //默认使用的萌娘
    L2Dwidget.init({ "model": { jsonPath:
          "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
	       "scale": 1 }, "display": { "position": "right", "width": 110, "height": 150,
	       "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
	       "react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
  </script>

可以修改宽高width和height来修改小人的大小，或者是鼠标移动到小人上的透明度，也可以修改小人在页面出现的位置. 这些就看自己的喜好了!

以下表格中的不同链接显示的是不同的小人

名称	地址url
小帅哥	https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
萌娘	https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
小可爱（女）	https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
小可爱（男）	https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
初音	https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json

案例图:
在这里插入图片描述

页面效果展示

在这里插入图片描述

如果想要更多模型

首先要知道还是要清楚一下修改模型中的jsonPath参数的值到底是什么!

jsonPath:"https://unpkg.com/2D模型名称@1.0.5/assets/模型名称.model.json"

例如：初音未来的2D模型名称为live2d-widget-model-miku，则将以上代码的“2D模型名称”更换为“live2d-widget-model-miku”，将“模型名称”更换为“miku”即可。否则不会出效果

以下是常用模型列表

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16