JavaScript：网页添加L2Dwidget.js看板娘

Dy大叔

于 2025-05-15 15:18:42 发布

阅读量324

点赞数 7

分类专栏：前端开发记录文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/xiediy/article/details/147847880

版权

前端开发记录专栏收录该内容

34 篇文章

订阅专栏

其实就是在html文件中的head标签中添加如下js代码即可

<!-- L2Dwidget.js L2D网页动画人物 -->
<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, "hHeadPos":0.5, "vHeadPos":0.618 },
        "display": { "position": "right", "width": 100, "height": 200, "hOffset": 0, "vOffset": 0 }, 
        "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } 
        });
</script>

查看效果

更换src的链接，更换不同的模型：

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

其他可选的模型：

名称	地址
小帅哥	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