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

Drop jQuery in demo

Browse Source
This commit is contained in:
Mimi 2020-01-20 17:28:22 +08:00
parent e7c52d1ee9
commit 7c604ae5b7
2 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/demo1.html
View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Live2D 看板娘 / Demo</title> <title>Live2D 看板娘 / Demo</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<style> <style>
#github svg { #github svg {

42
demo/demo2.html
View File

@ -6,7 +6,6 @@
<title>看板娘登陆平台</title> <title>看板娘登陆平台</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="../live2d.min.js"></script> <script src="../live2d.min.js"></script>
<style> <style>
html, body { html, body {
@ -151,15 +150,15 @@ body {
<p class="mt-5 mb-3 text-muted">Copyleft &copy; Mimi 2019</p> <p class="mt-5 mb-3 text-muted">Copyleft &copy; Mimi 2019</p>
</form> </form>
<script> <script>
$(function() { window.addEventListener("load", () => {
"use strict"; "use strict";
if (!CSS.supports("clip-path", "circle(120px at center)") && !CSS.supports("-webkit-clip-path", "circle(120px at center)")) { if (!CSS.supports("clip-path", "circle(120px at center)") && !CSS.supports("-webkit-clip-path", "circle(120px at center)")) {
$("#stage").html('<img src="../assets/screenshot-1.png">'); document.getElementById("stage").innerHTML = '<img src="../assets/screenshot-1.png">';
return; return;
} }
var apiURL = "https://live2d.fghrsh.net/api", state = 0, var apiPath = "https://live2d.fghrsh.net/api", state = 0,
modelId = localStorage.getItem("modelId"), modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId"); modelTexturesId = localStorage.getItem("modelTexturesId");
if (modelId == null) { if (modelId == null) {
@ -172,10 +171,10 @@ $(function() {
localStorage.setItem("modelId", modelId); localStorage.setItem("modelId", modelId);
if (modelTexturesId === undefined) modelTexturesId = 0; if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem("modelTexturesId", modelTexturesId); localStorage.setItem("modelTexturesId", modelTexturesId);
loadlive2d("live2d", `${apiURL}/get/?id=${modelId}-${modelTexturesId}`, null); loadlive2d("live2d", `${apiPath}/get/?id=${modelId}-${modelTexturesId}`, null);
console.log("live2d", `模型 ${modelId}-${modelTexturesId} 加载完成`); console.log("live2d", `模型 ${modelId}-${modelTexturesId} 加载完成`);
setTimeout(function() { setTimeout(() => {
$("#cover").css("bottom", "80%"); coverPosition("80%");
state = 2; state = 2;
}, 2000); }, 2000);
} }
@ -187,10 +186,10 @@ $(function() {
.then(response => response.json()) .then(response => response.json())
.then(result => { .then(result => {
loadModel(modelId, result.textures.id); loadModel(modelId, result.textures.id);
setTimeout(function() { setTimeout(() => {
state = 2; state = 2;
$("#cover").css("bottom", "80%"); coverPosition("80%");
$("#refresh").attr("href", "javascript:refresh()"); document.getElementById("refresh").setAttribute("href", "javascript:refresh()");
}, 1000); }, 1000);
}); });
} }
@ -204,6 +203,10 @@ $(function() {
}); });
} }
function coverPosition(pos) {
document.getElementById("cover").style.bottom = pos;
}
window.info = function() { window.info = function() {
fetch("https://v1.hitokoto.cn") fetch("https://v1.hitokoto.cn")
.then(response => response.json()) .then(response => response.json())
@ -214,31 +217,32 @@ $(function() {
window.refresh = function() { window.refresh = function() {
state = 0; state = 0;
$("#cover").css("bottom", "10%"); coverPosition("10%");
$("#refresh").attr("href", "javascript:void(0)"); document.getElementById("refresh").setAttribute("href", "javascript:void(0)");
setTimeout(loadRandModel, 1000); setTimeout(loadRandModel, 1000);
} }
$("#handle").click(function() { document.getElementById("handle").addEventListener("click", () => {
if (state == 1) { if (state == 1) {
state = 2; state = 2;
$("#cover").css("bottom", "80%"); coverPosition("80%");
} }
else if (state == 2) { else if (state == 2) {
state = 1; state = 1;
$("#cover").css("bottom", "20%"); coverPosition("20%");
} }
}); });
$("input[type=password]").focus(function() { document.querySelector("input[type=password]").addEventListener("focus", () => {
if (state == 2) { if (state == 2) {
state = 1; state = 1;
$("#cover").css("bottom", "20%"); coverPosition("20%");
} }
}).blur(function() { });
document.querySelector("input[type=password]").addEventListener("blur", () => {
if (state == 1) { if (state == 1) {
state = 2; state = 2;
$("#cover").css("bottom", "80%"); coverPosition("80%");
} }
}); });
}); });