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

Optimize the display of waifu-toggle

Browse Source
This commit is contained in:
Mimi 2019-12-29 20:12:58 +08:00
parent 12c9e85acd
commit 57f3a76fea
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
waifu-tips.js
View File

@ -49,7 +49,7 @@ function loadWidget(waifuPath, apiPath) {
$("#waifu").css({ bottom: -500 }); $("#waifu").css({ bottom: -500 });
setTimeout(() => { setTimeout(() => {
$("#waifu").hide(); $("#waifu").hide();
$("#waifu-toggle").show().animate({ "margin-left": -50 }, 1000); $("#waifu-toggle").addClass("waifu-toggle-active");
}, 3000); }, 3000);
}); });
var devtools = () => {}; var devtools = () => {};
@ -220,17 +220,11 @@ function loadWidget(waifuPath, apiPath) {
function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") { function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
if (screen.width <= 768) return; if (screen.width <= 768) return;
document.body.insertAdjacentHTML("beforeend", `<div id="waifu-toggle" style="margin-left: -100px;"> document.body.insertAdjacentHTML("beforeend", `<div id="waifu-toggle">
<span>看板娘</span> <span>看板娘</span>
</div>`); </div>`);
$("#waifu-toggle").hover(() => { $("#waifu-toggle").click(() => {
$("#waifu-toggle").animate({ "margin-left": -30 }, 500); $("#waifu-toggle").removeClass("waifu-toggle-active");
}, () => {
$("#waifu-toggle").animate({ "margin-left": -50 }, 500);
}).click(() => {
$("#waifu-toggle").animate({ "margin-left": -100 }, 1000, () => {
$("#waifu-toggle").hide();
});
if ($("#waifu-toggle").attr("first-time")) { if ($("#waifu-toggle").attr("first-time")) {
loadWidget(waifuPath, apiPath); loadWidget(waifuPath, apiPath);
$("#waifu-toggle").attr("first-time", false); $("#waifu-toggle").attr("first-time", false);
@ -240,7 +234,10 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
} }
}); });
if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) { if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) {
$("#waifu-toggle").attr("first-time", true).css({ "margin-left": -50 }); $("#waifu-toggle").attr("first-time", true);
setTimeout(() => {
$("#waifu-toggle").addClass("waifu-toggle-active");
}, 0);
} else { } else {
loadWidget(waifuPath, apiPath); loadWidget(waifuPath, apiPath);
} }

10
waifu.css
View File

@ -6,12 +6,22 @@
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
left: 0; left: 0;
margin-left: -100px;
padding: 5px 2px 5px 5px; padding: 5px 2px 5px 5px;
position: fixed; position: fixed;
transition: margin-left 1s;
width: 60px; width: 60px;
writing-mode: vertical-rl; writing-mode: vertical-rl;
} }
#waifu-toggle.waifu-toggle-active {
margin-left: -50px;
}
#waifu-toggle.waifu-toggle-active:hover {
margin-left: -30px;
}
#waifu { #waifu {
bottom: -1000px; bottom: -1000px;
left: 0; left: 0;