小人预览效果
效果预览: https://www.cqwxhn.xin/.
预览地址可能出现加载较慢的情况,等几秒就可以看到了~~
图片:
小人的目光会跟着鼠标移动~~更多功能自己去挖掘吧 哈哈哈
如何显示小人
废话不多说、上源码、
首先肯定是导入小人物的资源了
导入的话只要导入一个js文件
<!-- 导入js资源 注意路径不要写错 -->
<script src="live2dw/lib/L2Dwidget.min.js"></script>
//初始化小人物 需设置属性pluginRootPath: "live2dw/"指明资源跟路径
L2Dwidget.init({
pluginRootPath: "live2dw/",//资源root路径
pluginJsPath: "lib/",//js相对root的路径
pluginModelPath: "assets/",//模型相对root的路径
tagMode: !1,
debug: !1,
model: {
scale: 2,
jsonPath: "live2dw/assets/asuna_33.model.json"
},
display: {//大小位置什么的自己慢慢调就是了
position: "left",//定位
width: 130,//宽度
height: 210,//高度
hOffset: -40,//左右
vOffset: 0//上下
},
mobile: {
show: !1
},
log: !1
});
完成上述代码,如果不出现路径错误就可以在页面看到小人了~第一次写博客,还有点小激动哈哈哈
资源地址
GitHub地址:https://github.com/jamesluozhiwei/resources.git
百度网盘链接: https://pan.baidu.com/s/1AybRuXIJ_EjD8FgiOjrJzw 提取码: m63y 复制这段内容后打开百度网盘手机App,操作更方便哦
CSDN地址:https://download.csdn.net/download/qq_38403662/10850893