Optimize the display of waifu-tips

This commit is contained in:
Mimi 2019-12-29 23:04:20 +08:00
parent b2c44f4f1c
commit 3526cbcbf2
2 changed files with 12 additions and 4 deletions

View File

@ -1,6 +1,6 @@
/* /*
* https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 * Live2D Widget
* https://www.fghrsh.net/post/123.html * https://github.com/stevenjoezhang/live2d-widget
*/ */
function loadWidget(waifuPath, apiPath) { function loadWidget(waifuPath, apiPath) {
@ -136,10 +136,12 @@ function loadWidget(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)];
sessionStorage.setItem("waifu-text", priority); sessionStorage.setItem("waifu-text", priority);
$("#waifu-tips").stop().html(text).fadeTo(200, 1); var tips = document.getElementById("waifu-tips");
tips.innerHTML = text;
tips.classList.add("waifu-tips-active");
messageTimer = setTimeout(() => { messageTimer = setTimeout(() => {
sessionStorage.removeItem("waifu-text"); sessionStorage.removeItem("waifu-text");
$("#waifu-tips").fadeTo(1000, 0); tips.classList.remove("waifu-tips-active");
}, timeout); }, timeout);
} }
} }

View File

@ -57,10 +57,16 @@
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: opacity 1s;
width: 250px; width: 250px;
word-break: break-all; word-break: break-all;
} }
#waifu-tips.waifu-tips-active {
opacity: 1;
transition: opacity .2s;
}
#waifu-tips span { #waifu-tips span {
color: #0099cc; color: #0099cc;
} }