mirror of
https://github.com/caojiezi2003/live2d-widget.git
synced 2024-11-10 04:49:47 +00:00
.waifu-tool -> #waifu-tool
This commit is contained in:
StevenJoeZhang
parent
9faf11d55a
commit
5431fe6b59
@ -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
|
||||
|
||||
@ -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>-->
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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
22
waifu.css
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user