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

其实就是在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
posted @ 2025-05-15 15:18  Dy大叔  阅读(88)  评论(0)    收藏  举报