| 网页添加 Live2D 看板娘 | 您所在的位置：网站首页 › 2233娘模型 › 网页添加 Live2D 看板娘 |
网页添加 Live2D 看板娘
|
网页添加 Live2D 看板娘
2017 年 12 月 21 日 分类: 实用教程 383 条评论 326728 ℃
没错我也加上了，好萌啊 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄ 最近无意中又看到了 @Jad 大佬的博客，不拖坑了，加加加 233 在 dalao 的 waifu-tips.js 的基础上，实现了套 API，加上了以下功能 可以切换 Live2D 模型了（暂时只有 Pio 和 Tia 酱 支持 随机换装 和 顺序换装（收集了截至目前的 Pio、Tia 全套服装 *需要根据 自身情况 进行定制，不能直接套用（其他资源文件见 打包下载 ** waifu-tips.js 的详细设置说明，和 waifu-tips.json 节点说明，见 GitHub - fghrsh/live2d_demo ReadMe waifu.css .waifu { position: fixed; bottom: 0; z-index: 1; font-size: 0; -webkit-transform: translateY(3px); transform: translateY(3px); } .waifu:hover { -webkit-transform: translateY(0); transform: translateY(0); } .waifu-tips { opacity: 0; margin: -20px 20px; padding: 5px 10px; border: 1px solid rgba(224, 186, 140, 0.62); border-radius: 12px; background-color: rgba(236, 217, 188, 0.5); box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2); text-overflow: ellipsis; overflow: hidden; position: absolute; animation-delay: 5s; animation-duration: 50s; animation-iteration-count: infinite; animation-name: shake; animation-timing-function: ease-in-out; } .waifu-tool { display: none; color: #aaa; top: 50px; right: 10px; position: absolute; } .waifu:hover .waifu-tool { display: block; } .waifu-tool span { display: block; cursor: pointer; color: #5b6c7d; transition: 0.2s; } .waifu-tool span:hover { color: #34495e; } .waifu #live2d{ position: relative; } @keyframes shake { 2% { transform: translate(0.5px, -1.5px) rotate(-0.5deg); } 4% { transform: translate(0.5px, 1.5px) rotate(1.5deg); } 6% { transform: translate(1.5px, 1.5px) rotate(1.5deg); } 8% { transform: translate(2.5px, 1.5px) rotate(0.5deg); } 10% { transform: translate(0.5px, 2.5px) rotate(0.5deg); } 12% { transform: translate(1.5px, 1.5px) rotate(0.5deg); } 14% { transform: translate(0.5px, 0.5px) rotate(0.5deg); } 16% { transform: translate(-1.5px, -0.5px) rotate(1.5deg); } 18% { transform: translate(0.5px, 0.5px) rotate(1.5deg); } 20% { transform: translate(2.5px, 2.5px) rotate(1.5deg); } 22% { transform: translate(0.5px, -1.5px) rotate(1.5deg); } 24% { transform: translate(-1.5px, 1.5px) rotate(-0.5deg); } 26% { transform: translate(1.5px, 0.5px) rotate(1.5deg); } 28% { transform: translate(-0.5px, -0.5px) rotate(-0.5deg); } 30% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); } 32% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } 34% { transform: translate(2.5px, 2.5px) rotate(-0.5deg); } 36% { transform: translate(0.5px, -1.5px) rotate(0.5deg); } 38% { transform: translate(2.5px, -0.5px) rotate(-0.5deg); } 40% { transform: translate(-0.5px, 2.5px) rotate(0.5deg); } 42% { transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 44% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 46% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); } 48% { transform: translate(2.5px, -0.5px) rotate(0.5deg); } 50% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 52% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); } 54% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 56% { transform: translate(0.5px, 2.5px) rotate(1.5deg); } 58% { transform: translate(2.5px, 2.5px) rotate(0.5deg); } 60% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } 62% { transform: translate(-1.5px, 0.5px) rotate(1.5deg); } 64% { transform: translate(-1.5px, 1.5px) rotate(1.5deg); } 66% { transform: translate(0.5px, 2.5px) rotate(1.5deg); } 68% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } 70% { transform: translate(2.5px, 2.5px) rotate(0.5deg); } 72% { transform: translate(-0.5px, -1.5px) rotate(1.5deg); } 74% { transform: translate(-1.5px, 2.5px) rotate(1.5deg); } 76% { transform: translate(-1.5px, 2.5px) rotate(1.5deg); } 78% { transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 80% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 82% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 84% { transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 86% { transform: translate(2.5px, 1.5px) rotate(0.5deg); } 88% { transform: translate(-1.5px, 0.5px) rotate(1.5deg); } 90% { transform: translate(-1.5px, -0.5px) rotate(-0.5deg); } 92% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); } 94% { transform: translate(0.5px, 0.5px) rotate(-0.5deg); } 96% { transform: translate(2.5px, -0.5px) rotate(-0.5deg); } 98% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } @font-face { font-family: 'Flat-UI-Icons'; src: url('flat-ui-icons-regular.eot'); src: url('flat-ui-icons-regular.eot?#iefix') format('embedded-opentype'), url('flat-ui-icons-regular.woff') format('woff'), url('flat-ui-icons-regular.ttf') format('truetype'), url('flat-ui-icons-regular.svg#flat-ui-icons-regular') format('svg'); } [class^="fui-"], [class*="fui-"] { font-family: 'Flat-UI-Icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fui-cross:before { content: "\e609"; } .fui-info-circle:before { content: "\e60f"; } .fui-photo:before { content: "\e62a"; } .fui-eye:before { content: "\e62c"; } .fui-chat:before { content: "\e62d"; } .fui-home:before { content: "\e62e"; } .fui-user:before { content: "\e631"; }waifu-tips.js window.live2d_settings = Array(); /* く__,.ヘヽ. / ,ー､ 〉 ＼ ', !-─‐-i / /´ ／｀ｰ' L/／｀ヽ､ Live2D 看板娘 参数设置 / ／, /| , , ', Version 1.4.2 ｲ / /-‐/ ｉ L_ ﾊ ヽ! i Update 2018.11.12 ﾚ ﾍ 7ｲ｀ﾄ ﾚ'ｧ-ﾄ､!ハ| | !,/7 '0' ´0iソ| | |.从" _ ,,,, / |./ | 网页添加 Live2D 看板娘 ﾚ'| i＞.､,,__ _,.イ / .i | https://www.fghrsh.net/post/123.html ﾚ'| | / k_７_/ﾚ'ヽ, ﾊ. | | |/i 〈|/ i ,.ﾍ | i | Thanks .|/ / ｉ： ﾍ! ＼ | journey-ad / https://github.com/journey-ad/live2d_src kヽ>､ﾊ _,.ﾍ､ /､! xiazeyu / https://github.com/xiazeyu/live2d-widget.js !'〈//｀Ｔ´', ＼ ｀'7'ｰr' Live2d Cubism SDK WebGL 2.1 Projrct & All model authors. ﾚ'ヽL__|___i,___,ンﾚ|ノ ﾄ-,/ |___./ 'ｰ' !_,.:*********************************************************************************/ // 后端接口 live2d_settings['modelAPI'] = '//live2d.fghrsh.net/api/'; // 自建 API 修改这里 live2d_settings['tipsMessage'] = 'waifu-tips.json'; // 同目录下可省略路径 live2d_settings['hitokotoAPI'] = 'lwl12.com'; // 一言 API，可选 'lwl12.com', 'hitokoto.cn', 'jinrishici.com'(古诗词) // 默认模型 live2d_settings['modelId'] = 1; // 默认模型 ID，可在 F12 控制台找到 live2d_settings['modelTexturesId'] = 53; // 默认材质 ID，可在 F12 控制台找到 // 工具栏设置 live2d_settings['showToolMenu'] = true; // 显示 工具栏 ，可选 true(真), false(假) live2d_settings['canCloseLive2d'] = true; // 显示 关闭看板娘 按钮，可选 true(真), false(假) live2d_settings['canSwitchModel'] = true; // 显示 模型切换 按钮，可选 true(真), false(假) live2d_settings['canSwitchTextures'] = true; // 显示 材质切换 按钮，可选 true(真), false(假) live2d_settings['canSwitchHitokoto'] = true; // 显示 一言切换 按钮，可选 true(真), false(假) live2d_settings['canTakeScreenshot'] = true; // 显示 看板娘截图 按钮，可选 true(真), false(假) live2d_settings['canTurnToHomePage'] = true; // 显示 返回首页 按钮，可选 true(真), false(假) live2d_settings['canTurnToAboutPage'] = true; // 显示 跳转关于页 按钮，可选 true(真), false(假) // 模型切换模式 live2d_settings['modelStorage'] = true; // 记录 ID (刷新后恢复)，可选 true(真), false(假) live2d_settings['modelRandMode'] = 'switch'; // 模型切换，可选 'rand'(随机), 'switch'(顺序) live2d_settings['modelTexturesRandMode']= 'rand'; // 材质切换，可选 'rand'(随机), 'switch'(顺序) // 提示消息选项 live2d_settings['showHitokoto'] = true; // 显示一言 live2d_settings['showF12Status'] = true; // 显示加载状态 live2d_settings['showF12Message'] = false; // 显示看板娘消息 live2d_settings['showF12OpenMsg'] = true; // 显示控制台打开提示 live2d_settings['showCopyMessage'] = true; // 显示 复制内容 提示 live2d_settings['showWelcomeMessage'] = true; // 显示进入面页欢迎词 //看板娘样式设置 live2d_settings['waifuSize'] = '280x250'; // 看板娘大小，例如 '280x250', '600x535' live2d_settings['waifuTipsSize'] = '250x70'; // 提示框大小，例如 '250x70', '570x150' live2d_settings['waifuFontSize'] = '12px'; // 提示框字体，例如 '12px', '30px' live2d_settings['waifuToolFont'] = '14px'; // 工具栏字体，例如 '14px', '36px' live2d_settings['waifuToolLine'] = '20px'; // 工具栏行高，例如 '20px', '36px' live2d_settings['waifuToolTop'] = '0px' // 工具栏顶部边距，例如 '0px', '-60px' live2d_settings['waifuMinWidth'] = '768px'; // 面页小于 指定宽度 隐藏看板娘，例如 'disable'(禁用), '768px' live2d_settings['waifuEdgeSide'] = 'left:0'; // 看板娘贴边方向，例如 'left:0'(靠左 0px), 'right:30'(靠右 30px) live2d_settings['waifuDraggable'] = 'disable'; // 拖拽样式，例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽) live2d_settings['waifuDraggableRevert'] = true; // 松开鼠标还原拖拽位置，可选 true(真), false(假) // 其他杂项设置 live2d_settings['l2dVersion'] = '1.4.2'; // 当前版本 live2d_settings['l2dVerDate'] = '2018.11.12'; // 版本更新日期 live2d_settings['homePageUrl'] = 'auto'; // 主页地址，可选 'auto'(自动), '{URL 网址}' live2d_settings['aboutPageUrl'] = 'https://www.fghrsh.net/post/123.html'; // 关于页地址, '{URL 网址}' live2d_settings['screenshotCaptureName']= 'live2d.png'; // 看板娘截图文件名，例如 'live2d.png' /****************************************************************************************************/ String.prototype.render = function(context) { var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g; return this.replace(tokenReg, function (word, slash1, token, slash2) { if (slash1 || slash2) { return word.replace('\\', ''); } var variables = token.replace(/\s/g, '').split('.'); var currentObject = context; var i, length, variable; for (i = 0, length = variables.length; i \\2\\9 \\1 o,.\\6\\2 \\1 /\\2!\\n\\1\\1\\1\\1\\1\\1 !\'\\m//\\4\\I\\g\', \\b \\4\'7\'\\J\'\\n\\1\\1\\1\\1\\1\\1 \\3\'\\K|M,p,\\O\\3|\\P\\n\\1\\1\\1\\1\\1 \\1\\1\\1\\c-,/\\1|p./\\n\\1\\1\\1\\1\\1 \\1\\1\\1\'\\f\'\\1\\1!o,.:\\Q \\R\\S\\T v"+e.V+" / W "+e.N);8.d(" ");',60,60,'|u3000|uff64|uff9a|uff40|u30fd|uff8d||console|uff8a|uff0f|uff3c|uff84|log|live2d_settings|uff70|u00b4|uff49||u2010||u3000_|u3008||_|___|uff72|u2500|uff67|u30cf|u30fc||u30bd|u4ece|u30d8|uff1e|__|u30a4|k_|uff17_|u3000L_|u3000i|uff1a|u3009|uff34|uff70r|u30fdL__||___i|l2dVerDate|u30f3|u30ce|nLive2D|u770b|u677f|u5a18|u304f__|l2dVersion|FGHRSH|u00b40i'.split('|'),0,{})); /* 判断 JQuery */ if (typeof($.ajax) != 'function') typeof(jQuery.ajax) == 'function' ? window.$ = jQuery : console.log('[Error] JQuery is not defined.'); /* 加载看板娘样式 */ live2d_settings.waifuSize = live2d_settings.waifuSize.split('x'); live2d_settings.waifuTipsSize = live2d_settings.waifuTipsSize.split('x'); live2d_settings.waifuEdgeSide = live2d_settings.waifuEdgeSide.split(':'); $("#live2d").attr("width",live2d_settings.waifuSize[0]); $("#live2d").attr("height",live2d_settings.waifuSize[1]); $(".waifu-tips").width(live2d_settings.waifuTipsSize[0]); $(".waifu-tips").height(live2d_settings.waifuTipsSize[1]); $(".waifu-tips").css("top",live2d_settings.waifuToolTop); $(".waifu-tips").css("font-size",live2d_settings.waifuFontSize); $(".waifu-tool").css("font-size",live2d_settings.waifuToolFont); $(".waifu-tool span").css("line-height",live2d_settings.waifuToolLine); if (live2d_settings.waifuEdgeSide[0] == 'left') $(".waifu").css("left",live2d_settings.waifuEdgeSide[1]+'px'); else if (live2d_settings.waifuEdgeSide[0] == 'right') $(".waifu").css("right",live2d_settings.waifuEdgeSide[1]+'px'); window.waifuResize = function() { $(window).width() /* 可直接修改部分参数 */ live2d_settings['modelId'] = 5; // 默认模型 ID live2d_settings['modelTexturesId'] = 1; // 默认材质 ID /* 在 initModel 前添加 */ initModel("https://www.example.com/path/to/waifu-tips.json")或 实现自动加载，在 footer.php 的最后加上 autoload.js // 加载 CSS $("").attr({href: "https://www.example.com/path/to/waifu.css", rel: "stylesheet", type: "text/css"}).appendTo('head'); // 插入 DIV $('body').append(' '); // 加载 JS $.ajax({ url: 'https://www.example.com/path/to/waifu-tips.js', dataType:"script", cache: true, async: false }); $.ajax({ url: 'https://www.example.com/path/to/live2d.js', dataType:"script", cache: true, async: false }); // 初始化看板娘，加载 waifu-tips.json /* 可直接修改部分参数 */ live2d_settings['modelId'] = 5; // 默认模型 ID live2d_settings['modelTexturesId'] = 1; // 默认材质 ID /* 在 initModel 前添加 */ initModel('https://www.example.com/path/to/waifu-tips.json');Demo https://www.fghrsh.net/ (本站) https://live2d.fghrsh.net/demo/1.4.2/ 打包下载
API 接口 截至目前，接口每日请求数高达 80+万次，并产生了大量的流量... 在 2018.05.12~2018.06.10 期间，API 请求数已达到 20138636 次 2020.05.18 更新：近 30 天请求量 400, 000, 000 + 次（4 亿） ... 希望大站大佬们看到能自建 API，源码在上方（可以 QQ 联系我协助搭建 .. 由于涉及版权问题，公共 API 接口不再添加模型，如有需要可以自建 API ... 更新日志 2018-01-03：live2d.js 修复 IE，Edge 兼容性问题 2018-03-02：API 新增 22，33，Shizuku，Neptunia 系列，Murakumo 模型 2018-05-20：修复 waifu-tips.json 导致的 小bug，增加使用 hitokoto.cn 一言 API 2018-10-21：Live2D 看板娘 API 迁移公告，由于 API 请求数过大，另外创建了个地址 2018-11-06：waifu-tips.js 优化空闲显示一言判定，增加看板娘设置，增加更多 一言 API 2018-11-10：优化代码，修复 bug，增加可在 waifu-tips.json 定制提示语，可在外部定义参数 后续日志，见 GitHub - fghrsh/live2d_demo Commits (Live2D 看板娘插件 的前端 HTML 源码) 其他插件 WordPress (22,33) https://www.fczbl.vip/946.html Typecho (22,33) https://qqdie.com/archives/l2d233.html Typecho (Pio) https://paugram.com/coding/add-poster-girl-with-plugin.html Emlog (Histoire) https://www.wikimoe.com/?post=76 本地化 API 版本 https://github.com/panedioic/live2d_demo_without_api l2d moc3 支持 https://github.com/HCLonely/Live2dV3 Tips: 以上插件大概能替换 waifu-tips.js 来使用这边的 API (逃 推荐一个 Live2D 模型资源收集站：https://mx.paul.ren/ 参考资料 AD's Blog 给博客添加能动的看板娘(Live2D)-关于模型的二三事 给博客添加能动的看板娘(Live2D)-将其添加到网页上吧 [GooglePlay] Potion Maker [GitHub] journey-ad/live2d_src 版权信息 Flat UI Free live2d_src / ©journey-ad / GPL v2.0 waifu-tips.js / ©journey-ad / CC BY-NC-SA 4.0 “Potion Maker” 字样 及 应用内包含的文本、模型、图片、动作数据等所有权均属于 “药水制作师” 作者 Sinsiroad，仅供研究学习，不得用于商业用途 唔 .. 搭建遇到的问题 QQ 问我吧，博客评论回复不太方便 ... （联系方式在关于页都有的 本文标题：网页添加 Live2D 看板娘 本文链接：https://www.fghrsh.net/post/123.html 作者授权：除特别说明外，本文由 fghrsh 原创编译并授权 FGHRSH 的博客 刊载发布。 版权声明：本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议，转载或使用请遵守署名协议。 标签: 项目 开源 HTML CSS PHP Live2D 看板娘 GitHub 萌 萝莉 双马尾 |
压缩包 live2d_v1.4.2.zip
Z-Blog PHP 插件 live2d_v1.4.2.zba
看板娘 前端 源码 https://github.com/fghrsh/live2d_demo【本文地址】
公司简介
联系我们