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

New feature: Show toggle button after hiding the widget

Browse Source
This commit is contained in:
StevenJoeZhang 2019-07-14 10:36:53 +08:00
parent 2281944609
commit 05cc012374
2 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
waifu-tips.js
View File

@ -23,10 +23,7 @@ console.log(`
* https://www.fghrsh.net/post/123.html * https://www.fghrsh.net/post/123.html
*/ */
function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") { function loadWidget(waifuPath, apiPath) {
if (screen.width <= 768 || (localStorage.getItem("waifu-display") && new Date().getTime() - localStorage.getItem("waifu-display") <= 86400000)) {
return;
}
localStorage.removeItem("waifu-display"); localStorage.removeItem("waifu-display");
sessionStorage.removeItem("waifu-text"); sessionStorage.removeItem("waifu-text");
$("body").append(`<div id="waifu"> $("body").append(`<div id="waifu">
@ -42,13 +39,14 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
<span class="fa fa-lg fa-times"></span> <span class="fa fa-lg fa-times"></span>
</div> </div>
</div>`); </div>`);
$("#waifu").show().animate({ bottom: 0 }, 3000);
function registerEventListener() { function registerEventListener() {
$("#waifu-tool .fa-comment").click(showHitokoto); $("#waifu-tool .fa-comment").click(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://cdn.jsdelivr.net/gh/GalaxyMimi/CDN/asteroids.js";
}); });
$("#waifu-tool .fa-user-circle").click(loadOtherModel); $("#waifu-tool .fa-user-circle").click(loadOtherModel);
$("#waifu-tool .fa-street-view").click(loadRandModel); $("#waifu-tool .fa-street-view").click(loadRandModel);
@ -65,6 +63,7 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
showMessage("愿你有一天能与重要的人重逢。", 2000, 11); showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
$("#waifu").animate({ bottom: -500 }, 3000, function() { $("#waifu").animate({ bottom: -500 }, 3000, function() {
$("#waifu").hide(); $("#waifu").hide();
$("#waifu-toggle").show().animate({ "margin-left": -50 }, 1000);
}); });
}); });
var re = /x/; var re = /x/;
@ -238,3 +237,33 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
}); });
} }
} }
function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
if (screen.width <= 768) return;
$("body").append(`<div id="waifu-toggle" style="margin-left: -100px;">
<span>看板娘</span>
</div>`);
$("#waifu-toggle").hover(function() {
$("#waifu-toggle").animate({ "margin-left": -30 }, 500);
}, function() {
$("#waifu-toggle").animate({ "margin-left": -50 }, 500);
}).click(function() {
$("#waifu-toggle").animate({ "margin-left": -100 }, 1000, function() {
$("#waifu-toggle").hide();
});
if ($("#waifu-toggle").attr("first-time")) {
loadWidget(waifuPath, apiPath);
$("#waifu-toggle").attr("first-time", false);
}
else {
localStorage.removeItem("waifu-display");
$("#waifu").show().animate({ bottom: 0 }, 3000);
}
});
if (localStorage.getItem("waifu-display") && new Date().getTime() - localStorage.getItem("waifu-display") <= 86400000) {
$("#waifu-toggle").attr("first-time", true).css({ "margin-left": -50 });
}
else {
loadWidget(waifuPath, apiPath);
}
}

20
waifu.css
View File

@ -1,13 +1,27 @@
#waifu-toggle {
position: fixed;
writing-mode: vertical-rl;
bottom: 10px;
left: 0px;
background-color: #fa0;
color: #fff;
border-radius: 5px;
padding: 5px;
font-size: 12px;
width: 60px;
cursor: pointer;
}
#waifu { #waifu {
position: fixed; position: fixed;
bottom: -3px; bottom: -1000px;
left: 0; left: 0;
z-index: 1; z-index: 1;
line-height: 0; line-height: 0;
transition: bottom .3s ease-in-out; transition: transform .3s ease-in-out;
transform: translateY(3px);
} }
#waifu:hover { #waifu:hover {
bottom: 0; transform: translateY(0);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
#waifu { #waifu {