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

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

看板娘是什么意思?大致可以理解为服务人员,在网站中常常是指一种类似于浮窗的动画形象,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页面。

SampleApp1

 

更多看板娘代码:

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模板吧感谢你的支持!

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享