一.科班直接复制以下代码到vscode打开网页即可(小白请往下看教程)
二.小白详细教程(没有代码编译软件一样能做出来看到效果)
三.视频展示
一.科班直接复制以下代码到vscode打开网页即可(小白请往下看教程)
javascript网页二次元小人(眼睛跟随鼠标移动)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script><script>L2Dwidget.init({"model": {// 替换模型 // jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",// jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",// jsonPath: 'https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json',jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json","scale": 1},"display": {"position": "right","width": 120,"height": 300,"hOffset": 0,"vOffset": -20},"mobile": {"show": false,"scale": 0.3},"react": {"opacityDefault": 0.8,"opacityOnHover": 0.2}});</script>
</body></html>二.小白详细教程(没有代码编译软件一样能做出来看到效果)
1.首先我们在个人电脑桌面新建一个文本文档.txt
然后你会得到下面一个新建 文本文档.txt文件
2.接着直接把下面的代码复制然后粘贴到这个文本文档里面去
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script><script>L2Dwidget.init({"model": {// 替换模型 // jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",// jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",// jsonPath: 'https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json',// jsonPath: 'https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json',jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json","scale": 1},"display": {"position": "right","width": 120,"height": 300,"hOffset": 0,"vOffset": -20},"mobile": {"show": false,"scale": 0.3},"react": {"opacityDefault": 0.8,"opacityOnHover": 0.2}});</script>
</body></html>粘贴完之后如下图所示:
3.最后一步将这个新建 文本文档.txt文件后缀名更改为.html格式的文件
会提示你确定更改吗,这里直接选中 是
然后就变成了你默认浏览器的图标样式,接下来直接双击打开就可以看到啦
三.视频展示
javascript网页二次元小人(眼睛跟随鼠标移动)
