网页添加 Live2D 看板娘
我是先参考别人的【点击跳转】博客来做的。不过我发现网上很多人都没有把一些细节写出来,用了别人那里下载的文件后里面的一些跳转链接就跳到他们的页面了。所以我这里写一写如何修改这些跳转链接吧。
1. 首页跳转链接
$('.waifu-tool .fui-home').click(function (){
window.location = '<这个是看板娘点小房子时的跳转链接>';
});
2. 关于跳转链接
$('.waifu-tool .fui-info-circle').click(function (){
window.open('<这个是看板娘点关于时的跳转链接>');
});
3. 点开首页的特殊判断
function waifuWelcome(){
var text;
var SiteIndexUrl = 'https://www.cnblogs.com/janbar/'; // 手动指定主页,页面刷新的时候显示的语句
if (window.location.href == SiteIndexUrl) { // 如果是主页
var now = (new Date()).getHours();
if (now > 23 || now <= 5) {
text = '你是夜猫子呀?这么晚还不睡觉,明天起的来嘛';
} else if (now > 5 && now <= 7) {
text = '早上好!一日之计在于晨,美好的一天就要开始了';
} else if (now > 7 && now <= 11) {
text = '上午好!工作顺利嘛,不要久坐,多起来走动走动哦!';
} else if (now > 11 && now <= 14) {
text = '中午了,工作了一个上午,现在是午餐时间!';
} else if (now > 14 && now <= 17) {
text = '午后很容易犯困呢,今天的运动目标完成了吗?';
} else if (now > 17 && now <= 19) {
text = '傍晚了!窗外夕阳的景色很美丽呢,最美不过夕阳红~';
} else if (now > 19 && now <= 21) {
text = '晚上好,今天过得怎么样?';
} else if (now > 21 && now <= 23) {
text = '已经这么晚了呀,早点休息吧,晚安~';
} else {
text = '嗨~ 快来逗我玩吧!';
}
} else {
if(document.referrer !== ''){
var referrer = document.createElement('a');
referrer.href = document.referrer;
var domain = referrer.hostname.split('.')[1];
if (window.location.hostname == referrer.hostname) {
text = '欢迎阅读<span style="color:#0099cc;">『' + document.title.split(' - ')[0] + '』</span>';
} else if (domain == 'baidu') {
text = 'Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' + referrer.search.split('&wd=')[1].split('&')[0] + '</span> 找到的我吗?';
} else if (domain == 'so') {
text = 'Hello! 来自 360搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' + referrer.search.split('&q=')[1].split('&')[0] + '</span> 找到的我吗?';
} else if (domain == 'google') {
text = 'Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style="color:#0099cc;">『' + document.title.split(' - ')[0] + '』</span>';
} else {
text = 'Hello! 来自 <span style="color:#0099cc;">' + referrer.hostname + '</span> 的朋友';
}
} else {
text = '欢迎阅读<span style="color:#0099cc;">『' + document.title.split(' - ')[0] + '』</span>';
}
}
showMessage(text, 6000);
}
4. 自定义显示语句
var waifuJson = {
"mouseover": [ // 鼠标悬浮在selector表达式的位置,就出现text的结果
{
"selector": ".content-wrap a[href^='https']",
"text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么?"]
},
{
"selector": ".logo",
"text": ["点击前往首页,想回到上一页可以使用浏览器的后退功能哦"]
},
{
"selector": ".social-share",
"text": ["觉得文章有帮助的话,可以分享给更多需要的朋友呢"]
},
{
"selector": "#tor_show",
"text": ["翻页比较麻烦吗,点击可以显示这篇文章的目录呢"]
},
{
"selector": ".menu-follow",
"text": ["利用 feed 订阅器,就能快速知道博客有没有更新了呢"]
},
{
"selector": ".creativecommons",
"text": ["转载前要先注意下文章的 版权协议 呢"]
},
{
"selector": ".comm",
"text": ["想要去评论些什么吗?"]
},
{
"selector": "#qrcode",
"text": ["手机扫一下就能继续看,很方便呢"]
},
{
"selector": "#postcomments",
"text": ["要吐槽些什么呢"]
},
{
"selector": ".rollto",
"text": ["回到开始的地方吧"]
},
{
"selector": "#inpName",
"text": ["该怎么称呼你呢"]
},
{
"selector": "#inpEmail",
"text": ["留下你的邮箱,不然就是无头像人士了"]
},
{
"selector": "#inpHomePage",
"text": ["你的家在哪里呢,好让我去参观参观"]
},
{
"selector": "#txaArticle",
"text": ["认真填写哦,垃圾评论是禁止事项"]
},
{
"selector": ".OwO-logo",
"text": ["要插入一个表情吗"]
},
{
"selector": "#submit",
"text": ["要提交了吗,评论可能需要审核,请耐心等待~"]
},
{
"selector": ".ImageBox",
"text": ["点击图片可以放大呢"]
},
{
"selector": "input[name=q]",
"text": ["找不到想看的内容?搜索看看吧"]
},
{
"selector": ".paging",
"text": ["去下一页看看吧"]
},
{
"selector": "#htmer_time",
"text": ["已经过了这么久了呀,日子过得好快呢", "<span style=\"color:#0099cc;\">2010</span> 是多久来着…<br>1,2,3……有好多好多天呢!"]
},
{
"selector": ".updatelog",
"text": ["这里记录着我搬家的历史呢"]
},
{
"selector": ".aboutme",
"text": ["发现主人出没地点!", "这里有主人的联系方式"]
},
{
"selector": ".donate-qrcode",
"text": ["主人最近在吃土呢,很辛苦的样子。给他一些钱钱吧~"]
},
{
"selector": "#wenkmPlayer div.switch-player",
"text": ["想要听点音乐吗"]
},
{
"selector": "#wenkmPlayer div.volume",
"text": ["在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢"]
},
{
"selector": "#wenkmPlayer div.switch-playlist",
"text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"]
},
{
"selector": "#wenkmPlayer div.switch-ksclrc",
"text": ["有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢"]
},
{
"selector": "#navbar-page-116",
"text": ["要去大佬们的家看看吗?"]
},
{
"selector": "#navbar-page-34",
"text": ["有什么想说的吗?"]
},
{
"selector": "navbar-page-97",
"text": ["这里都是主人的黑历史呢"]
},
{
"selector": "#navbar-page-31",
"text": ["这里有一些关于我家主人的秘密哦,要不要看看呢"]
},
{
"selector": ".waifu-tool .fui-home",
"text": ["回首页看看吧"]
},
{
"selector": ".waifu-tool .fui-eye",
"text": ["要切换看板娘吗?"]
},
{
"selector": ".waifu-tool .fui-chat",
"text": ["猜猜我要说些什么"]
},
{
"selector": ".waifu-tool .fui-user",
"text": ["喜欢换装PLAY吗?"]
},
{
"selector": ".waifu-tool .fui-info-circle",
"text": ["想要知道更多有关我的事吗?"]
},
{
"selector": ".waifu-tool .fui-cross",
"text": ["到了要说再见的时候了吗"]
},
{
"selector": ".waifu-tool .fui-photo",
"text": ["你要给我拍照呀,一二三~茄子~~"]
},
{
"selector": ".waifu #live2d",
"text": ["干嘛呢你,快把手拿开", "鼠…鼠标放错地方了!"]
}
],
"click": [ // 点击某个selector,提示text文本
{
"selector": ".waifu #live2d",
"text": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗,这里有个变态一直在摸我(ó﹏ò。)"]
}
],
"seasons": [ // 特殊日志的提示语
{
"date": "01/01",
"text": "<span style=\"color:#0099cc;\">元旦</span>了呢,新的一年又开始了,今年是{year}年~"
},
{
"date": "02/14",
"text": "又是一年<span style=\"color:#0099cc;\">情人节</span>,{year}年找到对象了嘛~"
},
{
"date": "03/08",
"text": "今天是<span style=\"color:#0099cc;\">妇女节</span>!"
},
{
"date": "03/12",
"text": "今天是<span style=\"color:#0099cc;\">植树节</span>,要保护环境呀"
},
{
"date": "04/01",
"text": "悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节,不要被骗了哦~</span>"
},
{
"date": "05/01",
"text": "今天是<span style=\"color:#0099cc;\">五一劳动节</span>,计划好假期去哪里了吗~"
},
{
"date": "06/01",
"text": "<span style=\"color:#0099cc;\">儿童节</span>了呢,快活的时光总是短暂,要是永远长不大该多好啊…"
},
{
"date": "09/03",
"text": "<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>,铭记历史、缅怀先烈、珍爱和平、开创未来。"
},
{
"date": "09/10",
"text": "<span style=\"color:#0099cc;\">教师节</span>,在学校要给老师问声好呀~"
},
{
"date": "10/01",
"text": "<span style=\"color:#0099cc;\">国庆节</span>,新中国已经成立69年了呢"
},
{
"date": "11/05-11/12",
"text": "今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~"
},
{
"date": "12/20-12/31",
"text": "这几天是<span style=\"color:#0099cc;\">圣诞节</span>,主人肯定又去剁手买买买了~"
}
]
};
5. 指定自己喜欢的模型和材质,首次加载直接显示
// 可以浏览器F12里面看Console里面,每次点切换看板娘的模型和衣服时都会打印当前切换的模型和材质id,找到自己喜欢的,修改js文件即可
if (modelId == null) {
/* 首次访问加载 指定模型 的 指定材质 */
var modelId = 2; // 模型 ID
var modelTexturesId = 49; // 材质 ID
} loadModel(modelId, modelTexturesId);
网页添加 Live2D 看板娘的更多相关文章
- 网页添加Live2D看板娘简易教程
看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想在自己的博客上放一个呆萌的看板娘非 ...
- 网页添加Live2D看板娘
看板娘简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想放一个呆萌的看板娘在博客上 js <script type="text/j ...
- 在网页添加 Live2D 看板娘
只需要将以下代码粘贴到 标签中即可 <!--看板娘--> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jqu ...
- Hexo 添加Live2D看板娘
title: Hexo 添加 Live2D看板娘 二次元什么的最喜欢了[大好きです] 准备 项目地址 live2d模型 部分模型预览 开始 首先进入Hexo博客根目录安装live2d插件 $ npm ...
- Hexo添加Live2D看板娘+模型预览
文章目录 添加和注意事项 模型预览 live2d-widget-model-chitose live2d-widget-model-epsilon2_1 live2d-widget-model-gf ...
- Vue最简单的实现网页Live2D看板娘
Live2D看板娘 前言 二.使用步骤 1.引入 2.设置样式 结尾(后续更新更强的配置看板娘~) 前言 最近想给自己的网页添点新花样,然后就想到了别人的网站都有一些看板娘的玩意儿,看着很舒服,鉴于自 ...
- 文章中左下角的妹子live2d看板娘
关键词: live2d看板娘 自行搜索即可 攻略很多
- 博客美化—添加萌萌的live2D看板娘(不能再简单了)
看着很多博客都有live2D的萌萌哒看板娘,我闲着有空说干就干. 从参考博客的附件中下载资源文件 waifu.css waifu-tips.js live2d.js flat-ui.min.css// ...
- live2d添加网页看板娘
最近逛博客,发现好多博主都加了网页看板娘,简直可爱到血槽空了,赶紧学习模仿改造了一下~ 给博客园的博客也添加了看板娘!!就在右边~喜欢的请打赏我~ 不过因为移植过来比较复杂,就不出教程啦~记得多来调教 ...
随机推荐
- IDEA下Git分支开发
IDEA下Git分支开发使用 1.新建本地开发分支 VCS-->git-->branches-->New Branch,输入分支名字,如branch_test,点击OK后本地开发分支 ...
- 说说ERP软件的系统设计--开源软件诞生8
赤龙ERP系统设计篇--第8篇 用日志记录"开源软件"的诞生 赤龙 ERP 开源地址: 点亮星标,感谢支持,与开发者交流 kzca2000 码云:https://gitee.com ...
- 入门alibaba的EasyExcel
一.关于EasyExcel 1.什么是EasyExcel,有什么作用? EasyExcel是一个基于Java的简单.省内存的读写Excel的开源项目.在尽可能节约内存的情况下支持读写百M的Excel. ...
- Django-配置镜像源,虚拟环境详解
0.配源虚拟 全局配源 阿里云镜像站:https://developer.aliyun.com/mirror/ # 在cmd中操作,查找文件 C:\Users\Administrator>pip ...
- tomcat在linux服务器启动时报错Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x0000000794500000, 576716800, 0) failed; error='Cannot allocate memory' (errno=12)
原因是内存不足了 解决办法:1.top命令查看后台进程,看哪些可以关闭 2.ps -ef |grep tomcat看哪些不用的tomcat起着,也可以从这里关 3.加大这个tomcat的内存, 在ca ...
- Java体系结构介绍
Java技术的核心就是Java虚拟机——所有Java程序都在其上运行,需要Java虚拟机.Java API和Java,class文件的配合,Java程序才能够运行 为什么使用Java 通过网络连接 ...
- Mock简明文档
Mock简明文档 Mock.mock() Mock.mock( requestUrl?, requestType?, template|function(options) ) Mock.mock( t ...
- ribbon源码(2) 负载均衡器
负载均衡器对外提供负载均衡的功能,本质上是是维护当前服务的服务器列表和服务器状态,通过负载均衡算法选取合适的服务器地址. 用户可以通过实现ILoadBalancer来实现自己的负载均衡器,ribbon ...
- Python爬取天气预报,Ta的城市开始降温了
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资 ...
- Mybatis的几种传参方式,你了解吗?
持续原创输出,点击上方蓝字关注我 目录 前言 单个参数 多个参数 使用索引[不推荐] 使用@Param 使用Map POJO[推荐] List传参 数组传参 总结 前言 前几天恰好面试一个应届生,问了 ...