网站加入看板娘,静态页面引入,一看就会~

看板娘一

1.源码:

<script type="text/javascript" charset="utf-8" src="./L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./L2Dwidget.min.js"></script>
<script type="text/javascript">
    L2Dwidget.init({
      "display": {
        "superSample": 2,
        "width": 200,
        "height": 400,
        "position": "right",
        "hOffset": 0,
        "vOffset": 0
      }
    });
</script>
<style type="text/css">
    #live2dcanvas {
      border: 0 !important;
    }
  </style>

2.引入L2Dwidget.0.min.js和 L2Dwidget.min.js
文件下载地址:
链接：https://pan.baidu.com/s/1QR5CrD0zM-agJmOUSX4aaw
提取码：r0dg

看板娘二:

  <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-koharu@1.0.5/assets/koharu.model.json",
        "scale": 1
      },
      "display": {
        "position": "left", //看板娘的表现位置
        "width": 150,  //小萝莉的宽度
        "height": 300, //小萝莉的高度
        "hOffset": 0,//小萝莉的X偏移量
        "vOffset": -20//小萝莉的Y偏移量
      },
      "mobile": {
        "show": true,
        "scale": 0.5
      },
      "react": {
        "opacityDefault": 0.7,//小萝莉的透明度
        "opacityOnHover": 0.2
      }
    });
  </script>

想了解更多的,可以看看这位大佬的博客
https://www.fghrsh.net/post/123.html

有用的话,记得点个赞吧~~~