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
* https://www.fghrsh.net/post/123.html
* Live2D Widget
* https://github.com/stevenjoezhang/live2d-widget
*/
function loadWidget(waifuPath, apiPath) {
@ -136,10 +136,12 @@ function loadWidget(waifuPath, apiPath) {
}
if (Array.isArray(text)) text = text[Math.floor(Math.random() * text.length)];
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(() => {
sessionStorage.removeItem("waifu-text");
$("#waifu-tips").fadeTo(1000, 0);
tips.classList.remove("waifu-tips-active");
}, timeout);
}
}

View File

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