caojiezi2003/live2d-widget
1
0
Fork 0
mirror of https://github.com/caojiezi2003/live2d-widget.git synced 2024-11-10 04:49:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add demo.html

Browse Source
This commit is contained in:
StevenJoeZhang 2018-11-03 18:52:03 +08:00
parent 95f06fab6a
commit 478cb21e27
5 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -7,15 +7,14 @@
在[米米的博客](https://zhangshuqiao.org)的左下角可查看效果 在[米米的博客](https://zhangshuqiao.org)的左下角可查看效果
## 依赖 ## 依赖
需要jQuery和font-awesome 需要jQuery和font-awesome支持，请确保它们已在页面中加载，例如在`<header>`中加入：
请确保它们已在页面中加载，例如在`<header>`中加入：
``` ```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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"> <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> <script src="/path/to/autoload.js"></script>
``` ```
@ -34,3 +33,7 @@ https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘
可以自行在后端api中增加模型： 可以自行在后端api中增加模型：
https://github.com/xiazeyu/live2d-widget-models https://github.com/xiazeyu/live2d-widget-models
## 更新
2018年10月31日，原API停用，请更新至新地址。参考文章：
https://www.fghrsh.net/post/170.html

5
autoload.js
View File

@ -19,7 +19,8 @@ $.ajax({
// 初始化看板娘，会自动加载指定目录下的 waifu-tips.json // 初始化看板娘，会自动加载指定目录下的 waifu-tips.json
$(window).on("load", function() { $(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 //api后端可自行搭建，参考https://github.com/fghrsh/live2d_api

13
demo.html Executable file
View File

@ -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>

4
waifu-tips.js
View File

@ -206,7 +206,7 @@ function initWidget(waifuPath, apiPath) {
} }
function initModel() { function initModel() {
if (waifuPath === undefined) waifuPath = ""; if (waifuPath === undefined) waifuPath = "waifu-tips.json";
apiURL = apiPath || ""; apiURL = apiPath || "";
var modelId = localStorage.getItem("modelId"), var modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId"); modelTexturesId = localStorage.getItem("modelTexturesId");
@ -218,7 +218,7 @@ function initWidget(waifuPath, apiPath) {
loadModel(modelId, modelTexturesId); loadModel(modelId, modelTexturesId);
$.ajax({ $.ajax({
cache: true, cache: true,
url: waifuPath + "waifu-tips.json", url: waifuPath,
dataType: "json", dataType: "json",
success: function(result) { success: function(result) {
$.each(result.mouseover, function(index, tips) { $.each(result.mouseover, function(index, tips) {

18
waifu.css
View File

@ -5,11 +5,9 @@
z-index: 1; z-index: 1;
line-height: 0; line-height: 0;
transition: all .3s ease-in-out; transition: all .3s ease-in-out;
-webkit-transform: translateY(3px);
transform: translateY(3px); transform: translateY(3px);
} }
.waifu:hover { .waifu:hover {
-webkit-transform: translateY(0);
transform: translateY(0); transform: translateY(0);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -21,7 +19,7 @@
opacity: 0; opacity: 0;
width: 250px; width: 250px;
min-height: 70px; min-height: 70px;
margin: 0px 20px; margin: -30px 20px;
padding: 5px 10px; padding: 5px 10px;
border: 1px solid rgba(224, 186, 140, 0.62); border: 1px solid rgba(224, 186, 140, 0.62);
border-radius: 12px; border-radius: 12px;
@ -41,10 +39,20 @@
} }
.waifu #live2d { .waifu #live2d {
position: relative; 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 { .waifu-tool {
color: #aaa; color: #aaa;
top: 90px; top: 70px;
right: -10px; right: -10px;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
@ -56,7 +64,7 @@
.waifu-tool span { .waifu-tool span {
display: block; display: block;
cursor: pointer; cursor: pointer;
line-height: 24px; line-height: 26px;
text-align: center; text-align: center;
color: #5b6c7d; color: #5b6c7d;
transition: color .3s; transition: color .3s;