• 资源介绍
  • 看板娘是什么意思?大致可以理解为服务人员,在网站中常常是指一种类似于浮窗的动画形象,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
    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模板吧感谢你的支持!

    喜欢 0
    1. 本站所有源码、模板、插件等其他资源,都不包含免费技术服务请大家谅解!
    2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
    3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
    4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
    5. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考《退款规则》!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!

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

    发表评论