原文来自https://www.fghrsh.net/post/123.html

Live2D 看板娘 v1.4 / Demo 3

- 内置 waifu-tips.json (博客园等网站引用推荐)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D 看板娘 v1.4 / Demo 3</title>
<link rel="stylesheet" type="text/css" href="assets/waifu.min.css?v=1.4.2"/>
</head>
<body style="font-family: 'Microsoft YaHei';">
<h2><a href="https://www.fghrsh.net/post/123.html" style="color: #38A3DB; text-decoration: none;">Live2D 看板娘 v1.4</a> / Demo 3</h2>
<h3> - 内置 waifu-tips.json <span style="font-size: 12px;color: #666">(博客园等网站引用推荐)</span></h3>
<ul>
<li><a href="demo1-default.html" style="color: #38A3DB; text-decoration: none;" title="常规博客引用推荐">Demo 1 - 常规引用</a></li>
<li><a href="demo2-autoload.html" style="color: #38A3DB; text-decoration: none;" title="一般网站引用推荐">Demo 2 - 自动加载 autoload.js</a></li>
<li><span title="博客园等网站引用推荐">Demo 3 (当前面页)</span></li>
</ul> <!-- waifu-tips.js 依赖 JQuery 库 -->
<script src="assets/jquery.min.js?v=3.3.1"></script> <!-- 实现拖动效果,需引入 JQuery UI -->
<script src="assets/jquery-ui.min.js?v=1.12.1"></script> <script type="text/javascript">
/* 把 autoload.js 内容直接内置 */
$('body').append('<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>');
$.ajax({url: 'assets/waifu-tips.js?v=1.4.2',dataType:"script", cache: true, async: false});
$.ajax({url: 'assets/live2d.min.js?v=1.0.5',dataType:"script", cache: true, async: false}); /* 可直接修改部分参数 */
live2d_settings['hitokotoAPI'] = 'jinrishici.com'; // 一言 API
live2d_settings['modelId'] = 2; // 默认模型 ID
live2d_settings['modelTexturesId'] = 6; // 默认材质 ID
live2d_settings['modelStorage'] = false; // 不储存模型 ID
live2d_settings['canCloseLive2d'] = false; // 隐藏 关闭看板娘 按钮
live2d_settings['canTurnToHomePage'] = false; // 隐藏 返回首页 按钮
live2d_settings['waifuSize'] = '600x535'; // 看板娘大小
live2d_settings['waifuTipsSize'] = '570x150'; // 提示框大小
live2d_settings['waifuFontSize'] = '30px'; // 提示框字体
live2d_settings['waifuEdgeSide'] = 'right:30'; // 看板娘贴边方向
live2d_settings['waifuToolFont'] = '36px'; // 工具栏字体
live2d_settings['waifuToolLine'] = '50px'; // 工具栏行高
live2d_settings['waifuToolTop'] = '-60px'; // 工具栏顶部边距
live2d_settings['waifuDraggable'] = 'axis-x'; // 拖拽样式 /* 内置 waifu-tips.json */
initModel({
"waifu": {
"console_open_msg": ["哈哈,你打开了控制台,是想要看看我的秘密吗?"],
"copy_message": ["你都复制了些什么呀,转载要记得加上出处哦"],
"screenshot_message": ["照好了嘛,是不是很可爱呢?"],
"hidden_message": ["我们还能再见面的吧…"],
"load_rand_textures": ["我还没有其他衣服呢", "我的新衣服好看嘛"],
"hour_tips": {
"t5-7": ["早上好!一日之计在于晨,美好的一天就要开始了"],
"t7-11": ["上午好!工作顺利嘛,不要久坐,多起来走动走动哦!"],
"t11-14": ["中午了,工作了一个上午,现在是午餐时间!"],
"t14-17": ["午后很容易犯困呢,今天的运动目标完成了吗?"],
"t17-19": ["傍晚了!窗外夕阳的景色很美丽呢,最美不过夕阳红~"],
"t19-21": ["晚上好,今天过得怎么样?"],
"t21-23": ["已经这么晚了呀,早点休息吧,晚安~"],
"t23-5": ["你是夜猫子呀?这么晚还不睡觉,明天起的来嘛"],
"default": ["嗨~ 快来逗我玩吧!"]
},
"referrer_message": {
"localhost": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
"baidu": ["Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗?"],
"so": ["Hello! 来自 360搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗?"],
"google": ["Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
"default": ["Hello! 来自 <span style=\"color:#0099cc;\">", "</span> 的朋友"],
"none": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "]
},
"referrer_hostname": {
"example.com": ["示例网站"],
"www.fghrsh.net": ["FGHRSH 的博客"]
},
"model_message": {
"1": ["来自 Potion Maker 的 Pio 酱 ~"],
"2": ["来自 Potion Maker 的 Tia 酱 ~"]
},
"hitokoto_api_message": {
"lwl12.com": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>", ",是 <span style=\"color:#0099cc;\">{creator}</span> 投稿的", "。"],
"fghrsh.net": ["这句一言出处是 <span style=\"color:#0099cc;\">『{source}』</span>,是 <span style=\"color:#0099cc;\">FGHRSH</span> 在 {date} 收藏的!"],
"jinrishici.com": ["这句诗词出自 <span style=\"color:#0099cc;\">《{title}》</span>,是 {dynasty}诗人 {author} 创作的!"],
"hitokoto.cn": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>,是 <span style=\"color:#0099cc;\">{creator}</span> 在 hitokoto.cn 投稿的。"]
}
},
"mouseover": [
{ "selector": ".container a[href^='http']", "text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么?"] },
{ "selector": ".fui-home", "text": ["点击前往首页,想回到上一页可以使用浏览器的后退功能哦"] },
{ "selector": ".fui-chat", "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[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": ["在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢"] },
{ "selector": "c-player div.volume", "text": ["在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢"] },
{ "selector": "c-player div.list-button", "text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"] },
{ "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": ["<span style=\"color:#0099cc;\">元旦</span>了呢,新的一年又开始了,今年是{year}年~"] },
{ "date": "02/14", "text": ["又是一年<span style=\"color:#0099cc;\">情人节</span>,{year}年找到对象了嘛~"] },
{ "date": "03/08", "text": ["今天是<span style=\"color:#0099cc;\">妇女节</span>!"] },
{ "date": "03/12", "text": ["今天是<span style=\"color:#0099cc;\">植树节</span>,要保护环境呀"] },
{ "date": "04/01", "text": ["悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节,不要被骗了哦~</span>"] },
{ "date": "05/01", "text": ["今天是<span style=\"color:#0099cc;\">五一劳动节</span>,计划好假期去哪里了吗~"] },
{ "date": "06/01", "text": ["<span style=\"color:#0099cc;\">儿童节</span>了呢,快活的时光总是短暂,要是永远长不大该多好啊…"] },
{ "date": "09/03", "text": ["<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>,铭记历史、缅怀先烈、珍爱和平、开创未来。"] },
{ "date": "09/10", "text": ["<span style=\"color:#0099cc;\">教师节</span>,在学校要给老师问声好呀~"] },
{ "date": "10/01", "text": ["<span style=\"color:#0099cc;\">国庆节</span>,新中国已经成立69年了呢"] },
{ "date": "11/05-11/12", "text": ["今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~"] },
{ "date": "12/20-12/31", "text": ["这几天是<span style=\"color:#0099cc;\">圣诞节</span>,主人肯定又去剁手买买买了~"] }
]
});
</script>
</body>
</html>
 

注:本地遇到报跨域问题是正常的,发布到IIS就正常了。

若原博客失效可联系我QQ:599067663@qq.com

live2d的更多相关文章

  1. Live2D WebGL实现

    demo预览:http://www.kakinuma.date/l2d.html 官方:http://www.live2d.com/en/ sdk下载:https://link.zhihu.com/? ...

  2. 【Android】用Cubism 2制作自己的Live2D——官方App样例源码学习(1)!

    前言- 上几篇文章,我们一个一个的研究了Cubism官方提供的Android使用Live2D的简单例子,但是依旧和大家平时见到的还是有很大差距的.在研究了代码差不多一周以后,我决定还是用文字的形式记录 ...

  3. 【Android】用Cubism 2制作自己的Live2D——来制作动态壁纸吧!

    前言- Andorid SDK下载  baidu云 提取码:19jm 这次我们就来研究一下官方的例子之一的liveWallPaper,也就是开发Android的动态壁纸 先来看看这个例子运行的结果: ...

  4. 【Android】用Cubism 2制作自己的Live2D——android sdk样本的下载与Android studio编译!

    前言- 在浏览Live2d说明书的时候我无意中发现了一个有趣的东西,就是android sdk中居然自带动态壁纸!那就让我们来试试吧,说明书此页的网址连接——中文版||日文版 Android开发所必需 ...

  5. 【Android】用Cubism 2制作自己的Live2D——官方App样例源码学习(2)!

    前言- 明确了项目目录的结构,但是结构什么的也太"抽象"了. 本篇开始上代码! 模型的绘制- 前几天的学习中,live2d的绘制有了一些了解了,在Android端使用OpenGL ...

  6. 【Android】用Cubism 2制作自己的Live2D——初探Live2D在Android上的运行!

    前言- 上一次我们成功运行了官方给我们的样本,是不是很有干劲啊?!这次我们就来看看Live2D是怎么在手机上运行的! 准备- 上次运行成功的官方样本——第一次我们先看简单的,就是那个名字叫Sample ...

  7. 【Android】用Cubism 2制作自己的Live2D——软件的安装与破解!

    前言- 上文我们简单的了解了Cubism的情况,但是Cubism 2.X安装好以后如果不进行破解只能使用Free版本,这是我们接受不了的,我们是专业的.是来学习的,怎么能不用Pro版本呢?所以话不多说 ...

  8. 【Android】用Cubism 2制作自己的Live2D——初见!

    前言- 现在很多手游的UI上都不约而同的放置一个Live2D模型,这仿佛已经成为了一个业界的潜规则之类的东西.作为一名深受手机游戏毒害的90后,我也没有忘记小时候励志当一名技术宅的梦想,也想试试自己做 ...

  9. live2d+cocos2dx示例工程

    环境 : win10 64bit visual studio 2013 cocos2d-x-3.9 Live2D_SDK_OpenGL_2.0.06_2_sample_3.3_en 首先安装visua ...

  10. 用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 热更新Live2D

    live2D是一个很强大的2D动画组件.我们可以使用AS3脚本对它进行热更新. live2D在Unity中的使用请看这里: 如何获取Live2D 总得来说,我们可以先去live2D官网下载它的Unit ...

随机推荐

  1. request.setAttribute()和session.setAttribute()的区别详解

    我们在Servlet和页面间传值时,经常会用到request.setAttribute()和session.setAttribute(),下面是两段示例用法 request.setAttribute( ...

  2. C++ 编译错误记录

    C++ _ZSt28__throw_bad_array_new_lengthv1 编译错误 出现场景:类似代码 vector<vector<int>> grid = {{1, ...

  3. vue-cli的安装步骤

    1.安装Node.js 在Node.js官网 https://nodejs.org/zh-cn/下载安装包,修改安装路径到其它盘,如 G:\Program Files 2.设置 cnpm的下载路径和缓 ...

  4. Codeforces 559E - Gerald and Path(dp)

    题面传送门 真·难度 *3000 的 D1E hb 跟我们说"做不出来不太应该". 首先我们将所有线段按 \(a_i\) 从小到大排序,一个很显然的想法是 \(dp_{i,j,d} ...

  5. mingling

    mysql> USE mon Reading table information for completion of table and column names You can turn of ...

  6. Mysql查询优化汇总 order by优化例子,group by优化例子,limit优化例子,优化建议

    Mysql查询优化汇总 order by优化例子,group by优化例子,limit优化例子,优化建议 索引 索引是一种存储引擎快速查询记录的一种数据结构. 注意 MYSQL一次查询只能使用一个索引 ...

  7. Macbookpro vim操作键说明

    i → Insert 模式,按 ESC 回到 Normal 模式. x → 删当前光标所在的一个字符.:wq → 存盘 + 退出 (:w 存盘, :q 退出) (陈皓注::w 后可以跟文件名)dd → ...

  8. ggplot 局部放大

    需要安装包:ggforce,下面以R自带数据做局部放大演示. require(ggplot2) require(ggforce) require(reshape2) data(CO2) co2< ...

  9. android Fragment跳转Fragment

    android Fragment跳转Fragment,最新的android studio3 在系统模板建立的BottomNavigationView 中跳转方式 此版本下不能用FragmentMana ...

  10. Python三元表达式,列表推导式,字典生成式

    目录 1. 三元表达式 2. 列表推导式 3. 字典生成式 3.1 字典生成式 3.2 zip()方法 1. 三元表达式 """ 条件成立时的返回值 if 条件 else ...