mirror of
https://github.com/caojiezi2003/live2d-widget.git
synced 2024-11-10 04:49:47 +00:00
Optimize the display of waifu-toggle
This commit is contained in:
parent
12c9e85acd
commit
57f3a76fea
@ -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
10
waifu.css
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user