我创建了一个在鼠标移动时跟随鼠标 x 和 y 坐标的形状。您可以在此处查看结果:http://codepen.io/anon/pen/qNKgqo
这会很好用,形状位于鼠标光标的中心。不幸的是我有一些问题。
正如您在 demo 中看到的那样我有一个部分,它位于屏幕的顶部。在 HTML 标记的最顶部,您会注意到一个注释部分。如果删除注释标记,则会设置一个新部分。当您将鼠标悬停在元素上时,结果与之前相同,但是当您滚动到下一部分 - 三个拇指的那个部分时,您会注意到该形状没有以鼠标为中心,而是偏移了。只有当您将鼠标悬停在底部时,您才会看到一小块形状。
要使圆圈以鼠标光标的中心为中心,我使用以下脚本:
var target = $(this);
var dot = target.find('.pointer');
var height = dot.height();
var width = dot.width();
var offset = target.offset();
var top = offset.top;
var left = offset.left;
var mX = (event.clientX - left) - width / 2;
var mY = (event.clientY - top) - height / 2;
以上代码来自 mouseMove 函数,它将在鼠标移动时触发。
我的问题是我做错了什么或我的代码中缺少什么。当只有一个部分时,它可以正常工作,但在将另一部分添加到 HTML 标记后,它就会变得一团糟。
最佳答案
pageX and pageY:
相对于浏览器中完全呈现的内容区域的左上角。此引用点位于左上角的网址栏和后退按钮下方。该点可以位于浏览器窗口中的任何位置,如果页面中嵌入了可滚动页面并且用户移动了滚动条,则该点实际上可以更改位置。
因此使用pageX 和pageY 而不是clientX/Y:
var mX = (event.pageX - left) - width / 2;
var mY = (event.pageY - top) - height / 2;
有关更多详细信息,请阅读 clientX/Y and pageX/Y 之间的差异?
关于javascript - 为什么 clientX 和 Y 在滚动时会发生变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38634654/