L2Dwidget二次元看板娘的web用法

打工人的猎奇心:
    发现某些blog网站左下方或者右下方出现的二次元卡通人物或萌萌阿猫,除了萌,还可以监听鼠标的行为,产生互动的现象。为探究竟,打工人开始了行动…

一、看板娘 hexo live2d 演示

二、代码实现

Talk is cheap. Show me the code.

2.1 方式一:cdn

只需要在【页首html代码】中引入L2Dwidget.js即可

<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<!--<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-shizuku@1.0.5/assets/shizuku.model.json",
          "scale": 1
        },
        "display": {
            "position": "right",
            "width": 150,
            "height": 300,
          "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.8,
            "opacityOnHover": 1
        },
        "dialog": {
            "enable": true,
            "script": {
                'tap body': '哎呀!别碰我!',
                'tap face': '人家是在认真写博客哦--前端妹子',
            }
        }
    });
</script>

这里展示部分图:
在这里插入图片描述

2.2 方式二:源码实现

npm install --save hexo-helper-live2d
# 博客文档
https://huaji8.top/post/live2d-plugin-2.0/

# git地址
https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

在这里插入图片描述

2.3 demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Live2d Test Env</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
  <body>
    <p>试试摸摸头和这颗星星会有不同的对话哦</p>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="190" height="180" class="star">
      <polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:yellow;stroke:yellow;stroke-width:1;"/>
    </svg>
    <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: {
              // 每空闲 10 秒钟,显示一条一言
              'every idle 10s': '$hitokoto$',
              // 当触摸到星星图案
              'hover .star': '星星在天上而你在我心里 (*/ω\*)',
              // 当触摸到角色身体
              'tap body': '哎呀!别碰我!',
              // 当触摸到角色头部
              'tap face': '人家已经不是小孩子了!'
            }
          }
        });
    </script>
  </body>
</html>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值