L2Dwidget二次元看板娘的web用法

2024-02-19 08:18

本文主要是介绍L2Dwidget二次元看板娘的web用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

一、看板娘 hexo live2d 演示

  • shizuku 看板娘
    在这里插入图片描述

  • 看板娘git

    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>

这篇关于L2Dwidget二次元看板娘的web用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/724071

相关文章

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言:为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文

解读GC日志中的各项指标用法

《解读GC日志中的各项指标用法》:本文主要介绍GC日志中的各项指标用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、基础 GC 日志格式(以 G1 为例)1. Minor GC 日志2. Full GC 日志二、关键指标解析1. GC 类型与触发原因2. 堆

MySQL数据库中ENUM的用法是什么详解

《MySQL数据库中ENUM的用法是什么详解》ENUM是一个字符串对象,用于指定一组预定义的值,并可在创建表时使用,下面:本文主要介绍MySQL数据库中ENUM的用法是什么的相关资料,文中通过代码... 目录mysql 中 ENUM 的用法一、ENUM 的定义与语法二、ENUM 的特点三、ENUM 的用法1

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,:本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta

MySQL之InnoDB存储引擎中的索引用法及说明

《MySQL之InnoDB存储引擎中的索引用法及说明》:本文主要介绍MySQL之InnoDB存储引擎中的索引用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1、背景2、准备3、正篇【1】存储用户记录的数据页【2】存储目录项记录的数据页【3】聚簇索引【4】二

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

Mysql中isnull,ifnull,nullif的用法及语义详解

《Mysql中isnull,ifnull,nullif的用法及语义详解》MySQL中ISNULL判断表达式是否为NULL,IFNULL替换NULL值为指定值,NULLIF在表达式相等时返回NULL,用... 目录mysql中isnull,ifnull,nullif的用法1. ISNULL(expr) → 判

Java中的for循环高级用法

《Java中的for循环高级用法》本文系统解析Java中传统、增强型for循环、StreamAPI及并行流的实现原理与性能差异,并通过大量代码示例展示实际开发中的最佳实践,感兴趣的朋友一起看看吧... 目录前言一、基础篇:传统for循环1.1 标准语法结构1.2 典型应用场景二、进阶篇:增强型for循环2.