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:
parent
9faf11d55a
commit
5431fe6b59
@ -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
|
||||||
|
@ -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>-->
|
||||||
|
@ -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");
|
||||||
|
@ -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
22
waifu.css
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user