javascript - 检测光标距离屏幕中心多少像素

Question

我正在尝试检测有多少检测到光标远离窗口中心的像素数。

使用 javascript 或 jQuery 将返回值添加到 var？

如果这可以附加到一个元素上，那就更好了。因此 var 会随着您的移动以及您的鼠标离元素中心点越来越远而更新。

我什至不确定这是可能的，因此没有代码。谢谢

Answer 1

这是你想要的吗？将 onmousemove 事件附加到窗口并使用窗口高度和宽度减去当前鼠标位置？

var disFromCenterX = 0,
    disFromCenterY = 0
window.onmousemove = function(e) {
  disFromCenterX = Math.abs(window.innerWidth/2 - e.pageX);
  disFromCenterY = Math.abs(window.innerHeight/2 - e.pageY);
  console.log("distance from center x: " + disFromCenterX);
  console.log("distance from center y: " + disFromCenterY);
}

元素上的相同逻辑

var disFromCenterX = 0,
   disFromCenterY = 0
document.querySelector("#div").onmousemove = function(e) {
  var rect = this.getBoundingClientRect();
  disFromCenterX = Math.abs(this.clientWidth/2 - (e.pageX - rect.left));
  disFromCenterY = Math.abs(this.clientHeight/2 - (e.pageY - rect.top));
  console.log("distance from center x: " + disFromCenterX);
  console.log("distance from center y: " + disFromCenterY);
}

#div {
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

<div id="div"></div>