博客右下角的动态人物（live2d）看板娘

最新推荐文章于 2024-04-12 15:44:06 发布

学习吖

最新推荐文章于 2024-04-12 15:44:06 发布

阅读量759

点赞数 1

文章标签：前端 json javascript

本文链接：https://blog.csdn.net/weixin_68531033/article/details/128421770

版权

效果图

代码如下

 <!-- 看娘板 -->
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，有两种可切换,喜欢哪个打开注释,注释掉另一个就行了
// jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
"scale": 1
},
"display": {
"superSample": 2,
"width": 200,//小萝莉的宽度
"height": 350,//小萝莉的高度
"position": "right",//看板娘的表现位置
"hOffset": 50,
"vOffset": -20
}
});

如果在博客园设置

将一下代码粘贴进博客侧边栏公告

 <!-- 看娘板 -->
    
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型，有两种可切换,喜欢哪个打开注释,注释掉另一个就行了
// jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
"scale": 1
},
"display": {
"superSample": 2,
"width": 200,//小萝莉的宽度
"height": 350,//小萝莉的高度
"position": "right",//看板娘的表现位置
"hOffset": 50,
"vOffset": -20
}
});

可以切换模型的看板娘

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
	</head>
	<body>
	</body>
	<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</html>