网页添加 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添加网页看板娘
最近逛博客,发现好多博主都加了网页看板娘,简直可爱到血槽空了,赶紧学习模仿改造了一下~ 给博客园的博客也添加了看板娘!!就在右边~喜欢的请打赏我~ 不过因为移植过来比较复杂,就不出教程啦~记得多来调教 ...
随机推荐
- linux基础一(目录结构)
一.linux目录结构 1.根目录/下 bin:用户二进制文件,常用命令都在此目录下 sbin;这个目录下的linux命令通常由系统管理员使用 etc:包含所有程序所需的配置文件,以及服务的启动文件 ...
- Solaris – configure ftp server
SUN Solaris FTPSUN Solaris comes with ftp daemon based on WU-FTPd Washington University project.Whil ...
- jmeter压测以及用Badboy录脚本
一.压测时的基本配置: 1.设置线程数.延迟几秒.循环次数打勾表示一直去循环.调度器打勾可以填写持续时间.启动时间等 线程数:就是并发的用户数 N Ramp-Up Period(in second ...
- linux如何把普通用户添加到sudo组
sudo原理:运行命令时,系统检查/etc/sudoers 配置文件,看这个用户是否有执行sudo的权限,如果有权限,系统要求输入用户自己的密码,如果密码输入正确,系统会以root身份运行 passw ...
- [程序员代码面试指南]二叉树问题-判断t1树是否包含t2树的全部拓扑结构、[LeetCode]572. 另一个树的子树
题目1 解 先序遍历树1,判断树1以每个节点为根的子树是否包含树2的拓扑结构. 时间复杂度:O(M*N) 注意区分判断总体包含关系.和判断子树是否包含树2的函数. 代码 public class Ma ...
- JavaCV与OpenCV的区别和使用中遇到的问题
写这篇随笔的原因是因为我用了JavaCV一段时间后项目情况糟透了,可能大家很熟悉OpenCV,也有一部分人熟悉JavaCV,但是我相信真正把JavaCV用到生产上的不是太多. 我参与图片处理项目快一个 ...
- pxe+kickstart无人值守批量安装linux
一.原理和概念: 1.PXE: PXE 并不是一种安装方式,而是一种引导的方式.进行 PXE 安装的必要条件是要安装的计算机中包含一个 PXE 支持的网卡(NIC),即网卡中必须要有 ...
- Java 里的 for (;;) 与 while (true),哪个更快?
在 JDK8u 的 jdk 项目下做个很粗略的搜索: mymbp:/Users/me/workspace/jdk8u/jdk/src$ egrep -nr "for \\(\\s?;\\s? ...
- 测试必备:jmeter测试http协议接口的各种传参方式
测试接口,postman和jmeter是用得最频繁的工具,特别是jmeter,支持很多种协议,且除了测功能,还能做自动化测试和性能测试.下面主要介绍jmeter测试http协议接口的用法,包含get, ...
- Java Web学习(三)数据加密方式详解
一.对称加密 定义:加密和解密使用相同密钥的算法. 常见的有DES.3DES.AES.PBE等加密算法,这几种算法安全性依次是逐渐增强的. DES加密 特点:简便.密钥长度比较短. import ja ...