L2Dwidget二次元看板娘的web用法_l2dwidget官网-CSDN博客

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

一、看板娘 hexo live2d 演示

shizuku 看板娘

https://github.com/raoenhui/live2d-example

在这里插入图片描述

看板娘文档

https://juejin.im/post/6844904032423641096

二、代码实现

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>