网站建设客户答疑-网页添加 Live2D 看板娘

2021-04-15 03:37 admin
--------

网站建设客户答疑

-------

装包免费下载

此处內容早已被作者掩藏,请键入认证码查询內容认证码:请关心本站手机微信微信公众号,回应“云客多”,获得认证码。在手机微信里检索“云客多微当场”或“jzfq1688”或手机微信扫描仪右边二维码都能够关心本站手机微信微信公众号。

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

近期不经意中又看到了 @Jad 大佬的blog,不拖坑了,加加加 233

在 dalao 的 waifu-ti凡科抠图.js 的基本上,完成了套 API,加上了以下作用

能够切换 Live2D 实体模型了(临时仅有 Pio 和 Tia 酱

适用 任意换装 和 次序换装(搜集了截至现阶段的 Pio、Tia 全套服饰

*需要依据 本身状况 开展订制,不可以立即套用(别的資源文档见 装包免费下载

** waifu-ti凡科抠图.js 的详尽设定表明,和 waifu-ti凡科抠图.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-ti凡科抠图 {
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: elli凡科抠图is;
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
}
.-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-ti凡科抠图.js

window.live2d_settings = Array(); /*

く__,.ヘヽ. / ,ー、 〉
\ , !-─‐-i / /´
/`ー L//`ヽ、 Live2D 管理看板娘 主要参数设定
/ /, /| , , , Version 1.4.2
イ / /-‐/ i L_ ハ ヽ! i Update 2018.11.12
レ ヘ 7イ`ト レ ァ-ト、!ハ| |
!,/7 0 ´0iソ| |
|.从 _ ,,,, / |./ | 网页页面加上 Live2D 管理看板娘
レ | i>.、,,__ _,.イ / .i |
レ | | / k_7_/レ ヽ, ハ. |
| |/i 〈|/ i ,.ヘ | i | Thanks
.|/ / i: ヘ! \ | journey-ad / journey-ad/live2d_src
kヽ>、ハ _,.ヘ、 /、! xiazeyu / xiazeyu/live2d-widget.js
! 〈//`T´ , \ ` 7 ーr Live2d Cubism SDK WebGL 2.1 Projrct All model authors.
レ ヽL__|___i,___,ンレ|ノ
ト-,/ |___./
ー !_,.:*********************************************************************************/

// 后端开发插口
live2d_settings[ modelAPI ] = ///api/ // 自建 API 改动这里
live2d_settings[ ti凡科抠图Message ] = waifu-ti凡科抠图.json // 同文件目录下可省略相对路径
live2d_settings[ hitokotoAPI ] = // 一言 API, , , '(古诗词)

// 默认设置实体模型
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[ eMessage ] = true; // 显示信息进到面页欢迎词

//管理看板娘款式设定
live2d_settings[ waifuSize ] = 280 250 // 管理看板娘尺寸,例如 280 250 , 600 535
live2d_settings[ waifuTi凡科抠图Size ] = 250 70 // 提醒框尺寸,例如 250 70 , 570 150
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 ] = // 有关页详细地址, {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 ]+>/g, ));

if(flag) sessionStorage.setItem( waifu-text , text);

$( .waifu-ti凡科抠图 ).stop();
$( .(text).fadeTo(200, 1);
if (timeout === undefined) timeout = 5000;
hideMessage(timeout);
}
}

function hideMessage(timeout) {
$( .waifu-ti凡科抠图 ).stop().css( opacity ,1);
if (timeout === undefined) timeout = 5000;
window.setTimeout(function() {sessionStorage.removeItem( waifu-text )}, timeout);
$( .waifu-ti凡科抠图 ).delay(timeout).fadeTo(200, 0);
}

function initModel(waifuPath, type) {
/* e message */
赞(1) 打赏 未经容许不可转载:E企盈小程序开发设计-热线: 网页页面加上 Live2D 管理看板娘 更多 (0) ---------

网站建设客户答疑

------------