wordpress子比主题网站添加小猫鼠标交互宠物挂件方法

Jaysun

温馨提示:这篇文章已超过495天没有更新,请注意相关的内容是否还可用!

在逛博客的时候很多网站在左下角有一直会动的小猫,也有可能是会动的卡通人物,总计大概有十几种不同的款式展示。当用户鼠标触碰时,就会做出不同的动作表现。之前也有私信想要这个代码实现,今天就统一分享出来,感兴趣的可以加在网站或网页上了都是可以的,吸引留住访客也是很不错的,

效果图:

1.png

实现步骤

1,选择模型款式

模型款式就是本站左下角看的样子,用了一段时间观察,可能会有一点影响网站的速度,这个还的看网站自身情况基本可忽略。

目前试了几种效果截图出来了如上图,选择自己喜欢的模型代码即可,这里就是写了前面几种名字备注,更多的可以自行替换修改看想要那个。模型名字就是分割的最后一节,如下图:

2.png

代码如下:

    // live2d-widget-model-hijiki 黑猫
    // live2d-widget-model-tororo 白猫
    // live2d-widget-model-haruto 动漫男
    // live2d-widget-model-koharu 动漫女
    // live2d-widget-model-hibiki
    // live2d-widget-model-miku
    // live2d-widget-model-ni-j
    // live2d-widget-model-nico
    // live2d-widget-model-nipsilon
    // live2d-widget-model-nito
    // live2d-widget-model-shizuku
    // live2d-widget-model-tsumiki
    // live2d-widget-model-unitychan
    // live2d-widget-model-wanko 
    // live2d-widget-model-izumi

2,配置模型代码:

模型配置代码中有 jsonPath属性,将下面标红两处模型名都更改一致就算完成了。同时还可以设置宠物的透明度,以及显示位置等均在配置代码中直接可以修改,

示例:jsonPath: “https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json”,

<script>
    L2Dwidget.init({
      // 更换模型地址前后都需要修改
      "model": {
        jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
        "scale": 1
      },
      // 设置位置
      "display": {
        "position": "left",
        "width": 80,
        "height": 100,
        "hOffset": 20,
        "vOffset": 0
      },
      "mobile": {
        "show": true,
        "scale": 1.5
      },
      // 透明度设置
      "react": {
        "opacityDefault": .8,
        "opacityOnHover": 1
      }
    });
  </script>

3,添加CDN仓库地址及完整代码

隐藏内容
评论可见
前往评论


4,具体使用

将完整代码,添加到WordPress网站中,或者html网页的头部head,尾部的合适位置即可生效。


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 14 条评论,1478人围观)
网友昵称:zxc123123
zxc123123 V 普通用户 Sogou Explorer Windows 10 x64 14楼
2023-09-19 来自新疆 回复
可以试试嘛
网友昵称:beichen
beichen V 钻石VIP Google Chrome 116.0.0.0 Mac OS X 10.15.7 13楼
2023-08-24 来自江西 回复
文章不错,写的很好!emmmmm……看不懂怎么破?
网友昵称:beichen
beichen V 钻石VIP Google Chrome 115.0.0.0 Windows 10 x64 12楼
2023-08-05 来自江西 回复
文章不错,写的很好!
网友昵称:hausen
hausen V 普通用户 Google Chrome 115.0.0.0 Windows 10 x64 11楼
2023-08-02 来自广东 回复
感谢分享
网友昵称:letme
letme V 普通用户 Safari Apple iPhone 10楼
2023-05-18 来自上海 回复
凑一眼
网友昵称:lax9920
lax9920 V 普通用户 Google Chrome 111.0.0.0 Windows 10 x64 9楼
2023-04-28 来自湖北 回复
感谢分享
网友昵称:飞雨
飞雨 V 普通用户 Google Chrome 112.0.0.0 Windows 10 x64 8楼
2023-04-27 来自广东 回复
瞅瞅
网友昵称:lalala
lalala V 普通用户 Google Chrome 98.0.4758.102 Windows 10 x64 7楼
2023-04-15 来自广东 回复
瞅瞅
网友昵称:xsj
xsj V 普通用户 Google Chrome 95.0.4638.69 Windows 10 x64 6楼
2023-03-08 来自福建 回复
看看
网友昵称:mxrnhk
mxrnhk V 普通用户 Google Chrome 110.0.0.0 Windows 10 x64 地板
2023-03-05 来自贵州 回复
感谢~

目录[+]

取消
微信二维码
微信二维码
支付宝二维码