diff --git a/autoload.js b/autoload.js
index e9ae7e93..2d65c781 100644
--- a/autoload.js
+++ b/autoload.js
@@ -1,6 +1,5 @@
// 注意：live2d_path 参数应使用绝对路径
-const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
-//const live2d_path = "/live2d-widget/";
+const live2d_path = "https://cdn.jsdelivr.net/gh/PFiS1737/live2d-widget@latest/";
// 封装异步加载资源的方法
function loadExternalResource(url, type) {
@@ -11,6 +10,7 @@ function loadExternalResource(url, type) {
tag = document.createElement("link");
tag.rel = "stylesheet";
tag.href = url;
+ tag.id = "live2d_css";
}
else if (type === "js") {
tag = document.createElement("script");
@@ -26,14 +26,15 @@ function loadExternalResource(url, type) {
// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
+ // "768"为最低显示宽度
Promise.all([
- loadExternalResource(live2d_path + "waifu.css", "css"),
+ loadExternalResource(live2d_path + "waifu_left.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
initWidget({
waifuPath: live2d_path + "waifu-tips.json",
- //apiPath: "https://live2d.fghrsh.net/api/",
+ // apiPath: "https://live2d.fghrsh.net/api/",
cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
});
});
diff --git a/waifu-tips.js b/waifu-tips.js
old mode 100755
new mode 100644
index 1e83f544..edcfa17a
--- a/waifu-tips.js
+++ b/waifu-tips.js
@@ -28,6 +28,8 @@ function loadWidget(config) {
+
+
`);
// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
@@ -57,9 +59,18 @@ function loadWidget(config) {
}
}, 1000);
- (function registerEventListener() {
- document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto);
- document.querySelector("#waifu-tool .fa-paper-plane").addEventListener("click", () => {
+ (function () { // 根据位置加载
+ if (localStorage.getItem("Live2DPlace") === "left") {
+ document.getElementById("live2d-go-left").style.display = "none";
+ } else if (localStorage.getItem("Live2DPlace") === "right") {
+ document.getElementById("live2d-go-right").style.display = "none";
+ document.getElementById("live2d_css").href = live2d_path + "waifu_right.css";
+ }
+ })();
+
+ (function registerEventListener() { // 工具栏菜单效果
+ document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto); // 一言API对话
+ document.querySelector("#waifu-tool .fa-paper-plane").addEventListener("click", () => { // 飞机大战（雾）
if (window.Asteroids) {
if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = [];
window.ASTEROIDSPLAYERS.push(new Asteroids());
@@ -69,17 +80,17 @@ function loadWidget(config) {
document.head.appendChild(script);
}
});
- document.querySelector("#waifu-tool .fa-user-circle").addEventListener("click", loadOtherModel);
- document.querySelector("#waifu-tool .fa-street-view").addEventListener("click", loadRandModel);
- document.querySelector("#waifu-tool .fa-camera-retro").addEventListener("click", () => {
+ document.querySelector("#waifu-tool .fa-user-circle").addEventListener("click", loadOtherModel); // 切换模型
+ document.querySelector("#waifu-tool .fa-street-view").addEventListener("click", loadRandModel); // 切换材质
+ document.querySelector("#waifu-tool .fa-camera-retro").addEventListener("click", () => { // 输出照片
showMessage("照好了嘛，是不是很可爱呢？", 6000, 9);
- Live2D.captureName = "photo.png";
+ Live2D.captureName = "photo.png"; // 输出照片的名字
Live2D.captureFrame = true;
});
- document.querySelector("#waifu-tool .fa-info-circle").addEventListener("click", () => {
- open("https://github.com/stevenjoezhang/live2d-widget");
+ document.querySelector("#waifu-tool .fa-info-circle").addEventListener("click", () => { // 关于页转跳
+ open("https://github.com/stevenjoezhang/live2d-widget"); //关于页链接
});
- document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => {
+ document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => { // 关闭看板娘
localStorage.setItem("waifu-display", Date.now());
showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
document.getElementById("waifu").style.bottom = "-500px";
@@ -88,7 +99,33 @@ function loadWidget(config) {
document.getElementById("waifu-toggle").classList.add("waifu-toggle-active");
}, 3000);
});
- const devtools = () => {};
+ document.querySelector("#waifu-tool .fa-chevron-right").addEventListener("click", () => { // 切换看板娘位置（左 => 右）
+ localStorage.setItem("Live2DPlace", "right");
+ showMessage("耶，可以去右边了呢～。", 2000, 11);
+ document.getElementById("waifu").style.bottom = "-500px";
+ document.getElementById("waifu-toggle").style.display = "none";
+ setTimeout(() => {
+ document.getElementById("live2d_css").href = live2d_path + "waifu_right.css";
+ document.getElementById("waifu").style.bottom = "0px";
+ document.getElementById("live2d-go-right").style.display = "none";
+ document.getElementById("live2d-go-left").style.display = "block";
+ }, 3000);
+ setTimeout('document.getElementById("waifu-toggle").style.display = "inline"',6000);
+ });
+ document.querySelector("#waifu-tool .fa-chevron-left").addEventListener("click", () => { // 切换看板娘位置（左 <= 右）
+ localStorage.setItem("Live2DPlace", "left");
+ showMessage("耶，可以去左边了呢～。", 2000, 11);
+ document.getElementById("waifu").style.bottom = "-500px";
+ document.getElementById("waifu-toggle").style.display = "none";
+ setTimeout(() => {
+ document.getElementById("live2d_css").href = live2d_path + "waifu_left.css";
+ document.getElementById("waifu").style.bottom = "0px";
+ document.getElementById("live2d-go-left").style.display = "none";
+ document.getElementById("live2d-go-right").style.display = "block";
+ }, 3000);
+ setTimeout('document.getElementById("waifu-toggle").style.display = "inline"',6000);
+ });
+ const devtools = () => { };
console.log("%c", devtools);
devtools.toString = () => {
showMessage("哈哈，你打开了控制台，是想要看看我的小秘密吗？", 6000, 9);
@@ -127,8 +164,7 @@ function loadWidget(config) {
showMessage(text, 7000, 8);
})();
- function showHitokoto() {
- // 增加 hitokoto.cn 的 API
+ function showHitokoto() { // 增加 hitokoto.cn 的 API
fetch("https://v1.hitokoto.cn")
.then(response => response.json())
.then(result => {
@@ -161,9 +197,9 @@ function loadWidget(config) {
let modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId");
if (modelId === null) {
- // 首次访问加载 指定模型 的 指定材质
- modelId = 1; // 模型 ID
- modelTexturesId = 53; // 材质 ID
+ // 首次访问时加载 指定模型 的 指定材质
+ modelId = 2; // 模型 ID
+ modelTexturesId = 39; // 材质 ID
}
loadModel(modelId, modelTexturesId);
fetch(waifuPath)
@@ -229,8 +265,8 @@ function loadWidget(config) {
loadlive2d("live2d", `${cdnPath}model/${target}/index.json`);
showMessage("我的新衣服好看嘛？", 4000, 10);
} else {
- // 可选 "rand"(随机), "switch"(顺序)
- fetch(`${apiPath}rand_textures/?id=${modelId}-${modelTexturesId}`)
+ // 材质加载方式, 可选 "rand"(随机), "switch"(顺序)
+ fetch(`${apiPath}switch_textures/?id=${modelId}-${modelTexturesId}`)
.then(response => response.json())
.then(result => {
if (result.textures.id === 1 && (modelTexturesId === 1 || modelTexturesId === 0)) showMessage("我还没有其他衣服呢！", 4000, 10);
diff --git a/waifu-tips.json b/waifu-tips.json
index 78eab55a..46dfc66d 100755
--- a/waifu-tips.json
+++ b/waifu-tips.json
@@ -23,6 +23,12 @@
}, {
"selector": "#waifu-tool .fa-times",
"text": ["到了要说再见的时候了吗？", "呜呜 QAQ 后会有期……", "不要抛弃我呀……", "我们，还能再见面吗……", "哼，你会后悔的！"]
+ }, {
+ "selector": "#waifu-tool .fa-chevron-left",
+ "text": ["可以去左边吗？", "要搬家吗？"]
+ }, {
+ "selector": "#waifu-tool .fa-chevron-right",
+ "text": ["可以去左右吗？", "要搬家吗？"]
}, {
"selector": ".menu-item-home a",
"text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦。", "点它就可以回到首页啦！", "回首页看看吧。"]
diff --git a/waifu.css b/waifu_left.css
old mode 100755
new mode 100644
similarity index 99%
rename from waifu.css
rename to waifu_left.css
index 293e4922..3ce4b3ea
--- a/waifu.css
+++ b/waifu_left.css
@@ -12,6 +12,7 @@
transition: margin-left 1s;
width: 60px;
writing-mode: vertical-rl;
+ z-index: 1000;
}
#waifu-toggle.waifu-toggle-active {
@@ -30,7 +31,7 @@
position: fixed;
transform: translateY(3px);
transition: transform .3s ease-in-out, bottom 3s ease-in-out;
- z-index: 1;
+ z-index: 1000;
}
#waifu:hover {
@@ -82,7 +83,7 @@
opacity: 0;
position: absolute;
right: -10px;
- top: 70px;
+ top: 55px;
transition: opacity 1s;
}
diff --git a/waifu_right.css b/waifu_right.css
new file mode 100644
index 00000000..5372aabd
--- /dev/null
+++ b/waifu_right.css
@@ -0,0 +1,307 @@
+#waifu-toggle {
+ background-color: #fa0;
+ border-radius: 5px;
+ bottom: 66px;
+ color: #fff;
+ cursor: pointer;
+ font-size: 12px;
+ right: 0;
+ margin-right: -100px;
+ padding: 5px 2px 5px 5px;
+ position: fixed;
+ transition: margin-right 1s;
+ width: 60px;
+ writing-mode: vertical-lr;
+ z-index: 1000;
+}
+
+#waifu-toggle.waifu-toggle-active {
+ margin-right: -40px;
+}
+
+#waifu-toggle.waifu-toggle-active:hover {
+ margin-right: -20px;
+}
+
+#waifu {
+ bottom: -1000px;
+ right: 0;
+ line-height: 0;
+ margin-bottom: -10px;
+ position: fixed;
+ transform: translateY(3px);
+ transition: transform .3s ease-in-out, bottom 3s ease-in-out;
+ z-index: 1000;
+}
+
+#waifu:hover {
+ transform: translateY(0);
+}
+
+#waifu-tips {
+ animation: shake 50s ease-in-out 5s infinite;
+ background-color: rgba(236, 217, 188, .5);
+ border: 1px solid rgba(224, 186, 140, .62);
+ border-radius: 12px;
+ box-shadow: 0 3px 15px 2px rgba(191, 158, 118, .2);
+ font-size: 14px;
+ line-height: 24px;
+ margin: -30px 20px;
+ min-height: 70px;
+ opacity: 0;
+ overflow: hidden;
+ 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;
+}
+
+#waifu #live2d {
+ cursor: grab;
+ height: 300px;
+ position: relative;
+ width: 300px;
+}
+
+#waifu #live2d:active {
+ cursor: grabbing;
+}
+
+#waifu-tool {
+ color: #aaa;
+ opacity: 0;
+ position: absolute;
+ left: 10px;
+ top: 55px;
+ transition: opacity 1s;
+}
+
+#waifu:hover #waifu-tool {
+ opacity: 1;
+}
+
+#waifu-tool span {
+ color: #7b8c9d;
+ cursor: pointer;
+ display: block;
+ line-height: 30px;
+ text-align: center;
+ transition: color .3s;
+}
+
+#waifu-tool span:hover {
+ color: #0684bd; /* #34495e */
+}
+
+@keyframes shake {
+ 2% {
+ transform: translate(.5px, -1.5px) rotate(-.5deg);
+ }
+
+ 4% {
+ transform: translate(.5px, 1.5px) rotate(1.5deg);
+ }
+
+ 6% {
+ transform: translate(1.5px, 1.5px) rotate(1.5deg);
+ }
+
+ 8% {
+ transform: translate(2.5px, 1.5px) rotate(.5deg);
+ }
+
+ 10% {
+ transform: translate(.5px, 2.5px) rotate(.5deg);
+ }
+
+ 12% {
+ transform: translate(1.5px, 1.5px) rotate(.5deg);
+ }
+
+ 14% {
+ transform: translate(.5px, .5px) rotate(.5deg);
+ }
+
+ 16% {
+ transform: translate(-1.5px, -.5px) rotate(1.5deg);
+ }
+
+ 18% {
+ transform: translate(.5px, .5px) rotate(1.5deg);
+ }
+
+ 20% {
+ transform: translate(2.5px, 2.5px) rotate(1.5deg);
+ }
+
+ 22% {
+ transform: translate(.5px, -1.5px) rotate(1.5deg);
+ }
+
+ 24% {
+ transform: translate(-1.5px, 1.5px) rotate(-.5deg);
+ }
+
+ 26% {
+ transform: translate(1.5px, .5px) rotate(1.5deg);
+ }
+
+ 28% {
+ transform: translate(-.5px, -.5px) rotate(-.5deg);
+ }
+
+ 30% {
+ transform: translate(1.5px, -.5px) rotate(-.5deg);
+ }
+
+ 32% {
+ transform: translate(2.5px, -1.5px) rotate(1.5deg);
+ }
+
+ 34% {
+ transform: translate(2.5px, 2.5px) rotate(-.5deg);
+ }
+
+ 36% {
+ transform: translate(.5px, -1.5px) rotate(.5deg);
+ }
+
+ 38% {
+ transform: translate(2.5px, -.5px) rotate(-.5deg);
+ }
+
+ 40% {
+ transform: translate(-.5px, 2.5px) rotate(.5deg);
+ }
+
+ 42% {
+ transform: translate(-1.5px, 2.5px) rotate(.5deg);
+ }
+
+ 44% {
+ transform: translate(-1.5px, 1.5px) rotate(.5deg);
+ }
+
+ 46% {
+ transform: translate(1.5px, -.5px) rotate(-.5deg);
+ }
+
+ 48% {
+ transform: translate(2.5px, -.5px) rotate(.5deg);
+ }
+
+ 50% {
+ transform: translate(-1.5px, 1.5px) rotate(.5deg);
+ }
+
+ 52% {
+ transform: translate(-.5px, 1.5px) rotate(.5deg);
+ }
+
+ 54% {
+ transform: translate(-1.5px, 1.5px) rotate(.5deg);
+ }
+
+ 56% {
+ transform: translate(.5px, 2.5px) rotate(1.5deg);
+ }
+
+ 58% {
+ transform: translate(2.5px, 2.5px) rotate(.5deg);
+ }
+
+ 60% {
+ transform: translate(2.5px, -1.5px) rotate(1.5deg);
+ }
+
+ 62% {
+ transform: translate(-1.5px, .5px) rotate(1.5deg);
+ }
+
+ 64% {
+ transform: translate(-1.5px, 1.5px) rotate(1.5deg);
+ }
+
+ 66% {
+ transform: translate(.5px, 2.5px) rotate(1.5deg);
+ }
+
+ 68% {
+ transform: translate(2.5px, -1.5px) rotate(1.5deg);
+ }
+
+ 70% {
+ transform: translate(2.5px, 2.5px) rotate(.5deg);
+ }
+
+ 72% {
+ transform: translate(-.5px, -1.5px) rotate(1.5deg);
+ }
+
+ 74% {
+ transform: translate(-1.5px, 2.5px) rotate(1.5deg);
+ }
+
+ 76% {
+ transform: translate(-1.5px, 2.5px) rotate(1.5deg);
+ }
+
+ 78% {
+ transform: translate(-1.5px, 2.5px) rotate(.5deg);
+ }
+
+ 80% {
+ transform: translate(-1.5px, .5px) rotate(-.5deg);
+ }
+
+ 82% {
+ transform: translate(-1.5px, .5px) rotate(-.5deg);
+ }
+
+ 84% {
+ transform: translate(-.5px, .5px) rotate(1.5deg);
+ }
+
+ 86% {
+ transform: translate(2.5px, 1.5px) rotate(.5deg);
+ }
+
+ 88% {
+ transform: translate(-1.5px, .5px) rotate(1.5deg);
+ }
+
+ 90% {
+ transform: translate(-1.5px, -.5px) rotate(-.5deg);
+ }
+
+ 92% {
+ transform: translate(-1.5px, -1.5px) rotate(1.5deg);
+ }
+
+ 94% {
+ transform: translate(.5px, .5px) rotate(-.5deg);
+ }
+
+ 96% {
+ transform: translate(2.5px, -.5px) rotate(-.5deg);
+ }
+
+ 98% {
+ transform: translate(-1.5px, -1.5px) rotate(-.5deg);
+ }
+
+ 0%, 100% {
+ transform: translate(0, 0) rotate(0);
+ }
+}