add demo.html

2024-11-22 15:19:44 +00:00 · 2018-11-03 18:52:03 +08:00 · 2018-11-03 18:52:03 +08:00 · 478cb21e27
commit 478cb21e27
parent 95f06fab6a
5 changed files with 37 additions and 12 deletions
--- a/README.md
+++ b/README.md
@ -7,15 +7,14 @@
 在[米米的博客](https://zhangshuqiao.org)的左下角可查看效果

 ## 依赖
-需要jQuery和font-awesome  
-请确保它们已在页面中加载，例如在`<header>`中加入：
+需要jQuery和font-awesome支持，请确保它们已在页面中加载，例如在`<header>`中加入：
 ```
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 ```

 ## 使用
-请把整个项目克隆到服务器上，使之能够通过正常访问。修改autoload.js中的参数（具体参考该文件内的注释），这样，通过
+请把整个项目克隆到服务器上，使之能够正常访问。修改autoload.js中的参数（具体参考该文件内的注释），这样，通过
 ```
 <script src="/path/to/autoload.js"></script>
 ```
@ -34,3 +33,7 @@ https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘

 可以自行在后端api中增加模型：  
 https://github.com/xiazeyu/live2d-widget-models
+
+## 更新
+2018年10月31日，原API停用，请更新至新地址。参考文章：  
+https://www.fghrsh.net/post/170.html
--- a/autoload.js
+++ b/autoload.js
@ -19,7 +19,8 @@ $.ajax({

 // 初始化看板娘，会自动加载指定目录下的 waifu-tips.json
 $(window).on("load", function() {
-	initWidget("/lib/waifu/", "https://live2d.fghrsh.net/api");
+	initWidget("https://www.example.com/path/to/waifu-tips.json", "https://live2d.fghrsh.net/api");
 });
-//initWidget第一个参数为waifu-tips.json所在的文件夹，第二个参数为api地址
+//initWidget第一个参数为waifu-tips.json的绝对路径
+//第二个参数为api地址（无需修改）
 //api后端可自行搭建，参考https://github.com/fghrsh/live2d_api
--- a/demo.html
+++ b/demo.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>Live2D 看板娘 v1.2 / Demo</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+<!--<h2><a href="https://www.fghrsh.net/post/123.html" style="color: #38A3DB">Live2D 看板娘 v1.2</a> / Demo</h2>-->
+<script src="autoload.js"></script>
+</body>
+</html>
--- a/waifu-tips.js
+++ b/waifu-tips.js
@ -206,7 +206,7 @@ function initWidget(waifuPath, apiPath) {
 	}

 	function initModel() {
-		if (waifuPath === undefined) waifuPath = "";
+		if (waifuPath === undefined) waifuPath = "waifu-tips.json";
 		apiURL = apiPath || "";
 		var modelId = localStorage.getItem("modelId"),
 			modelTexturesId = localStorage.getItem("modelTexturesId");
@ -218,7 +218,7 @@ function initWidget(waifuPath, apiPath) {
 		loadModel(modelId, modelTexturesId);
 		$.ajax({
 			cache: true,
-			url: waifuPath + "waifu-tips.json",
+			url: waifuPath,
 			dataType: "json",
 			success: function(result) {
 				$.each(result.mouseover, function(index, tips) {
--- a/waifu.css
+++ b/waifu.css
@ -5,11 +5,9 @@
 	z-index: 1;
 	line-height: 0;
 	transition: all .3s ease-in-out;
-	-webkit-transform: translateY(3px);
 	transform: translateY(3px);
 }
 .waifu:hover {
-	-webkit-transform: translateY(0);
 	transform: translateY(0);
 }
@media (max-width: 768px) {
@ -21,7 +19,7 @@
 	opacity: 0;
 	width: 250px;
 	min-height: 70px;
-	margin: 0px 20px;
+	margin: -30px 20px;
 	padding: 5px 10px;
 	border: 1px solid rgba(224, 186, 140, 0.62);
 	border-radius: 12px;
@ -41,10 +39,20 @@
 }
 .waifu #live2d {
 	position: relative;
+	cursor: grab;
+	cursor: -webkit-grab;
+	cursor: -o-grab;
+	cursor: -ms-grab;
+}
+.waifu #live2d:active {
+	cursor: grabbing;
+	cursor: -webkit-grabbing;
+	cursor: -o-grabbing;
+	cursor: -ms-grabbing;
 }
 .waifu-tool {
 	color: #aaa;
-	top: 90px;
+	top: 70px;
 	right: -10px;
 	position: absolute;
 	opacity: 0;
@ -56,7 +64,7 @@
 .waifu-tool span {
 	display: block;
 	cursor: pointer;
-	line-height: 24px;
+	line-height: 26px;
 	text-align: center;
 	color: #5b6c7d;
 	transition: color .3s;