网上找资料的时候 看到一些网页上会有个二次元卡通公仔，悬浮在页面上，而且公仔的视线方向还会随着鼠标的位置而转动，感觉挺有趣挺好奇是怎么做到的，就自己在网上找了下最终实现了效果并放不到了自己的网站上，算是给单调的内容添加点趣味性，效果可以查看本站页面的右下角卡通小人。
这里贴一下自己的代码 实现比较简单 源码PC下载可以查看页面右侧相关下载栏目
var L2DwidgetCDN = "https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"; loadScriptAsync(L2DwidgetCDN).then(() => { //这里使用了异步加载的方式 避免cdn挂了导致页面其他js出问题，这个方式也可以避免修改前端html 只修改js文件即可 try { load2cs(); } catch (e) { } }); function load2cs() { var childs = [];//存放不同的公仔 childs.push("https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json"); childs.push("https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json"); childs.push("https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json"); childs.push("https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json"); childs.push("https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json"); childs.push("https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json"); childs.push("https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json"); childs.push("https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json"); childs.push("https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json"); childs.push("https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json"); childs.push("https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json"); childs.push("https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json"); childs.push("https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json"); L2Dwidget.init({ "model": { jsonPath: childs[childs.length-1], "scale": 1 }, "display": { "position": "right", "width": 120, "height": 300, "hOffset": 15, "vOffset": 20 }, "mobile": { "show": false, "scale": 0.3 }, "react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } }); }
随机推荐
