From 478cb21e27a927e04e757a3cc1d7cffb225f1dbb Mon Sep 17 00:00:00 2001 From: StevenJoeZhang <1119186082@qq.com> Date: Sat, 3 Nov 2018 18:52:03 +0800 Subject: [PATCH] add demo.html --- README.md | 9 ++++++--- autoload.js | 5 +++-- demo.html | 13 +++++++++++++ waifu-tips.js | 4 ++-- waifu.css | 18 +++++++++++++----- 5 files changed, 37 insertions(+), 12 deletions(-) create mode 100755 demo.html diff --git a/README.md b/README.md index 5249a87..ce21bee 100644 --- a/README.md +++ b/README.md @@ -7,15 +7,14 @@ 在[米米的博客](https://zhangshuqiao.org)的左下角可查看效果 ## 依赖 -需要jQuery和font-awesome -请确保它们已在页面中加载，例如在`
`中加入： +需要jQuery和font-awesome支持，请确保它们已在页面中加载，例如在`
`中加入： ``` ``` ## 使用 -请把整个项目克隆到服务器上，使之能够通过正常访问。修改autoload.js中的参数（具体参考该文件内的注释），这样，通过 +请把整个项目克隆到服务器上，使之能够正常访问。修改autoload.js中的参数（具体参考该文件内的注释），这样，通过 ``` ``` @@ -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 diff --git a/autoload.js b/autoload.js index eeab6ed..fb3b5bb 100644 --- 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 diff --git a/demo.html b/demo.html new file mode 100755 index 0000000..07d34eb --- /dev/null +++ b/demo.html @@ -0,0 +1,13 @@ + + + + +Live2D 看板娘 v1.2 / Demo + + + + + + + + diff --git a/waifu-tips.js b/waifu-tips.js index 80ba420..a85c517 100755 --- 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) { diff --git a/waifu.css b/waifu.css index e9c2724..6cdfbde 100755 --- 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;