Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

添加了拖拽看板娘的功能 #108

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
2 changes: 1 addition & 1 deletion autoload.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// 注意:live2d_path 参数应使用绝对路径
const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "https://fastly.jsdelivr.net/gh/pymastera/live2d-widget@latest/";
//const live2d_path = "/live2d-widget/";

// 封装异步加载资源的方法
Expand Down
54 changes: 54 additions & 0 deletions drag-waifu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
//待拖拽的元素
let wf = document.getElementById('waifu');
//获取元素与浏览器的宽高
setTimeout(main,5000);//延时3秒执行页面跳转方法

function main() {

let winWidth = window.innerWidth,
winHeight = window.innerHeight,
imgWidth = wf.offsetWidth,
imgHeight = wf.offsetHeight;
//在待拖拽的元素上绑定鼠标按下事件
wf.onmousedown = function (event) {
//兼容IE
event = event || window.event;
//阻止浏览器默认行为兼容IE的写法
event.preventDefault ? event.preventDefault() : event.returnValue = false;
//记录光标在图片按下时的坐标
let _offsetX = event.offsetX,
_offsetY = event.offsetY;
//绑定鼠标移动事件
document.onmousemove = function (event) {
//获取光标在可视窗口中的坐标
let _x = event.clientX,
_y = event.clientY;
//计算拖动的图片的定位的位置
let _left = _x - _offsetX,
_top = _y - _offsetY;
//判断是否在窗口范围内
if (_top < 0) { //上
_top = 0;
} else if (_top >= winHeight - imgHeight) { //下
_top = winHeight - imgHeight;
}
if (_left < 0) { //左
_left = 0;
} else if (_left >= winWidth - imgWidth) { //右
_left = winWidth - imgWidth;
}
//设置拖动过程中图片的定位
wf.style.top = _top + 'px';
wf.style.left = _left + 'px';
}
//绑定鼠标弹起事件
document.onmouseup = function () {
document.onmousemove = null;
}
}
//当浏览器的窗口大小被改变时重设宽高
window.onresize = function(){
winWidth = window.innerWidth;
winHeight = window.innerHeight;
}
}