amass/live2d-widget
1
0
Fork 0
mirror of https://github.com/stevenjoezhang/live2d-widget.git synced 2024-11-25 14:21:28 +08: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

9
README.md
View File

@ -9,8 +9,8 @@
## 依赖
需要jQuery和font-awesome支持，请确保它们已在页面中加载，例如在`<header>`中加入：
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<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://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘
可以自行在后端api中增加模型：
可以自行在后端api中增加模型（需要自行修改）：
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

4
demo.html
View File

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

20
waifu-tips.json
View File

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

22
waifu.css
View File

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