Skip to content Skip to sidebar Skip to footer
Home / Uncaught Typeerror: Cannot Read Property 'webkit' of Undefined on Wordpress

Uncaught Typeerror: Cannot Read Property 'webkit' of Undefined on Wordpress

Post a Comment

没错我也加上了，好萌啊  ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

最近无意中又看到了 @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: stock-still;     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;     groundwork-color: rgba(236, 217, 188, 0.5);     box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);     text-overflow: ellipsis;     overflow: subconscious;     position: absolute;     animation-filibuster: 5s;     blitheness-duration: 50s;     animation-iteration-count: infinite;     animation-name: milk shake;     animation-timing-function: ease-in-out; } .waifu-tool {     brandish: none;     color: #aaa;     superlative: 50px;     correct: 10px;     position: absolute; } .waifu:hover .waifu-tool {     display: block; } .waifu-tool bridge {     brandish: block;     cursor: arrow;     color: #5b6c7d;     transition: 0.2s; } .waifu-tool bridge:hover {     color: #34495e; } .waifu #live2d{     position: relative; }  @keyframes shake {     2% {         transform: translate(0.5px, -1.5px) rotate(-0.5deg);     }      4% {         transform: translate(0.5px, one.5px) rotate(ane.5deg);     }      half-dozen% {         transform: translate(one.5px, i.5px) rotate(1.5deg);     }      8% {         transform: translate(2.5px, ane.5px) rotate(0.5deg);     }      x% {         transform: translate(0.5px, 2.5px) rotate(0.5deg);     }      12% {         transform: translate(i.5px, 1.5px) rotate(0.5deg);     }      xiv% {         transform: translate(0.5px, 0.5px) rotate(0.5deg);     }      16% {         transform: interpret(-ane.5px, -0.5px) rotate(i.5deg);     }      xviii% {         transform: translate(0.5px, 0.5px) rotate(ane.5deg);     }      20% {         transform: translate(2.5px, 2.5px) rotate(one.5deg);     }      22% {         transform: translate(0.5px, -ane.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, -ane.5px) rotate(one.5deg);     }      34% {         transform: translate(ii.5px, 2.5px) rotate(-0.5deg);     }      36% {         transform: interpret(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, two.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(-one.5px, 1.5px) rotate(0.5deg);     }      52% {         transform: translate(-0.5px, 1.5px) rotate(0.5deg);     }      54% {         transform: translate(-i.5px, 1.5px) rotate(0.5deg);     }      56% {         transform: translate(0.5px, 2.5px) rotate(one.5deg);     }      58% {         transform: interpret(2.5px, 2.5px) rotate(0.5deg);     }      60% {         transform: translate(ii.5px, -1.5px) rotate(one.5deg);     }      62% {         transform: interpret(-i.5px, 0.5px) rotate(1.5deg);     }      64% {         transform: interpret(-1.5px, 1.5px) rotate(1.5deg);     }      66% {         transform: translate(0.5px, 2.5px) rotate(1.5deg);     }      68% {         transform: translate(ii.5px, -one.5px) rotate(1.5deg);     }      70% {         transform: translate(2.5px, 2.5px) rotate(0.5deg);     }      72% {         transform: translate(-0.5px, -1.5px) rotate(ane.5deg);     }      74% {         transform: interpret(-1.5px, 2.5px) rotate(ane.5deg);     }      76% {         transform: translate(-1.5px, 2.5px) rotate(i.5deg);     }      78% {         transform: translate(-1.5px, two.5px) rotate(0.5deg);     }      80% {         transform: translate(-1.5px, 0.5px) rotate(-0.5deg);     }      82% {         transform: interpret(-ane.5px, 0.5px) rotate(-0.5deg);     }      84% {         transform: translate(-0.5px, 0.5px) rotate(1.5deg);     }      86% {         transform: interpret(two.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: interpret(-1.5px, -1.5px) rotate(i.5deg);     }      94% {         transform: interpret(0.5px, 0.5px) rotate(-0.5deg);     }      96% {         transform: interpret(2.5px, -0.5px) rotate(-0.5deg);     }      98% {         transform: translate(-1.5px, -ane.5px) rotate(-0.5deg);     }      0%, 100% {         transform: translate(0, 0) rotate(0);     } } @font-confront {   font-family unit: 'Flat-UI-Icons';   src: url('apartment-ui-icons-regular.eot');   src: url('apartment-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-"], [form*="fui-"] {   font-family: 'Flat-UI-Icons';   speak: none;   font-manner: 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:earlier {   content: "\e62e"; } .fui-user:earlier {   content: "\e631"; }

waifu-tips.js 

window.live2d_settings = Array(); /*      く__,.ヘヽ.　　　　/　,ー､ 〉     　　　　　＼ ', !-─‐-i　/　/´     　　　 　 ／｀ｰ'　　　 L/／｀ヽ､            Live2D 看板娘 参数设置     　　 　 /　 ／,　 /|　 ,　 ,　　　 ',                                           Version 1.iv.2     　　　ｲ 　/ /-‐/　ｉ　L_ ﾊ ヽ!　 i                            Update 2018.11.12     　　　 ﾚ ﾍ 7ｲ｀ﾄ　 ﾚ'ｧ-ﾄ､!ハ|　 |       　　　　 !,/seven '0'　　 ´0iソ| 　 |　　　     　　　　 |.从"　　_　　 ,,,, / |./ 　 |             网页添加 Live2D 看板娘     　　　　 ﾚ'| i＞.､,,__　_,.イ / 　.i 　|                    https://world wide web.fghrsh.net/postal service/123.html     　　　　　 ﾚ'| | / k_７_/ﾚ'ヽ,　ﾊ.　|                　　　　　　 | |/i 〈|/　 i　,.ﾍ |　i　|    Cheers     　　　　　　.|/ /　ｉ： 　 ﾍ!　　＼　|          journey-ad / https://github.com/journey-advertizing/live2d_src     　　　 　 　 kヽ>､ﾊ 　 _,.ﾍ､ 　 /､!            xiazeyu / https://github.com/xiazeyu/live2d-widget.js     　　　　　　 !'〈//｀Ｔ´', ＼ ｀'seven'ｰ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']         = truthful;         // 显示 工具栏          ，可选 true(真), fake(假) live2d_settings['canCloseLive2d']       = truthful;         // 显示 关闭看板娘  按钮，可选 true(真), false(假) live2d_settings['canSwitchModel']       = true;         // 显示 模型切换    按钮，可选 true(真), false(假) live2d_settings['canSwitchTextures']    = true;         // 显示 材质切换    按钮，可选 truthful(真), false(假) live2d_settings['canSwitchHitokoto']    = true;         // 显示 一言切换    按钮，可选 true(真), simulated(假) live2d_settings['canTakeScreenshot']    = true;         // 显示 看板娘截图  按钮，可选 true(真), imitation(假) live2d_settings['canTurnToHomePage']    = true;         // 显示 返回首页    按钮，可选 true(真), imitation(假) live2d_settings['canTurnToAboutPage']   = truthful;         // 显示 跳转关于页  按钮，可选 truthful(真), false(假)  // 模型切换模式 live2d_settings['modelStorage']         = true;         // 记录 ID (刷新后恢复)，可选 truthful(真), false(假) live2d_settings['modelRandMode']        = 'switch';     // 模型切换，可选 'rand'(随机), 'switch'(顺序) live2d_settings['modelTexturesRandMode']= 'rand';       // 材质切换，可选 'rand'(随机), 'switch'(顺序)  // 提示消息选项 live2d_settings['showHitokoto']         = true;         // 显示一言 live2d_settings['showF12Status']        = truthful;         // 显示加载状态 live2d_settings['showF12Message']       = fake;        // 显示看板娘消息 live2d_settings['showF12OpenMsg']       = true;         // 显示控制台打开提示 live2d_settings['showCopyMessage']      = truthful;         // 显示 复制内容 提示 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:xxx'(靠右 30px) live2d_settings['waifuDraggable']       = 'disable';    // 拖拽样式，例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽) live2d_settings['waifuDraggableRevert'] = true;         // 松开鼠标还原拖拽位置，可选 true(真), false(假)  // 其他杂项设置 live2d_settings['l2dVersion']           = 'ane.4.2';        // 当前版本 live2d_settings['l2dVerDate']           = '2018.11.12'; // 版本更新日期 live2d_settings['homePageUrl']          = 'motorcar';       // 主页地址，可选 'auto'(自动), '{URL 网址}' live2d_settings['aboutPageUrl']         = 'https://www.fghrsh.net/post/123.html';   // 关于页地址, '{URL 网址}' live2d_settings['screenshotCaptureName']= 'live2d.png'; // 看板娘截图文件名，例如 'live2d.png'  /****************************************************************************************************/  String.paradigm.render = office(context) {     var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;      return this.replace(tokenReg, function (word, slash1, token, slash2) {         if (slash1 || slash2) { render word.supersede('\\', ''); }                  var variables = token.supervene upon(/\s/g, '').split('.');         var currentObject = context;         var i, length, variable;                  for (i = 0, length = variables.length; i < length; ++i) {             variable = variables[i];             currentObject = currentObject[variable];             if (currentObject === undefined || currentObject === aught) return '';         }         return currentObject;     }); };  var re = /ten/; console.log(re);  function empty(obj) {return typeof obj=="undefined"||obj==null||obj==""?true:imitation} function getRandText(text) {return Assortment.isArray(text) ? text[Math.floor(Math.random() * text.length + i)-1] : text}  office showMessage(text, timeout, flag) {     if(flag || sessionStorage.getItem('waifu-text') === '' || sessionStorage.getItem('waifu-text') === nada){         if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1)-1];         if (live2d_settings.showF12Message) panel.log('[Message]', text.replace(/<[^<>]+>/one thousand,''));                  if(flag) sessionStorage.setItem('waifu-text', text);                  $('.waifu-tips').stop();         $('.waifu-tips').html(text).fadeTo(200, 1);         if (timeout === undefined) timeout = 5000;         hideMessage(timeout);     } }  office hideMessage(timeout) {     $('.waifu-tips').end().css('opacity',1);     if (timeout === undefined) timeout = 5000;     window.setTimeout(function() {sessionStorage.removeItem('waifu-text')}, timeout);     $('.waifu-tips').filibuster(timeout).fadeTo(200, 0); }  role initModel(waifuPath, type) {     /* console welcome bulletin */     eval(function(p,a,c,k,east,r){e=function(c){return(c<a?'':due east(parseInt(c/a)))+((c=c%a)>35?Cord.fromCharCode(c+29):c.toString(36))};if(!''.supercede(/^/,Cord)){while(c--)r[e(c)]=thou[c]||e(c);k=[function(east){render r[e]}];eastward=function(){render'\\due west+'};c=1};while(c--)if(k[c])p=p.supervene upon(new RegExp('\\b'+e(c)+'\\b','thou'),k[c]);return p}('8.d(" ");8.d("\\U,.\\y\\5.\\1\\1\\1\\1/\\1,\\u\\2 \\H\\n\\1\\1\\one\\i\\1\\b \', !-\\r\\j-i\\ane/\\one/\\g\\north\\ane\\1\\1 \\i \\a\\4\\f\'\\1\\ane\\1 L/\\a\\4\\5\\2\\n\\1\\1 \\1 /\\1 \\a,\\1 /|\\ane ,\\ane ,\\ane\\1\\1 \',\\northward\\1\\1\\1\\q \\one/ /-\\j/\\i\\h\\Due east \\ix \\5!\\1 i\\n\\1\\1\\1 \\3 \\half dozen 7\\q\\4\\c\\one \\3\'\\due south-\\c\\2!\\t|\\1 |\\north\\one\\one\\1\\one !,/7 \'0\'\\1\\i \\X\\w| \\one |\\1\\one\\1\\n\\i\\i\\ane\\i |.\\ten\\"\\i\\50\\1\\1 ,,,, / |./ \\1 |\\n\\ane\\1\\one\\i \\3\'| i\\z.\\2,,A\\fifty,.\\B / \\ane.i \\1|\\n\\ane\\one\\1\\1\\i \\3\'| | / C\\D/\\3\'\\five,\\1\\9.\\ane|\\n\\1\\1\\one\\1\\1\\1 | |/i \\yard|/\\1 i\\one,.\\six |\\F\\1|\\n\\1\\1\\1\\ane\\ane\\1.|/ /\\1\\h\\Thousand \\1 \\6!\\1\\1\\b\\ane|\\n\\1\\ane\\1 \\1 \\one k\\5>\\two\\9 \\1 o,.\\half dozen\\2 \\one /\\two!\\n\\1\\1\\i\\1\\1\\one !\'\\m//\\iv\\I\\g\', \\b \\4\'7\'\\J\'\\n\\one\\1\\ane\\1\\1\\1 \\3\'\\One thousand|Yard,p,\\O\\3|\\P\\n\\1\\i\\1\\1\\i \\1\\1\\one\\c-,/\\ane|p./\\north\\i\\1\\ane\\1\\1 \\1\\1\\1\'\\f\'\\i\\1!o,.:\\Q \\R\\Southward\\T v"+due east.Five+" / W "+e.N);eight.d(" ");',60,lx,'|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'.carve up('|'),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.divide('10');     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-tiptop",live2d_settings.waifuToolLine);          if (live2d_settings.waifuEdgeSide[0] == 'left') $(".waifu").css("left",live2d_settings.waifuEdgeSide[one]+'px');     else if (live2d_settings.waifuEdgeSide[0] == 'right') $(".waifu").css("right",live2d_settings.waifuEdgeSide[one]+'px');          window.waifuResize = function() { $(window).width() <= Number(live2d_settings.waifuMinWidth.replace('px','')) ? $(".waifu").hide() : $(".waifu").show(); };     if (live2d_settings.waifuMinWidth != 'disable') { waifuResize(); $(window).resize(function() {waifuResize()}); }          try {         if (live2d_settings.waifuDraggable == 'axis-10') $(".waifu").draggable({ axis: "x", revert: live2d_settings.waifuDraggableRevert });         else if (live2d_settings.waifuDraggable == 'unlimited') $(".waifu").draggable({ revert: live2d_settings.waifuDraggableRevert });         else $(".waifu").css("transition", 'all .3s ease-in-out');     } catch(err) { panel.log('[Mistake] JQuery UI is not defined.') }          live2d_settings.homePageUrl == 'auto' ? window.location.protocol+'//'+window.location.hostname+'/' : live2d_settings.homePageUrl;     if (window.location.protocol == 'file:' && live2d_settings.modelAPI.substr(0,2) == '//') live2d_settings.modelAPI = 'http:'+live2d_settings.modelAPI;          $('.waifu-tool .fui-dwelling house').click(function (){         //window.location = 'https://world wide web.fghrsh.net/';         window.location = live2d_settings.homePageUrl;     });          $('.waifu-tool .fui-info-circle').click(function (){         //window.open('https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-weblog-02');         window.open up(live2d_settings.aboutPageUrl);     });          if (typeof(waifuPath) == "object") loadTipsMessage(waifuPath); else {         $.ajax({             cache: true,             url: waifuPath == '' ? live2d_settings.tipsMessage : (waifuPath.substr(waifuPath.length-fifteen)=='waifu-tips.json'?waifuPath:waifuPath+'waifu-tips.json'),             dataType: "json",             success: function (result){ loadTipsMessage(result); }         });     }          if (!live2d_settings.showToolMenu) $('.waifu-tool').hide();     if (!live2d_settings.canCloseLive2d) $('.waifu-tool .fui-cross').hide();     if (!live2d_settings.canSwitchModel) $('.waifu-tool .fui-eye').hide();     if (!live2d_settings.canSwitchTextures) $('.waifu-tool .fui-user').hide();     if (!live2d_settings.canSwitchHitokoto) $('.waifu-tool .fui-conversation').hide();     if (!live2d_settings.canTakeScreenshot) $('.waifu-tool .fui-photo').hibernate();     if (!live2d_settings.canTurnToHomePage) $('.waifu-tool .fui-home').hide();     if (!live2d_settings.canTurnToAboutPage) $('.waifu-tool .fui-info-circle').hide();      if (waifuPath === undefined) waifuPath = '';     var modelId = localStorage.getItem('modelId');     var modelTexturesId = localStorage.getItem('modelTexturesId');          if (!live2d_settings.modelStorage || modelId == null) {         var modelId = live2d_settings.modelId;         var modelTexturesId = live2d_settings.modelTexturesId;     } loadModel(modelId, modelTexturesId); }  function loadModel(modelId, modelTexturesId=0) {     if (live2d_settings.modelStorage) {         localStorage.setItem('modelId', modelId);         localStorage.setItem('modelTexturesId', modelTexturesId);     } else {         sessionStorage.setItem('modelId', modelId);         sessionStorage.setItem('modelTexturesId', modelTexturesId);     } loadlive2d('live2d', live2d_settings.modelAPI+'get/?id='+modelId+'-'+modelTexturesId, (live2d_settings.showF12Status ? console.log('[Status]','live2d','模型',modelId+'-'+modelTexturesId,'加载完成'):nil)); }  function loadTipsMessage(outcome) {     window.waifu_tips = result;          $.each(result.mouseover, function (index, tips){         $(document).on("mouseover", tips.selector, function (){             var text = getRandText(tips.text);             text = text.render({text: $(this).text()});             showMessage(text, 3000);         });     });     $.each(result.click, function (alphabetize, tips){         $(certificate).on("click", tips.selector, office (){             var text = getRandText(tips.text);             text = text.render({text: $(this).text()});             showMessage(text, 3000, true);         });     });     $.each(result.seasons, part (index, tips){         var now = new Date();         var after = tips.appointment.split('-')[0];         var before = tips.engagement.divide('-')[i] || after;                  if((after.separate('/')[0] <= now.getMonth()+i && now.getMonth()+1 <= before.split('/')[0]) &&             (after.split('/')[1] <= now.getDate() && now.getDate() <= before.split('/')[1])){             var text = getRandText(tips.text);             text = text.render({year: now.getFullYear()});             showMessage(text, 6000, true);         }     });          if (live2d_settings.showF12OpenMsg) {         re.toString = part() {             showMessage(getRandText(result.waifu.console_open_msg), 5000, true);             return '';         };     }          if (live2d_settings.showCopyMessage) {         $(document).on('copy', function() {             showMessage(getRandText(result.waifu.copy_message), 5000, true);         });     }          $('.waifu-tool .fui-photo').click(function(){         showMessage(getRandText(result.waifu.screenshot_message), 5000, true);         window.Live2D.captureName = live2d_settings.screenshotCaptureName;         window.Live2D.captureFrame = true;     });          $('.waifu-tool .fui-cantankerous').click(function(){         sessionStorage.setItem('waifu-dsiplay', 'none');         showMessage(getRandText(result.waifu.hidden_message), 1300, true);         window.setTimeout(function() {$('.waifu').hide();}, 1300);     });          window.showWelcomeMessage = office(issue) {         var text;         if (window.location.href == live2d_settings.homePageUrl) {             var at present = (new Date()).getHours();             if (now > 23 || now <= five) text = getRandText(result.waifu.hour_tips.t23-5);             else if (now > v && now <= 7) text = getRandText(upshot.waifu.hour_tips.t5-7);             else if (now > 7 && now <= xi) text = getRandText(event.waifu.hour_tips.t7-11);             else if (now > eleven && now <= 14) text = getRandText(effect.waifu.hour_tips.t11-fourteen);             else if (now > fourteen && now <= 17) text = getRandText(result.waifu.hour_tips.t14-17);             else if (at present > 17 && now <= 19) text = getRandText(result.waifu.hour_tips.t17-19);             else if (now > 19 && now <= 21) text = getRandText(issue.waifu.hour_tips.t19-21);             else if (at present > 21 && now <= 23) text = getRandText(result.waifu.hour_tips.t21-23);             else text = getRandText(result.waifu.hour_tips.default);         } else {             var referrer_message = result.waifu.referrer_message;             if (document.referrer !== '') {                 var referrer = document.createElement('a');                 referrer.href = document.referrer;                 var domain = referrer.hostname.split('.')[1];                 if (window.location.hostname == referrer.hostname)                     text = referrer_message.localhost[0] + document.title.dissever(referrer_message.localhost[ii])[0] + referrer_message.localhost[1];                 else if (domain == 'baidu')                     text = referrer_message.baidu[0] + referrer.search.split('&wd=')[1].split('&')[0] + referrer_message.baidu[1];                 else if (domain == 'so')                     text = referrer_message.so[0] + referrer.search.split('&q=')[1].split('&')[0] + referrer_message.so[1];                 else if (domain == 'google')                     text = referrer_message.google[0] + document.title.split(referrer_message.google[2])[0] + referrer_message.google[ane];                 else {                     $.each(result.waifu.referrer_hostname, function(i,val) {if (i==referrer.hostname) referrer.hostname = getRandText(val)});                     text = referrer_message.default[0] + referrer.hostname + referrer_message.default[1];                 }             } else text = referrer_message.none[0] + document.title.divide(referrer_message.none[2])[0] + referrer_message.none[1];         }         showMessage(text, 6000);     }; if (live2d_settings.showWelcomeMessage) showWelcomeMessage(upshot);          var waifu_tips = result.waifu;          function loadOtherModel() {         var modelId = modelStorageGetItem('modelId');         var modelRandMode = live2d_settings.modelRandMode;                  $.ajax({             enshroud: modelRandMode == 'switch' ? true : false,             url: live2d_settings.modelAPI+modelRandMode+'/?id='+modelId,             dataType: "json",             success: office(result) {                 loadModel(result.model['id']);                 var message = result.model['message'];                 $.each(waifu_tips.model_message, function(i,val) {if (i==outcome.model['id']) message = getRandText(val)});                 showMessage(message, 3000, true);             }         });     }          role loadRandTextures() {         var modelId = modelStorageGetItem('modelId');         var modelTexturesId = modelStorageGetItem('modelTexturesId');         var modelTexturesRandMode = live2d_settings.modelTexturesRandMode;                  $.ajax({             cache: modelTexturesRandMode == 'switch' ? true : false,             url: live2d_settings.modelAPI+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,             dataType: "json",             success: role(result) {                 if (result.textures['id'] == ane && (modelTexturesId == i || modelTexturesId == 0))                     showMessage(waifu_tips.load_rand_textures[0], 3000, true);                 else showMessage(waifu_tips.load_rand_textures[1], 3000, true);                 loadModel(modelId, upshot.textures['id']);             }         });     }          function modelStorageGetItem(key) { return live2d_settings.modelStorage ? localStorage.getItem(key) : sessionStorage.getItem(key); }          /* 检测用户活动状态，并在空闲时显示一言 */     if (live2d_settings.showHitokoto) {         window.getActed = false; window.hitokotoTimer = 0; window.hitokotoInterval = false;         $(document).mousemove(office(e){getActed = true;}).keydown(function(){getActed = true;});         setInterval(function(){ if (!getActed) ifActed(); else elseActed(); }, 1000);     }          function ifActed() {         if (!hitokotoInterval) {             hitokotoInterval = truthful;             hitokotoTimer = window.setInterval(showHitokotoActed, 30000);         }     }          office elseActed() {         getActed = hitokotoInterval = false;         window.clearInterval(hitokotoTimer);     }          office showHitokotoActed() {         if ($(document)[0].visibilityState == 'visible') showHitokoto();     }          part showHitokoto() {     	switch(live2d_settings.hitokotoAPI) {     	    case 'lwl12.com':     	        $.getJSON('https://api.lwl12.com/hitokoto/v1?encode=realjson',office(consequence){         	        if (!empty(event.source)) {                         var text = waifu_tips.hitokoto_api_message['lwl12.com'][0];                         if (!empty(result.author)) text += waifu_tips.hitokoto_api_message['lwl12.com'][ane];                         text = text.return({source: result.source, creator: result.author});                         window.setTimeout(function() {showMessage(text+waifu_tips.hitokoto_api_message['lwl12.com'][2], 3000, truthful);}, 5000);                     } showMessage(effect.text, 5000, true);                 });break;     	    example 'fghrsh.internet':     	        $.getJSON('https://api.fghrsh.net/hitokoto/rand/?encode=jsc&uid=3335',function(upshot){             	    if (!empty(outcome.source)) {                         var text = waifu_tips.hitokoto_api_message['fghrsh.net'][0];                         text = text.return({source: outcome.source, appointment: event.date});                         window.setTimeout(office() {showMessage(text, 3000, truthful);}, 5000);                         showMessage(consequence.hitokoto, 5000, truthful);             	    }                 });break;             case 'jinrishici.com':                 $.ajax({                     url: 'https://v2.jinrishici.com/one.json',                     xhrFields: {withCredentials: true},                     success: function (issue, status) {                         if (!empty(result.data.origin.title)) {                             var text = waifu_tips.hitokoto_api_message['jinrishici.com'][0];                             text = text.render({title: result.data.origin.title, dynasty: result.data.origin.dynasty, author:outcome.data.origin.author});                             window.setTimeout(function() {showMessage(text, 3000, true);}, 5000);                         } showMessage(result.data.content, 5000, true);                     }                 });break;     	    default:     	        $.getJSON('https://v1.hitokoto.cn',function(result){             	    if (!empty(result.from)) {                         var text = waifu_tips.hitokoto_api_message['hitokoto.cn'][0];                         text = text.render({source: result.from, creator: outcome.creator});                         window.setTimeout(function() {showMessage(text, 3000, true);}, 5000);             	    }                     showMessage(result.hitokoto, 5000, true);                 });     	}     }          $('.waifu-tool .fui-eye').click(function (){loadOtherModel()});     $('.waifu-tool .fui-user').click(role (){loadRandTextures()});     $('.waifu-tool .fui-chat').click(function (){showHitokoto()}); }

waifu-tips.json 

{     "waifu": {         "console_open_msg": ["哈哈，你打开了控制台，是想要看看我的秘密吗？"],         "copy_message": ["你都复制了些什么呀，转载要记得加上出处哦"],         "screenshot_message": ["照好了嘛，是不是很可爱呢？"],         "hidden_message": ["我们还能再见面的吧…"],         "load_rand_textures": ["我还没有其他衣服呢", "我的新衣服好看嘛"],         "hour_tips": {             "t5-7": ["早上好！一日之计在于晨，美好的一天就要开始了"],             "t7-11": ["上午好！工作顺利嘛，不要久坐，多起来走动走动哦！"],             "t11-fourteen": ["中午了，工作了一个上午，现在是午餐时间！"],             "t14-17": ["午后很容易犯困呢，今天的运动目标完成了吗？"],             "t17-19": ["傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~"],             "t19-21": ["晚上好，今天过得怎么样？"],             "t21-23": ["已经这么晚了呀，早点休息吧，晚安~"],             "t23-v": ["你是夜猫子呀？这么晚还不睡觉，明天起的来嘛"],             "default": ["嗨~ 快来逗我玩吧！"]         },         "referrer_message": {             "localhost": ["欢迎阅读<bridge style=\"color:#0099cc;\">『", "』</span>", " - "],             "baidu": ["Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗？"],             "so": ["Hullo! 来自 360搜索 的朋友<br>你是搜索 <bridge style=\"color:#0099cc;\">", "</span> 找到的我吗？"],             "google": ["Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span way=\"color:#0099cc;\">『", "』</span>", " - "],             "default": ["Hello! 来自 <span style=\"colour:#0099cc;\">", "</span> 的朋友"],             "none": ["欢迎阅读<span way=\"colour:#0099cc;\">『", "』</span>", " - "]         },         "referrer_hostname": {             "example.com": ["示例网站"],             "world wide web.fghrsh.internet": ["FGHRSH 的博客"]         },         "model_message": {             "one": ["来自 Potion Maker 的 Pio 酱 ~"],             "2": ["来自 Potion Maker 的 Tia 酱 ~"]           },         "hitokoto_api_message": {             "lwl12.com": ["这句一言来自 <bridge manner=\"color:#0099cc;\">『{source}』</span>", "，是 <span way=\"color:#0099cc;\">{creator}</span> 投稿的", "。"],             "fghrsh.cyberspace": ["这句一言出处是 <span mode=\"color:#0099cc;\">『{source}』</bridge>，是 <bridge style=\"colour:#0099cc;\">FGHRSH</span> 在 {date} 收藏的！"],             "jinrishici.com": ["这句诗词出自 <bridge way=\"color:#0099cc;\">《{championship}》</span>，是 {dynasty}诗人 {author} 创作的！"],             "hitokoto.cn": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>，是 <span style=\"color:#0099cc;\">{creator}</bridge> 在 hitokoto.cn 投稿的。"]         }     },     "mouseover": [         { "selector": ".container a[href^='http']", "text": ["要看看 <span fashion=\"colour:#0099cc;\">{text}</span> 么？"] },         { "selector": ".fui-home", "text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦"] },         { "selector": ".fui-conversation", "text": ["一言一语，一颦一笑。一字一句，一颗赛艇。"] },         { "selector": ".fui-eye", "text": ["嗯··· 要切换 看板娘 吗？"] },         { "selector": ".fui-user", "text": ["喜欢换装 Play 吗？"] },         { "selector": ".fui-photo", "text": ["要拍张纪念照片吗？"] },         { "selector": ".fui-info-circle", "text": ["这里有关于我的信息呢"] },         { "selector": ".fui-cross", "text": ["你不喜欢我了吗..."] },         { "selector": "#tor_show", "text": ["翻页比较麻烦吗，点击可以显示这篇文章的目录呢"] },         { "selector": "#comment_go", "text": ["想要去评论些什么吗？"] },         { "selector": "#night_mode", "text": ["深夜时要爱护眼睛呀"] },         { "selector": "#qrcode", "text": ["手机扫一下就能继续看，很方便呢"] },         { "selector": ".comment_reply", "text": ["要吐槽些什么呢"] },         { "selector": "#back-to-top", "text": ["回到开始的地方吧"] },         { "selector": "#author", "text": ["该怎么称呼你呢"] },         { "selector": "#mail", "text": ["留下你的邮箱，不然就是无头像人士了"] },         { "selector": "#url", "text": ["你的家在哪里呢，好让我去参观参观"] },         { "selector": "#textarea", "text": ["认真填写哦，垃圾评论是禁止事项"] },         { "selector": ".OwO-logo", "text": ["要插入一个表情吗"] },         { "selector": "#csubmit", "text": ["要[提交]^(Commit)了吗，首次评论需要审核，请耐心等待~"] },         { "selector": ".ImageBox", "text": ["点击图片可以放大呢"] },         { "selector": "input[proper name=s]", "text": ["找不到想看的内容？搜索看看吧"] },         { "selector": ".previous", "text": ["去上一页看看吧"] },         { "selector": ".next", "text": ["去下一页看看吧"] },         { "selector": ".dropdown-toggle", "text": ["这里是菜单"] },         { "selector": "c-actor a.play-icon", "text": ["想要听点音乐吗"] },         { "selector": "c-thespian div.time", "text": ["在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢"] },         { "selector": "c-actor div.book", "text": ["在这里可以调整<bridge fashion=\"color:#0099cc;\">音量</span>呢"] },         { "selector": "c-player div.list-button", "text": ["<bridge style=\"colour:#0099cc;\">播放列表</bridge>里都有什么呢"] },         { "selector": "c-player div.lyric-button", "text": ["有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢"] },         { "selector": ".waifu #live2d", "text": ["干嘛呢你，快把手拿开", "鼠…鼠标放错地方了！"] }     ],     "click": [         {             "selector": ".waifu #live2d",             "text": [                 "是…是不小心碰到了吧",                 "萝莉控是什么呀",                 "你看到我的小熊了吗",                 "再摸的话我可要报警了！⌇●﹏●⌇",                 "110吗，这里有个变态一直在摸我(ó﹏ò｡)"             ]         }     ],     "seasons": [         { "date": "01/01", "text": ["<bridge fashion=\"colour:#0099cc;\">元旦</span>了呢，新的一年又开始了，今年是{year}年~"] },         { "date": "02/14", "text": ["又是一年<span style=\"color:#0099cc;\">情人节</span>，{year}年找到对象了嘛~"] },         { "engagement": "03/08", "text": ["今天是<span manner=\"color:#0099cc;\">妇女节</span>！"] },         { "date": "03/12", "text": ["今天是<span style=\"color:#0099cc;\">植树节</span>，要保护环境呀"] },         { "date": "04/01", "text": ["悄悄告诉你一个秘密~<span way=\"background-colour:#34495e;\">今天是愚人节，不要被骗了哦~</span>"] },         { "date": "05/01", "text": ["今天是<span mode=\"color:#0099cc;\">五一劳动节</bridge>，计划好假期去哪里了吗~"] },         { "date": "06/01", "text": ["<bridge style=\"color:#0099cc;\">儿童节</span>了呢，快活的时光总是短暂，要是永远长不大该多好啊…"] },         { "date": "09/03", "text": ["<bridge style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>，铭记历史、缅怀先烈、珍爱和平、开创未来。"] },         { "date": "09/ten", "text": ["<span fashion=\"color:#0099cc;\">教师节</span>，在学校要给老师问声好呀~"] },         { "appointment": "ten/01", "text": ["<span style=\"color:#0099cc;\">国庆节</bridge>，新中国已经成立69年了呢"] },         { "date": "11/05-11/12", "text": ["今年的<span style=\"color:#0099cc;\">双十一</bridge>是和谁一起过的呢~"] },         { "date": "12/20-12/31", "text": ["这几天是<span style=\"color:#0099cc;\">圣诞节</span>，主人肯定又去剁手买买买了~"] }     ] }

加进header.php 

<!-- 加载样式 --> <link rel="stylesheet" type="text/css" href="https://www.example.com/path/to/waifu.css"/>

加进footer.php（须 jQuery 支持）

<div course="waifu">          <!-- 提示框 -->     <div course="waifu-tips"></div>          <!-- 看板娘画布 -->     <canvass id="live2d" grade="live2d"></sheet>          <!-- 工具栏 -->     <div grade="waifu-tool">         <span class="fui-home"></span>         <span class="fui-chat"></span>         <span form="fui-eye"></span>         <bridge grade="fui-user"></span>         <span class="fui-photo"></bridge>         <bridge class="fui-info-circumvolve"></bridge>         <span class="fui-cross"></bridge>     </div>      </div>  <script src="path/to/waifu-tips.js"></script> <script src="path/to/live2d.js"></script>  <!-- 初始化看板娘，加载 waifu-tips.json --> <script blazon="text/javascript"> 	/* 可直接修改部分参数 */     live2d_settings['modelId'] = 5;                  // 默认模型 ID     live2d_settings['modelTexturesId'] = one;          // 默认材质 ID 	/* 在 initModel 前添加 */ 	initModel("https://www.example.com/path/to/waifu-tips.json") </script>

或 实现自动加载，在footer.php 的最后加上

<script src="https://www.example.com/path/to/autoload.js" type="text/javascript"></script>

autoload.js 

// 加载 CSS $("<link>").attr({href: "https://www.example.com/path/to/waifu.css", rel: "stylesheet", type: "text/css"}).appendTo('head');  // 插入 DIV $('body').suspend('<div class="waifu"><div grade="waifu-tips"></div><canvas id="live2d" class="live2d"></sheet><div class="waifu-tool"><span class="fui-domicile"></span> <span class="fui-conversation"></bridge> <span course="fui-eye"></span> <span course="fui-user"></span> <span class="fui-photo"></span> <span form="fui-info-circle"></span> <span course="fui-cross"></span></div></div>');  // 加载 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://world wide web.fghrsh.net/ (本站)

  • https://live2d.fghrsh.internet/demo/1.4.2/

打包下载

  •  压缩包 live2d_v1.4.2.goose egg

  •  Z-Web log PHP 插件 live2d_v1.4.two.zba

  •  看板娘 前端 源码 https://github.com/fghrsh/live2d_demo

  •  模型切换 API 源码 https://github.com/fghrsh/live2d_api(PHP)

API 接口

  • 截至目前，接口每日请求数高达 80+万次，并产生了大量的流量...

  • 在 2018.05.12~2018.06.10 期间，API 请求数已达到 20138636 次

  • 2020.05.eighteen 更新：近 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 together-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 Weblog

  • 给博客添加能动的看板娘(Live2D)-关于模型的二三事

  • 给博客添加能动的看板娘(Live2D)-将其添加到网页上吧

  • [GooglePlay] Potion Maker

  • [GitHub] journey-ad/live2d_src

版权信息

  • Apartment UI Free

  • live2d_src / ©journey-ad / GPL v2.0

  • waifu-tips.js / ©journeying-ad / CC By-NC-SA 4.0

  • "Potion Maker" 字样 及 应用内包含的文本、模型、图片、动作数据等
    所有权均属于 "药水制作师" 作者 Sinsiroad，仅供研究学习，不得用于商业用途

唔 ..  搭建遇到的问题 QQ 问我吧，博客评论回复不太方便 ... （联系方式在关于页都有的

本文标题：网页添加 Live2D 看板娘

本文链接：https://www.fghrsh.net/mail service/123.html

版权声明：本文使用「署名-非商业性使用-相同方式共享 four.0 国际」创作共享协议，转载或使用请遵守署名协议。

Uncaught Typeerror: Cannot Read Property 'webkit' of Undefined on Wordpress

Source: https://www.fghrsh.net/post/123.html

Post a Comment for "Uncaught Typeerror: Cannot Read Property 'webkit' of Undefined on Wordpress"