caojiezi2003/live2d-widget
1
0
Fork 0
mirror of https://github.com/caojiezi2003/live2d-widget.git synced 2024-11-26 01:49:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

.waifu-tool -> #waifu-tool

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
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

4
demo.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>-->

84
waifu-tips.js
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);
clearTimeout(titleTime); document.title = title[titleIndex].blur;
if (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");

20
waifu-tips.json
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": [

22
waifu.css
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 {