想在页面上增加跟随鼠标的十字瞄准线, X 线偏移了,不得其解。。。
var ox = document.createElement('div');
var oy = document.createElement('div');
ox.style.width = '100%';
ox.style.height = '1px';
ox.style.backgroundColor = '#FF0000';
ox.style.position = 'fixed';
ox.style.left = 0;
document.body.appendChild(ox);
oy.style.height = '100%';
oy.style.width = '1px';
oy.style.backgroundColor = '#FF0000';
oy.style.position = 'fixed';
oy.style.top = 0;
document.body.appendChild(oy);
document.onmousemove = function (e) {
//写法一
var e = e || event;
var x = e.pageX;
var y = e.pageY;
//写法二
// var e = e || window.event; //event 的兼容写法
// var x = e.pageX || e.clientX + scroll().left; //获取 pageX 的兼容写法
// var y = e.pageY || e.clientY + scroll().top;
ox.style.top = y + 'px';
oy.style.left = x + 'px';
};
//写法二要用到的函数
function scroll() {
return {
"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}
}
Y 线是正常跟随鼠标的,X 轴向下偏移了半个屏幕,请教大家问题所在?
目前只试过 IE 和 Firefox,应该不是兼容问题? 只想在 Firefox 上能跑就可以了。。。
答:https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageX
pageX 是一个由 MouseEvent 接口返回的相对于整个文档的 x (水平)坐标以像素为单位的只读属性。
这个属性将基于文档的边缘,考虑任何页面的水平方向上的滚动。举个例子,如果页面向右滚动 200px 并出现了滚动条,这部分在窗口之外,然后鼠标点击距离窗口左边 100px 的位置,pageX 所返回的值将是 300 。
答:你可以直接更换鼠标样式啊,不是更轻量吗
答:[https://www.w3school.com.cn/cssref/pr_class_cursor.asp]( https://www.w3school.com.cn/cssref/pr_class_cursor.asp)
答:应该为 clientX 和 clientY
0条评论