live2d 在线切换卡通形象
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>live2d</title>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script></head>
<script type="text/javascript" src="live2dw/lib/L2Dwidget.min.js"></script>
<!-- <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> -->
<div style="font-size: 24px">
<span>在线选择:</span>
<a href="javascript:show('shizuku')">shizuku</a>
<a href="javascript:show('hibiki')">hibiki</a>
<a href="javascript:show('z16')">z16</a>
<a href="javascript:show('haruto')">haruto</a>
<a href="javascript:show('koharu')">koharu</a>
<a href="javascript:show('izumi')">izumi</a>
<a href="javascript:show('tsumiki')">tsumiki</a>
<a href="javascript:show('miku')">miku</a>
<a href="javascript:show('wanko')">wanko</a>
<a href="javascript:show('unitychan')">unitychan</a>
<a href="javascript:show('tororo')">白猫</a>
<a href="javascript:show('hijiki')">黑猫</a>
</div>
<script language="javascript" type="text/javascript">
var hibiki = 'https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json';
/* var shizuku = 'https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json';
var z16 = 'https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json';
var haruto = "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json";
var izumi = "https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json";
var tsumiki = "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json"; */
function show(obj) {
config.model.jsonPath = "https://unpkg.com/live2d-widget-model-"+obj+"@1.0.5/assets/"+obj+".model.json";
L2Dwidget.init(config);
}
// 配置文件官方API: https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
var config = {
model: {
jsonPath: '', // xxx.model.json 的路径
},
display: {
"position": "right", //看板娘的表现位置left
"width": 200, //小萝莉的宽度
"height": 450, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
mobile: {
show: true, // 是否在移动设备上显示
scale: 1, // 移动设备上的缩放
motion: true, // 移动设备是否开启重力感应
},
react: {
opacityDefault: 1, // 默认透明度
opacityOnHover: 1, // 鼠标移上透明度
},
}
window.onload = function () {
show("hibiki");
}
//https://www.cnblogs.com/ButterflyEffect/p/10839613.html 查看信息的一个地址
/* L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型,下面这个就是我觉得最可爱的小萝莉模型,替换时后面名字也要替换掉
//jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
jsonPath: "https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json",
//jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
"scale": 1
},
"display": {
"position": "left", //看板娘的表现位置
"width": 150, //小萝莉的宽度
"height": 350, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
}); */
</script>
</head>
<body>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战