From 5431fe6b59f0370a209c07a9e711734db18c4693 Mon Sep 17 00:00:00 2001 From: StevenJoeZhang <1119186082@qq.com> Date: Wed, 14 Nov 2018 01:28:01 +0800 Subject: [PATCH] .waifu-tool -> #waifu-tool --- README.md | 11 ++++--- demo.html | 4 +-- waifu-tips.js | 84 ++++++++++++++++++++++++++++++------------------- waifu-tips.json | 20 ++++++------ waifu.css | 22 ++++++------- 5 files changed, 81 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index ce21bee..fb36cce 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,8 @@ ## 依赖 需要jQuery和font-awesome支持，请确保它们已在页面中加载，例如在`
`中加入： ``` - - + + ``` ## 使用 @@ -31,9 +31,10 @@ https://www.fghrsh.net/post/123.html https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘 -可以自行在后端api中增加模型： -https://github.com/xiazeyu/live2d-widget-models +可以自行在后端api中增加模型（需要自行修改）： +https://github.com/xiazeyu/live2d-widget-models +https://github.com/xiaoski/live2d_models_collection ## 更新 -2018年10月31日，原API停用，请更新至新地址。参考文章： +2018年10月31日，由fghrsh提供的原API停用，请更新至新地址。参考文章： https://www.fghrsh.net/post/170.html diff --git a/demo.html b/demo.html index 07d34eb..7b570ad 100755 --- a/demo.html +++ b/demo.html @@ -3,8 +3,8 @@ Live2D 看板娘 v1.2 / Demo - - + + diff --git a/waifu-tips.js b/waifu-tips.js index a85c517..3fe8c38 100755 --- a/waifu-tips.js +++ b/waifu-tips.js @@ -1,3 +1,8 @@ +/* + * https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 + * https://www.fghrsh.net/post/123.html + */ + String.prototype.render = function(context) { var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g, strFlag = true, @@ -22,16 +27,20 @@ String.prototype.render = function(context) { } function initWidget(waifuPath, apiPath) { - if (sessionStorage.getItem("waifu-display") == "none") return; + if (screen.width <= 768) return; + if (sessionStorage.getItem("waifu-display")) { + if (new Date().getTime() - sessionStorage.getItem("waifu-display") <= 86400000) return; + else sessionStorage.removeItem("waifu-display"); + } sessionStorage.removeItem("waifu-text"); - $("body").append('
\ -
\ - \ -
\ + $("body").append('
\ +
\ + \ +
\ \ \ \ - \ + \ \ \ \ @@ -40,11 +49,18 @@ function initWidget(waifuPath, apiPath) {
'); var re = /x/, OriginTitile = document.title, - titleTime, - title = { - focus: "o(≧∇≦o) 啊咧，又好了……", - blur: "(●—●) 哎呦，崩溃啦！" - }; + titleTime = null, + titleIndex = 0, + title = [{ + blur: "(●—●) 哎呦，崩溃啦！", + focus: "o(≧∇≦o) 啊咧，又好了……" + }, { + blur: "(つェ⊂) 看不到我～", + focus: "(*´∇｀*) 被发现啦～" + }, { + blur: "(>_<) 我藏好了哦", + focus: "(*´∇｀*) 被发现啦～" + }]; console.log(re); re.toString = function() { showMessage("哈哈，你打开了控制台，是想要看看我的秘密吗？", 6000, 9); @@ -52,50 +68,54 @@ function initWidget(waifuPath, apiPath) { }; $(document).on("visibilitychange", function() { if (document.hidden) { - document.title = title.blur; - clearTimeout(titleTime); + titleIndex = Math.floor(Math.random() * 3); + document.title = title[titleIndex].blur; + if (titleTime) { + clearTimeout(titleTime); + titleTime = null; + } } else { - document.title = title.focus; + document.title = title[titleIndex].focus; + showMessage("哇，你又回来了～", 6000, 9); titleTime = setTimeout(function() { document.title = OriginTitile; - showMessage("哇，你又回来了～", 6000, 9); - }, 1000); + }, 3000); } }); $(document).on("copy", function() { showMessage("你都复制了些什么呀，转载要记得加上出处哦", 6000, 9); }); - $(".waifu-tool .fa-home").click(function() { + $("#waifu-tool .fa-home").click(function() { location.href = "/"; }); - $(".waifu-tool .fa-comment").click(function() { + $("#waifu-tool .fa-comment").click(function() { showHitokoto(); }); - $(".waifu-tool .fa-paper-plane").click(function() { + $("#waifu-tool .fa-paper-plane").click(function() { var s = document.createElement("script"); document.body.appendChild(s); s.src = "https://galaxymimi.com/js/asteroids.js"; }); - $(".waifu-tool .fa-address-book").click(function() { + $("#waifu-tool .fa-user-circle-o").click(function() { loadOtherModel(); }); - $(".waifu-tool .fa-street-view").click(function() { + $("#waifu-tool .fa-street-view").click(function() { loadRandModel(); }); - $(".waifu-tool .fa-camera-retro").click(function() { + $("#waifu-tool .fa-camera-retro").click(function() { showMessage("照好了嘛，是不是很可爱呢？", 6000, 9); window.Live2D.captureName = "photo.png"; window.Live2D.captureFrame = true; }); - $(".waifu-tool .fa-info-circle").click(function() { - window.open("https://github.com/stevenjoezhang/live2d-widget"); + $("#waifu-tool .fa-info-circle").click(function() { + window.open("https://github.com/stevenjoezhang/live2d-widget/"); }); - $(".waifu-tool .fa-times").click(function() { - sessionStorage.setItem("waifu-display", "none"); + $("#waifu-tool .fa-times").click(function() { + sessionStorage.setItem("waifu-display", new Date().getTime()); showMessage("愿你有一天能与重要的人重逢", 2000, 11); - setTimeout(function() { - $(".waifu").fadeOut(4000); - }, 1000); + $("#waifu").animate({bottom: -1000}, 6000, function() { + $("#waifu").hide(); + }); }); (function() { var text, @@ -197,16 +217,16 @@ function initWidget(waifuPath, apiPath) { if (Array.isArray(text)) text = text[Math.floor(Math.random() * text.length)]; //console.log(text); sessionStorage.setItem("waifu-text", priority); - $(".waifu-tips").stop().html(text).fadeTo(200, 1); + $("#waifu-tips").stop().html(text).fadeTo(200, 1); messageTimer = setTimeout(function() { sessionStorage.removeItem("waifu-text"); - $(".waifu-tips").fadeTo(1000, 0); + $("#waifu-tips").fadeTo(1000, 0); }, timeout); } } function initModel() { - if (waifuPath === undefined) waifuPath = "waifu-tips.json"; + waifuPath = waifuPath || "/waifu-tips.json"; apiURL = apiPath || ""; var modelId = localStorage.getItem("modelId"), modelTexturesId = localStorage.getItem("modelTexturesId"); diff --git a/waifu-tips.json b/waifu-tips.json index fc14a0e..5a6c920 100755 --- a/waifu-tips.json +++ b/waifu-tips.json @@ -1,39 +1,39 @@ { "mouseover": [ { - "selector": ".waifu #live2d", + "selector": "#waifu #live2d", "text": ["干嘛呢你，快把手拿开", "鼠…鼠标放错地方了！", "你要干嘛呀？", "喵喵喵？", "怕怕(ノ≧∇≦)ノ", "非礼呀！救命！"] }, { - "selector": ".waifu-tool .fa-home, .menu-item-home", + "selector": "#waifu-tool .fa-home, .menu-item-home", "text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦", "点它就可以回到首页啦！", "回首页看看吧"] }, { - "selector": ".waifu-tool .fa-comment", + "selector": "#waifu-tool .fa-comment", "text": ["猜猜我要说些什么？", "我从青蛙王子那里听到了不少人生经验"] }, { - "selector": ".waifu-tool .fa-paper-plane", + "selector": "#waifu-tool .fa-paper-plane", "text": ["要不要来玩飞机大战？", "这个按钮上写着“不要点击”", "怎么，你想来和我玩个游戏？"] }, { - "selector": ".waifu-tool .fa-address-book", + "selector": "#waifu-tool .fa-address-book", "text": ["要见见我的姐姐嘛", "要切换看板娘吗？"] }, { - "selector": ".waifu-tool .fa-street-view", + "selector": "#waifu-tool .fa-street-view", "text": ["喜欢换装 PLAY 吗？", "这次要扮演什么呢"] }, { - "selector": ".waifu-tool .fa-camera-retro", + "selector": "#waifu-tool .fa-camera-retro", "text": ["你要给我拍照呀？一二三～茄子～", "要不，我们来合影吧"] }, { - "selector": ".waifu-tool .fa-info-circle", + "selector": "#waifu-tool .fa-info-circle", "text": ["想要知道更多关于我的事么？", "这里记录着我搬家的历史呢"] }, { - "selector": ".waifu-tool .fa-times", + "selector": "#waifu-tool .fa-times", "text": ["到了要说再见的时候了吗", "呜呜QAQ 后会有期", "不要抛弃我呀"] }, { @@ -211,7 +211,7 @@ ], "click": [ { - "selector": ".waifu #live2d", + "selector": "#waifu #live2d", "text": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)", "不要摸我了，我会告诉老婆来打你的！", "干嘛动我呀！小心我咬你！", "别摸我，有什么好摸的！"] } ],"seasons": [ diff --git a/waifu.css b/waifu.css index 6cdfbde..a70afa7 100755 --- a/waifu.css +++ b/waifu.css @@ -1,21 +1,21 @@ -.waifu { +#waifu { position: fixed; bottom: 0; left: 0; z-index: 1; line-height: 0; - transition: all .3s ease-in-out; + transition: transform .3s ease-in-out; transform: translateY(3px); } -.waifu:hover { +#waifu:hover { transform: translateY(0); } @media (max-width: 768px) { - .waifu { + #waifu { display: none; } } -.waifu-tips { +#waifu-tips { opacity: 0; width: 250px; min-height: 70px; @@ -37,20 +37,20 @@ animation-name: shake; animation-timing-function: ease-in-out; } -.waifu #live2d { +#waifu #live2d { position: relative; cursor: grab; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; } -.waifu #live2d:active { +#waifu #live2d:active { cursor: grabbing; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; } -.waifu-tool { +#waifu-tool { color: #aaa; top: 70px; right: -10px; @@ -58,10 +58,10 @@ opacity: 0; transition: opacity 1s; } -.waifu:hover .waifu-tool { +#waifu:hover #waifu-tool { opacity: 1; } -.waifu-tool span { +#waifu-tool span { display: block; cursor: pointer; line-height: 26px; @@ -69,7 +69,7 @@ color: #5b6c7d; transition: color .3s; } -.waifu-tool span:hover { +#waifu-tool span:hover { color: #0684bd;/* #34495e */ } @keyframes shake {