博客中添加动漫妹子,总有一个适合你,嘿嘿嘿!

常喜欢逛博客的你,是不是会碰到一些有意思的东西,有很多博客网站都有一个卡通人物,它一直盯着你鼠标移动的地方,俗称看板娘。
在这里插入图片描述

在这里插入图片描述

是不是好想拥有她?

今天就来讲讲如何在自己的博客中添加类似的功能。如果你的数学知识和创造力比较好的话,可以自己手写一个简单的动画人物,当然这样的人比较少,毕竟这也是一个很耗时的过程,并且效果比较单一。

手写不行就来用现成的,业界已有一些比较成熟的方案,比较受欢迎的就是 L2Dwidget

如何使用

急速添加

<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": 200,   // 宽度
        "height": 400,  // 高度
        "position": "right",  // 模型位置
        "hOffset": 0,  // 纵向偏移
        "vOffset": 0   // 横向偏移
    },
    "mobile": {
    	"show": false  // 是否在移动设备上显示
	}
});
</script>

在你的 index.html 中添加上面的代码,你就可以马上看到属于你的妹子啦。

什么?这个不是你喜欢的类型?

那我们就来换个妹子,在 init 方法中添加下面的属性:

"model": {
    jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
    scale: 1
},

jsonPath 格式:https://unpkg.com/live2d-widget-model-模型名称@版本号/assets/模型名称.model.json

其中 jsonPath 就是这个模型的地址,只需要更换其中的 chitose 为对应模型的名称即可,共有22个不同的小可爱供你选择。

chitose
在这里插入图片描述

Epsilon2.1

在这里插入图片描述

Gantzert_Felixander

在这里插入图片描述

haru_1

在这里插入图片描述

haru_2

在这里插入图片描述

haruto
在这里插入图片描述

hibiki

在这里插入图片描述

hijiki

在这里插入图片描述

izumi
在这里插入图片描述

koharu

在这里插入图片描述

miku
在这里插入图片描述

nico

在这里插入图片描述

nietzsche

在这里插入图片描述

ni-j

在这里插入图片描述

nipsilon

在这里插入图片描述

nito

在这里插入图片描述

shizuku

在这里插入图片描述

tororo

在这里插入图片描述

tsumiki

在这里插入图片描述

unitychan

在这里插入图片描述

wanko

在这里插入图片描述

z16

在这里插入图片描述

我自己也去把每个都试了下,有一些小可爱的 jsonPath 不存在了,所以无法使用。

欢迎访问我的个人网站(相信你会喜欢上我的风格):www.dengzhanyong.com
关注我的个人公众号【前端筱园】,不错过我的每一篇推送

不用担心,还可以使用线下版本

步骤一:下载资源文件【关注公众号“前端筱园”,回复 “看板娘” 即可下载】

**步骤二:**将下载的文件拷贝到项目中

**步骤三:**在 index.html 中添加下面的内容

<script src="/live2dw/lib/L2Dwidget.min.js"></script>

**步骤四:**执行初始化模型

window.L2Dwidget.init({
    tagMode: false,
    debug: false,
    model: {
        jsonPath: '/live2dw/live2d-widget-model-epsilon2_1/assets/Epsilon2.1.model.json',
        scale: 1
    },
    display: {
        position: 'right',
        width: 150,
        height: 300,
        hOffset: 100,
        vOffset: 50
    },
    mobile: { show: true },
    log: false  
})

**注意点:**模型路径是相对于 live2dw 文件夹的路径,并不是你执行初始化的代码所在文件的相对路径。

这是因为你在初始化时,将模型路径以字符串的形式传进去,真正加载模型资源是在 /live2dw/lib/L2Dwidget.min.js 中进行的。

在vue或react中使用

在vue和react中使用也是相当的简单,步骤一二三保持不变,初始化过程可以写在 index.html 中,当然更多的是写在 App.vueapp.js 中。

  • vue中,在组件的 created 生命周期中初始化
  • react中,在组件的 componentDidMount 生命周期中初始化

Hexo中使用

步骤一:安装模块

# npm install --save hexo-helper-live2d

步骤二:下载模型

格式:npm install 模型名字

# npm install live2d-widget-model-hibiki

步骤三:添加配置

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  tagMode: false # 标签模式, 是否仅替换 live2dtag标签而非插入到所有页面中
  log: false 
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true 
  react:
    opacity: 1
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端筱园

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值