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>

检测光标离开屏幕中心多少像素

1 个答案: