.waifu-tool -> #waifu-tool

This commit is contained in:
StevenJoeZhang 2018-11-14 01:28:01 +08:00
parent 9faf11d55a
commit 5431fe6b59
5 changed files with 81 additions and 60 deletions

View File

@ -9,8 +9,8 @@
## 依赖 ## 依赖
需要jQuery和font-awesome支持请确保它们已在页面中加载例如在`<header>`中加入: 需要jQuery和font-awesome支持请确保它们已在页面中加载例如在`<header>`中加入:
``` ```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
``` ```
## 使用 ## 使用
@ -31,9 +31,10 @@ https://www.fghrsh.net/post/123.html
https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘 https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘
可以自行在后端api中增加模型 可以自行在后端api中增加模型(需要自行修改)
https://github.com/xiazeyu/live2d-widget-models https://github.com/xiazeyu/live2d-widget-models
https://github.com/xiaoski/live2d_models_collection
## 更新 ## 更新
2018年10月31日原API停用请更新至新地址。参考文章 2018年10月31日由fghrsh提供的原API停用请更新至新地址。参考文章
https://www.fghrsh.net/post/170.html https://www.fghrsh.net/post/170.html

View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Live2D 看板娘 v1.2 / Demo</title> <title>Live2D 看板娘 v1.2 / Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
</head> </head>
<body> <body>
<!--<h2><a href="https://www.fghrsh.net/post/123.html" style="color: #38A3DB">Live2D 看板娘 v1.2</a> / Demo</h2>--> <!--<h2><a href="https://www.fghrsh.net/post/123.html" style="color: #38A3DB">Live2D 看板娘 v1.2</a> / Demo</h2>-->

View File

@ -1,3 +1,8 @@
/*
* https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
* https://www.fghrsh.net/post/123.html
*/
String.prototype.render = function(context) { String.prototype.render = function(context) {
var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g, var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g,
strFlag = true, strFlag = true,
@ -22,16 +27,20 @@ String.prototype.render = function(context) {
} }
function initWidget(waifuPath, apiPath) { function initWidget(waifuPath, apiPath) {
if (sessionStorage.getItem("waifu-display") == "none") return; if (screen.width <= 768) return;
if (sessionStorage.getItem("waifu-display")) {
if (new Date().getTime() - sessionStorage.getItem("waifu-display") <= 86400000) return;
else sessionStorage.removeItem("waifu-display");
}
sessionStorage.removeItem("waifu-text"); sessionStorage.removeItem("waifu-text");
$("body").append('<div class="waifu">\ $("body").append('<div id="waifu">\
<div class="waifu-tips"></div>\ <div id="waifu-tips"></div>\
<canvas id="live2d" width="300" height="300" class="live2d"></canvas>\ <canvas id="live2d" width="300" height="300"></canvas>\
<div class="waifu-tool">\ <div id="waifu-tool">\
<span class="fa fa-lg fa-home"></span>\ <span class="fa fa-lg fa-home"></span>\
<span class="fa fa-lg fa-comment"></span>\ <span class="fa fa-lg fa-comment"></span>\
<span class="fa fa-lg fa-paper-plane"></span>\ <span class="fa fa-lg fa-paper-plane"></span>\
<span class="fa fa-lg fa-address-book"></span>\ <span class="fa fa-lg fa-user-circle-o"></span>\
<span class="fa fa-lg fa-street-view"></span>\ <span class="fa fa-lg fa-street-view"></span>\
<span class="fa fa-lg fa-camera-retro"></span>\ <span class="fa fa-lg fa-camera-retro"></span>\
<span class="fa fa-lg fa-info-circle"></span>\ <span class="fa fa-lg fa-info-circle"></span>\
@ -40,11 +49,18 @@ function initWidget(waifuPath, apiPath) {
</div>'); </div>');
var re = /x/, var re = /x/,
OriginTitile = document.title, OriginTitile = document.title,
titleTime, titleTime = null,
title = { titleIndex = 0,
focus: "o(≧∇≦o) 啊咧,又好了……", title = [{
blur: "(●—●) 哎呦,崩溃啦!" blur: "(●—●) 哎呦,崩溃啦!",
}; focus: "o(≧∇≦o) 啊咧,又好了……"
}, {
blur: "(つェ⊂) 看不到我~",
focus: "(*´∇`*) 被发现啦~"
}, {
blur: "(>_<) 我藏好了哦",
focus: "(*´∇`*) 被发现啦~"
}];
console.log(re); console.log(re);
re.toString = function() { re.toString = function() {
showMessage("哈哈,你打开了控制台,是想要看看我的秘密吗?", 6000, 9); showMessage("哈哈,你打开了控制台,是想要看看我的秘密吗?", 6000, 9);
@ -52,50 +68,54 @@ function initWidget(waifuPath, apiPath) {
}; };
$(document).on("visibilitychange", function() { $(document).on("visibilitychange", function() {
if (document.hidden) { if (document.hidden) {
document.title = title.blur; titleIndex = Math.floor(Math.random() * 3);
document.title = title[titleIndex].blur;
if (titleTime) {
clearTimeout(titleTime); clearTimeout(titleTime);
titleTime = null;
}
} else { } else {
document.title = title.focus; document.title = title[titleIndex].focus;
showMessage("哇,你又回来了~", 6000, 9);
titleTime = setTimeout(function() { titleTime = setTimeout(function() {
document.title = OriginTitile; document.title = OriginTitile;
showMessage("哇,你又回来了~", 6000, 9); }, 3000);
}, 1000);
} }
}); });
$(document).on("copy", function() { $(document).on("copy", function() {
showMessage("你都复制了些什么呀,转载要记得加上出处哦", 6000, 9); showMessage("你都复制了些什么呀,转载要记得加上出处哦", 6000, 9);
}); });
$(".waifu-tool .fa-home").click(function() { $("#waifu-tool .fa-home").click(function() {
location.href = "/"; location.href = "/";
}); });
$(".waifu-tool .fa-comment").click(function() { $("#waifu-tool .fa-comment").click(function() {
showHitokoto(); showHitokoto();
}); });
$(".waifu-tool .fa-paper-plane").click(function() { $("#waifu-tool .fa-paper-plane").click(function() {
var s = document.createElement("script"); var s = document.createElement("script");
document.body.appendChild(s); document.body.appendChild(s);
s.src = "https://galaxymimi.com/js/asteroids.js"; s.src = "https://galaxymimi.com/js/asteroids.js";
}); });
$(".waifu-tool .fa-address-book").click(function() { $("#waifu-tool .fa-user-circle-o").click(function() {
loadOtherModel(); loadOtherModel();
}); });
$(".waifu-tool .fa-street-view").click(function() { $("#waifu-tool .fa-street-view").click(function() {
loadRandModel(); loadRandModel();
}); });
$(".waifu-tool .fa-camera-retro").click(function() { $("#waifu-tool .fa-camera-retro").click(function() {
showMessage("照好了嘛,是不是很可爱呢?", 6000, 9); showMessage("照好了嘛,是不是很可爱呢?", 6000, 9);
window.Live2D.captureName = "photo.png"; window.Live2D.captureName = "photo.png";
window.Live2D.captureFrame = true; window.Live2D.captureFrame = true;
}); });
$(".waifu-tool .fa-info-circle").click(function() { $("#waifu-tool .fa-info-circle").click(function() {
window.open("https://github.com/stevenjoezhang/live2d-widget"); window.open("https://github.com/stevenjoezhang/live2d-widget/");
}); });
$(".waifu-tool .fa-times").click(function() { $("#waifu-tool .fa-times").click(function() {
sessionStorage.setItem("waifu-display", "none"); sessionStorage.setItem("waifu-display", new Date().getTime());
showMessage("愿你有一天能与重要的人重逢", 2000, 11); showMessage("愿你有一天能与重要的人重逢", 2000, 11);
setTimeout(function() { $("#waifu").animate({bottom: -1000}, 6000, function() {
$(".waifu").fadeOut(4000); $("#waifu").hide();
}, 1000); });
}); });
(function() { (function() {
var text, var text,
@ -197,16 +217,16 @@ function initWidget(waifuPath, apiPath) {
if (Array.isArray(text)) text = text[Math.floor(Math.random() * text.length)]; if (Array.isArray(text)) text = text[Math.floor(Math.random() * text.length)];
//console.log(text); //console.log(text);
sessionStorage.setItem("waifu-text", priority); sessionStorage.setItem("waifu-text", priority);
$(".waifu-tips").stop().html(text).fadeTo(200, 1); $("#waifu-tips").stop().html(text).fadeTo(200, 1);
messageTimer = setTimeout(function() { messageTimer = setTimeout(function() {
sessionStorage.removeItem("waifu-text"); sessionStorage.removeItem("waifu-text");
$(".waifu-tips").fadeTo(1000, 0); $("#waifu-tips").fadeTo(1000, 0);
}, timeout); }, timeout);
} }
} }
function initModel() { function initModel() {
if (waifuPath === undefined) waifuPath = "waifu-tips.json"; waifuPath = waifuPath || "/waifu-tips.json";
apiURL = apiPath || ""; apiURL = apiPath || "";
var modelId = localStorage.getItem("modelId"), var modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId"); modelTexturesId = localStorage.getItem("modelTexturesId");

View File

@ -1,39 +1,39 @@
{ {
"mouseover": [ "mouseover": [
{ {
"selector": ".waifu #live2d", "selector": "#waifu #live2d",
"text": ["干嘛呢你,快把手拿开", "鼠…鼠标放错地方了!", "你要干嘛呀?", "喵喵喵?", "怕怕(ノ≧∇≦)", "非礼呀!救命!"] "text": ["干嘛呢你,快把手拿开", "鼠…鼠标放错地方了!", "你要干嘛呀?", "喵喵喵?", "怕怕(ノ≧∇≦)", "非礼呀!救命!"]
}, },
{ {
"selector": ".waifu-tool .fa-home, .menu-item-home", "selector": "#waifu-tool .fa-home, .menu-item-home",
"text": ["点击前往首页,想回到上一页可以使用浏览器的后退功能哦", "点它就可以回到首页啦!", "回首页看看吧"] "text": ["点击前往首页,想回到上一页可以使用浏览器的后退功能哦", "点它就可以回到首页啦!", "回首页看看吧"]
}, },
{ {
"selector": ".waifu-tool .fa-comment", "selector": "#waifu-tool .fa-comment",
"text": ["猜猜我要说些什么?", "我从青蛙王子那里听到了不少人生经验"] "text": ["猜猜我要说些什么?", "我从青蛙王子那里听到了不少人生经验"]
}, },
{ {
"selector": ".waifu-tool .fa-paper-plane", "selector": "#waifu-tool .fa-paper-plane",
"text": ["要不要来玩飞机大战?", "这个按钮上写着“不要点击”", "怎么,你想来和我玩个游戏?"] "text": ["要不要来玩飞机大战?", "这个按钮上写着“不要点击”", "怎么,你想来和我玩个游戏?"]
}, },
{ {
"selector": ".waifu-tool .fa-address-book", "selector": "#waifu-tool .fa-address-book",
"text": ["要见见我的姐姐嘛", "要切换看板娘吗?"] "text": ["要见见我的姐姐嘛", "要切换看板娘吗?"]
}, },
{ {
"selector": ".waifu-tool .fa-street-view", "selector": "#waifu-tool .fa-street-view",
"text": ["喜欢换装 PLAY 吗?", "这次要扮演什么呢"] "text": ["喜欢换装 PLAY 吗?", "这次要扮演什么呢"]
}, },
{ {
"selector": ".waifu-tool .fa-camera-retro", "selector": "#waifu-tool .fa-camera-retro",
"text": ["你要给我拍照呀?一二三~茄子~", "要不,我们来合影吧"] "text": ["你要给我拍照呀?一二三~茄子~", "要不,我们来合影吧"]
}, },
{ {
"selector": ".waifu-tool .fa-info-circle", "selector": "#waifu-tool .fa-info-circle",
"text": ["想要知道更多关于我的事么?", "这里记录着我搬家的历史呢"] "text": ["想要知道更多关于我的事么?", "这里记录着我搬家的历史呢"]
}, },
{ {
"selector": ".waifu-tool .fa-times", "selector": "#waifu-tool .fa-times",
"text": ["到了要说再见的时候了吗", "呜呜QAQ 后会有期", "不要抛弃我呀"] "text": ["到了要说再见的时候了吗", "呜呜QAQ 后会有期", "不要抛弃我呀"]
}, },
{ {
@ -211,7 +211,7 @@
], ],
"click": [ "click": [
{ {
"selector": ".waifu #live2d", "selector": "#waifu #live2d",
"text": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗这里有个变态一直在摸我(ó﹏ò。)", "不要摸我了,我会告诉老婆来打你的!", "干嘛动我呀!小心我咬你!", "别摸我,有什么好摸的!"] "text": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗这里有个变态一直在摸我(ó﹏ò。)", "不要摸我了,我会告诉老婆来打你的!", "干嘛动我呀!小心我咬你!", "别摸我,有什么好摸的!"]
} }
],"seasons": [ ],"seasons": [

View File

@ -1,21 +1,21 @@
.waifu { #waifu {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
line-height: 0; line-height: 0;
transition: all .3s ease-in-out; transition: transform .3s ease-in-out;
transform: translateY(3px); transform: translateY(3px);
} }
.waifu:hover { #waifu:hover {
transform: translateY(0); transform: translateY(0);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.waifu { #waifu {
display: none; display: none;
} }
} }
.waifu-tips { #waifu-tips {
opacity: 0; opacity: 0;
width: 250px; width: 250px;
min-height: 70px; min-height: 70px;
@ -37,20 +37,20 @@
animation-name: shake; animation-name: shake;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
.waifu #live2d { #waifu #live2d {
position: relative; position: relative;
cursor: grab; cursor: grab;
cursor: -webkit-grab; cursor: -webkit-grab;
cursor: -o-grab; cursor: -o-grab;
cursor: -ms-grab; cursor: -ms-grab;
} }
.waifu #live2d:active { #waifu #live2d:active {
cursor: grabbing; cursor: grabbing;
cursor: -webkit-grabbing; cursor: -webkit-grabbing;
cursor: -o-grabbing; cursor: -o-grabbing;
cursor: -ms-grabbing; cursor: -ms-grabbing;
} }
.waifu-tool { #waifu-tool {
color: #aaa; color: #aaa;
top: 70px; top: 70px;
right: -10px; right: -10px;
@ -58,10 +58,10 @@
opacity: 0; opacity: 0;
transition: opacity 1s; transition: opacity 1s;
} }
.waifu:hover .waifu-tool { #waifu:hover #waifu-tool {
opacity: 1; opacity: 1;
} }
.waifu-tool span { #waifu-tool span {
display: block; display: block;
cursor: pointer; cursor: pointer;
line-height: 26px; line-height: 26px;
@ -69,7 +69,7 @@
color: #5b6c7d; color: #5b6c7d;
transition: color .3s; transition: color .3s;
} }
.waifu-tool span:hover { #waifu-tool span:hover {
color: #0684bd;/* #34495e */ color: #0684bd;/* #34495e */
} }
@keyframes shake { @keyframes shake {