Javascript 如何在元素中心将鼠标位置设置为0,0？

当光标位于红十字（元素的绝对中间）上时，我试图将左上角显示的坐标设置为0%和0%。 向左走会使X轴变成负数。当我上升时，Y轴也是如此。向右/向下应包含正值

如图所示，坐标现在分别为50%和50%。 可以找到此代码段的代码笔@

我确信我计算百分比的公式是错误的，但我似乎在任何地方都找不到我的答案。有人有我想要的黄金答案吗

谢谢

---

您的百分比公式是正确的。但是

this.offsetTop

和

this.offsetLeft

在HTML规范中定义为从元素的左上角开始测量，因此0%，0%坐标位于框的左上角

要想做你想做的事，你可以从

percX

和

percY

中减去50%：

let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = ((pageY / elHeight) * 100) - 50;
let percX = ((pageX / elWidth) * 100) - 50;

编辑（如果希望范围从-100%到100%）

只需将

percX

和

percY

乘以2：

let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = (((pageY / elHeight) * 100) - 50) * 2;
let percX = (((pageX / elWidth) * 100) - 50) * 2;

---

你的百分比公式是正确的。但是

this.offsetTop

和

this.offsetLeft

在HTML规范中定义为从元素的左上角开始测量，因此0%，0%坐标位于框的左上角

要想做你想做的事，你可以从

percX

和

percY

中减去50%：

let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = ((pageY / elHeight) * 100) - 50;
let percX = ((pageX / elWidth) * 100) - 50;

编辑（如果希望范围从-100%到100%）

只需将

percX

和

percY

乘以2：

let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = (((pageY / elHeight) * 100) - 50) * 2;
let percX = (((pageX / elWidth) * 100) - 50) * 2;

我想：

let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = (((pageY / elHeight) * 100)-50)*(-2);
let percX = (((pageX / elWidth) * 100)-50)*(2);

我想：

let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = (((pageY / elHeight) * 100)-50)*(-2);
let percX = (((pageX / elWidth) * 100)-50)*(2);

---

因此，如果你正在寻找-100%到100%这应该是工作天才！这确实是我要找的。非常感谢。因此，如果你正在寻找-100%到100%这应该是工作天才！这确实是我要找的。非常感谢，谢谢！就这么简单吧？xD如果我希望最大负数为100%，而不是50，该怎么办？这是很容易做到的吗？@MichaelKoelewijn如果我没弄错的话，是的：）@MichaelKoelewijn也很容易。只需将

percX

和

percY

乘以2。谢谢伯纳德。我现在完全明白这个公式了。这太容易了。。我不明白为什么我自己没有弄明白！谢谢就这么简单吧？xD如果我希望最大负数为100%，而不是50，该怎么办？这是很容易做到的吗？@MichaelKoelewijn如果我没弄错的话，是的：）@MichaelKoelewijn也很容易。只需将

percX

和

percY

乘以2。谢谢伯纳德。我现在完全明白这个公式了。这太容易了。。我不明白为什么我自己没有弄明白！