Live2D！wordpress网页看板娘添加教程

　　能够转换 Live3D 实体模型了(临时仅有 Pio 和 Tia 酱;

　　适用 任意改装 和 次序改装(搜集了目前为止的 Pio、Tia 整套服饰;

　　以下几点必须依据 本身状况 开展改动，不可以立即套入;

　　款式style.css

　　.waifu { position: fixed; bottom: 0; left: 0; z-index: 1; font-size: 0; transition: all .三秒 ease-in-out; -webkit-transform: translateY(3px); transform: translateY(3px);}.waifu:hover { -webkit-transform: translateY(0); transform: translateY(0);}@media (max-width: 768px) { .waifu { display: none; }}.waifu-tips { opacity: 0; width: 251080x; height: 70px; 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); font-size: 12px; 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; font-size: 14px; position: absolute;}.waifu:hover .waifu-tool { display: block;}.waifu-tool span { display: block; cursor: pointer; color: #5b7c7d; line-height: 20px; 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

　　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 < length; i) { variable = variables[i]; currentObject = currentObject[variable]; if (currentObject === undefined || currentObject === null) return ''; } return currentObject; });};var re = /x/;console.log(re);re.toString = function() { showMessage('嘿嘿，你打开了控制面板，是要想看一下秘密全集吗?', 5000, true); return '';};$(document).on('copy', function (){ showMessage('你都拷贝了些什么啊，转截要还记得再加上出處哦', 5000, true);});$('.waifu-tool .fui-home').click(function (){ //window.location = 'https://www.fghrsh.net/'; window.location = window.location.protocol '//' window.location.hostname '/'});$('.waifu-tool .fui-eye').click(function (){ loadOtherModel();});$('.waifu-tool .fui-chat').click(function (){ showHitokoto();});$('.waifu-tool .fui-user').click(function (){ loadRandModel();});$('.waifu-tool .fui-info-circle').click(function (){ //window.open('https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02'); window.open('https://www.fghrsh.net/post/123.html');});$('.waifu-tool .fui-cross').click(function (){ sessionStorage.setItem('waifu-dsiplay', 'none'); showMessage('我希望有一天能与重要的人相逢', 1300, true); window.setTimeout(function() {$('.waifu').hide();}, 1300);});$('.waifu-tool .fui-photo').click(function (){ showMessage('照好啦嘛，是否很可爱呢?', 5000, true); window.Live3D.captureName = 'live2d.png'; window.Live3D.captureFrame = true;});(function (){ var text; //var SiteIndexUrl = 'https://www.fghrsh.net/'; // 手动式特定首页 var SiteIndexUrl = window.location.protocol '//' window.location.hostname '/'; // 全自动获得首页 if (window.location.href == SiteIndexUrl) { // 如果是首页 var now = (new Date()).getHours(); if (now > 23 || now <= 5) { text = '你是夜猫呀?很晚还晚上不睡觉，明日起的来嘛'; } else if (now > 5 && now <= 7) { text = '早安!一日之计取决于晨，美好的一天就需要开始了'; } else if (now > 7 && now <= 11) { text = '上午好!一切顺利嘛，不必长坐，多起來行走行走哦!'; } else if (now > 11 && now <= 14) { text = '下午了，工作中了一个早上，现在是午饭时间!'; } else if (now > 14 && now <= 17) { text = '下午很总想睡觉呢，今日的健身运动总体目标进行了没有?'; } else if (now > 17 && now <= 19) { text = '黄昏了!窗前落日的风景美丽迷人呢，最美不过夕阳红老年~'; } else if (now > 19 && now <= 21) { text = '中午好，今日过得如何?'; } else if (now > 21 && now <= 23) { text = '早已很晚了呀，早点睡吧，晚安好梦~'; } else { text = '嗨~ 赶紧来逗我玩吧狼人杀!'; } } else { 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 = '热烈欢迎阅读文章『' document.title.split(' - ')[0] '』'; } else if (domain == 'baidu') { text = 'Hello! 来源于 网页搜索 的盆友

　　你是检索 ' referrer.search.split('&wd=')[1].split('&')[0] ' 寻找的我吗?'; } else if (domain == 'so') { text = 'Hello! 来源于 360搜索 的盆友

　　你是检索 ' referrer.search.split('&q=')[1].split('&')[0] ' 寻找的我吗?'; } else if (domain == 'google') { text = 'Hello! 来源于 谷歌搜索引擎 的盆友

　　热烈欢迎阅读文章『' document.title.split(' - ')[0] '』'; } else { text = 'Hello! 来源于 ' referrer.hostname ' 的盆友'; } } else { text = '热烈欢迎阅读文章『' document.title.split(' - ')[0] '』'; } } showMessage(text, 6000);})();//window.hitokotoTimer = window.setInterval(showHitokoto,30000);/* 检验客户激活状态，并在空余时 按时表明一言 */var getActed = false;window.hitokotoTimer = 0;var hitokotoInterval = false;$(document).mousemove(function(e){getActed = true;}).keydown(function(){getActed = true;});setInterval(function() { if (!getActed) ifActed(); else elseActed(); }, 1000);function ifActed() { if (!hitokotoInterval) { hitokotoInterval = true; hitokotoTimer = window.setInterval(showHitokoto, 30000); }}function elseActed() { getActed = hitokotoInterval = false; window.clearInterval(hitokotoTimer);}function showHitokoto(){ $.getJSON('//api.fghrsh.net/hitokoto/rand/?encode=jsc&uid=3335',function(result){ var text = '这句话一言出處是 『{source}』，是 FGHRSH 在 {date} 个人收藏的!'; text = text.render({source: result.source, date: result.date}); showMessage(result.hitokoto, 5000); window.setTimeout(function() {showMessage(text, 3000);}, 5000); });}function showMessage(text, timeout, flag){ if(flag || sessionStorage.getItem('waifu-text') === '' || sessionStorage.getItem('waifu-text') === null){ if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length 1)-1]; //console.log(text); if(flag) sessionStorage.setItem('waifu-text', text); $('.waifu-tips').stop(); $('.waifu-tips').html(text).fadeTo(200, 1); hideMessage(timeout); }}function hideMessage(timeout=5000){ $('.waifu-tips').stop().css('opacity',1); $('.waifu-tips').delay(timeout).fadeTo(200, 0); window.setTimeout(function() {sessionStorage.removeItem('waifu-text');}, timeout);}function initModel(waifuPath=''){ var modelId = localStorage.getItem('modelId'); var modelTexturesId = localStorage.getItem('modelTexturesId'); if (modelId == null) { /* 初次浏览载入 特定实体模型 的 特定材料 */ var modelId = 1; // 实体模型 ID var modelTexturesId = 53 // 材料 ID } loadModel(modelId, modelTexturesId);$.ajax({ cache: true, url: waifuPath 'waifu-tips.json', dataType: "json", success: function (result){ $.each(result.mouseover, function (index, tips){ $(document).on("mouseover", tips.selector, function (){ var text = tips.text; if(Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length 1)-1]; text = text.render({text: $(this).text()}); showMessage(text, 3000); }); }); $.each(result.click, function (index, tips){ $(document).on("click", tips.selector, function (){ var text = tips.text; if(Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length 1)-1]; text = text.render({text: $(this).text()}); showMessage(text, 3000, true); }); }); $.each(result.seasons, function (index, tips){ var now = new Date(); var after = tips.date.split('-')[0]; var before = tips.date.split('-')[1] || after; if((after.split('/')[0] <= now.getMonth() 1 && now.getMonth() 1 <= before.split('/')[0]) && (after.split('/')[1] <= now.getDate() && now.getDate() <= before.split('/')[1])){ var text = tips.text; if(Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length 1)-1]; text = text.render({year: now.getFullYear()}); showMessage(text, 6000, true); } }); } });}function loadModel(modelId, modelTexturesId=0){ localStorage.setItem('modelId', modelId); localStorage.setItem('modelTexturesId', modelTexturesId); loadlive2d('live2d', '//api.fghrsh.net/live2d/get/?id=' modelId '-' modelTexturesId, console.log('live2d','实体模型 ' modelId '-' modelTexturesId ' 载入进行'));}function loadRandModel(){ var modelId = localStorage.getItem('modelId'); var modelTexturesId = localStorage.getItem('modelTexturesId'); var modelTexturesRandMode = 'rand'; // 可选 'rand'(任意), 'switch'(次序) $.ajax({ cache: false, url: '//api.fghrsh.net/live2d/' modelTexturesRandMode '_textures/?id=' modelId '-' modelTexturesId, dataType: "json", success: function (result){ if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) { showMessage('我都沒有别的衣服裤子呢', 3000, true); } else { showMessage('我的新衣服漂亮嘛', 3000, true); } loadModel(modelId, result.textures['id']); } });}function loadOtherModel(){ var modelId = localStorage.getItem('modelId'); var modelTexturesRandMode = 'switch'; // 可选 'rand'(任意), 'switch'(次序) $.ajax({ cache: false, url: '//api.fghrsh.net/live2d/' modelTexturesRandMode '/?id=' modelId, dataType: "json", success: function (result){ loadModel(result.model['id']); showMessage(result.model['message'], 3000, true); } });}

　　waifu-tips.json

　　{ "mouseover": [ { "selector": ".container a[href^='http']", "text": ["要看一下 {text} 么?"] }, { "selector": ".fui-home", "text": ["点一下前去主页，想返回上一页能够应用电脑浏览器的倒退作用哦"] }, { "selector": "#tor_show", "text": ["换页较为不便吗，点一下能够表明本文的文件目录呢"] }, { "selector": "#comment_go,.fui-chat", "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[name=s]", "text": ["找不着爱看的內容?检索瞧瞧吧"] }, { "selector": ".previous", "text": ["去上一页瞧瞧吧"] }, { "selector": ".next", "text": ["去下一页瞧瞧吧"] }, { "selector": ".dropdown-toggle", "text": ["这儿是莱单"] }, { "selector": "c-player a.play-icon", "text": ["要想听点歌曲吗"] }, { "selector": "c-player div.time", "text": ["在这儿能够调节播放视频进展呢"] }, { "selector": "c-player div.volume", "text": ["在这儿能够调节声音呢"] }, { "selector": "c-player div.list-button", "text": ["列表里都有什么呢"] }, { "selector": "c-player div.lyric-button", "text": ["有歌曲歌词得话就能跟随一起唱呢"] }, { "selector": ".waifu #live2d", "text": ["干啥呢你，快门把拿开", "鼠…电脑鼠标弄错地区了!"] } ], "click": [ { "selector": ".waifu #live2d", "text": ["是…是一不小心遇到了吧", "萝莉控是啥呀", "你见到我的小熊宝宝了没有", "再摸得话我可要警报了!⌇●﹏●⌇", "110吗，这儿有一个超级变态一直在摸我(ó﹏ò｡)"] } ]}

　　增加header.php

　　增加footer.php(须 jQuery 适用)

　　initModel("https://www.example.com/path/to/")

　　或 完成全自动载入，在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/live2d.js',dataType:"script",cache: true,async: false});$.ajax({url: 'https://www.example.com/path/to/waifu-tips.js',dataType:"script",cache: true,async: false});// 复位看板娘，会全自动载入特定文件目录下的 waifu-tips.jsoninitModel('https://www.example.com/path/to/');

　　参考文献

　　AD’s Blog 给blog加上会动的看板娘(Live3D)-有关实体模型的二三事 给blog加上会动的看板娘(Live3D)-将其加上到网页页面上吧 [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，仅作科学研究学习培训，不可用以商业行为; AD本实例教程转自FGHRSH 的blog