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

发表评论

后才能评论

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

本站部分资源需要解压密码,如需解压密码,解压密码则为“www.360mb.net”。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源