看板娘系列代码：给网站添加看板娘卡通人物

看板娘是什么意思？大致可以理解为服务人员，在网站中常常是指一种类似于浮窗的动画形象，360模板分享了很多看板娘动画，更多结果可以在本站搜索：“看板娘”；今天会大家带来的是一款看板娘卡通人物形象！

这款看板娘源码，支持两种类型展示，主页展示一种，其他页面展示另外一种动画形象，本源码以上传至github项目，喜欢的可拿去研究研究，关于标签使用大家可以参考《看板娘系列代码：给网站添加一直动态的黑猫或者白猫》底部的标签说明，大致都是差不多的！

演示截图：

直接调用代码1（单独）：

<!--看版娘-->
 <script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
    L2Dwidget.init({"display": {
        "superSample": 2,
        "width": 150,
        "height": 300,
             "position": "left",
                 "hOffset": 0,
        "vOffset": 0
          }
     });
</script>
<!--看版娘-->

直接调用代码2（多种展示）：

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

<script>
    var arr = new Array("shizuku","haruto","koharu");
    var index = Math.floor((Math.random()*(arr.length-1)))
    var liveModule = arr[index]
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-"+liveModule+"@1.0.5/assets/"+liveModule+".model.json",
            "scale":0.5
        },
        "display": {
            "position": "right",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 1
        }
    });
</script>
    </div>

开发者教程参考：下载完整包后打开：“katong/sample/SampleApp1/SampleApp1.html”根据原SampleApp1.html内容重新建立html页面。

更多看板娘代码：

1.更多看板娘代码，请点击→这里←，这里几乎包含了当下所有常见的，下面列举一个不同的用法，支持文字和声音，！

<!-- 2d 前端妹子 start -->
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
  L2Dwidget
    .on('*', (name) => {
      // console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')
    })
    .init({
      dialog: {
        // 开启对话框
        enable: true,
        script: {
          // 当触摸到角色身体
          'tap body': '哎呀！别碰我！',
          // 当触摸到角色头部
          'tap face': '360模板吧欢迎你'
        },
        "mobile":{"show":true}
      }
    });
</script>
<style>
  @media all and (max-width: 900px) {
    #live2d-widget {
      transform-origin: 100% 100% 0;
      transform: scale(0.5);
      -ms-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -webkit-transform: scale(0.5);
      -o-transform: scale(0.5);
    }
  }
</style>
<!-- 2d 前端妹子 end -->

2.打开以后可查看所有类型的看板娘，选择一个自己喜欢的,模仿写法即可

看板娘代码系列近期应该不会出了，这篇文章写的很细了，这里也能找到现在市面上几乎所有看板娘系列代码，好的就这样，360模板吧感谢你的支持！