Question

我在某个网页上获取鼠标坐标并保存。

$("div#container").mousemove( function(e) {
      client_x = e.pageX;
  client_y = e.pageY;

  // save x,y

});

现在其他人加载同一页面，我想向他们显示相同的坐标（x，x位置）。

如果我必须考虑div＃容器与浏览器中的位置不同（考虑屏幕分辨率和滚动），我怎么能得到同样的观点呢？

Answer 1

我会使用父div容器的$.offset().top和$.offset().left，并计算与鼠标光标的当前X和Y坐标之间的差异。

.offset()始终引用文档而不引用元素的父级。

例如：

$('#element').mousemove(function(e){
    var client_x = e.pageX;
    var client_y = e.pageY;
    var elementOffset = $(this).offset();
    client_x -= elementOffset.left;
    client_y -= elementOffset.top;

    // save x, y.
});

然后，在其他用户显示屏上，将其添加到偏移后显示坐标。

Answer 2

由于您在问题中提到的变量，这似乎不可能。屏幕分辨率是主要原因，但也取决于它们的窗口有多大。首先，您可能认为可以计算鼠标相对于固定点的位置，例如显示的div（例如，使用Stack Overflow，其中站点的主容器不会随浏览器窗口调整大小）。但如果他们的窗口小于容器，你会对他们所看到的内容做出一些错误的假设。

话虽这么说，你可以随时只计算相对于你知道屏幕上使用$.offset()的固定元素的鼠标位置，并假设他们的屏幕显示所有内容（或检查$(window)大小）并正在使用“正常”观看条件。

Answer 3

您可以在示例中使用offset()返回的值：

$("div#container").offset().left 和 $("div#container").offset().top

将它们减去e.pageX和e.pageY。

offset()函数为您提供匹配元素相对于文档的位置（请参阅docs），因此如果用户向下滚动则没有问题。

示例：http://jsfiddle.net/3jMRS/

鼠标位置和偏移量

3 个答案: