我在某个网页上获取鼠标坐标并保存。
$("div#container").mousemove( function(e) {
client_x = e.pageX;
client_y = e.pageY;
// save x,y
});
现在其他人加载同一页面,我想向他们显示相同的坐标(x,x位置)。
如果我必须考虑div#容器与浏览器中的位置不同(考虑屏幕分辨率和滚动),我怎么能得到同样的观点呢?
答案 0 :(得分:6)
我会使用父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.
});
然后,在其他用户显示屏上,将其添加到偏移后显示坐标。
答案 1 :(得分:0)
由于您在问题中提到的变量,这似乎不可能。屏幕分辨率是主要原因,但也取决于它们的窗口有多大。首先,您可能认为可以计算鼠标相对于固定点的位置,例如显示的div
(例如,使用Stack Overflow,其中站点的主容器不会随浏览器窗口调整大小) 。但如果他们的窗口小于容器,你会对他们所看到的内容做出一些错误的假设。
话虽这么说,你可以随时只计算相对于你知道屏幕上使用$.offset()
的固定元素的鼠标位置,并假设他们的屏幕显示所有内容(或检查$(window)
大小)并正在使用“正常”观看条件。
答案 2 :(得分:0)
您可以在示例中使用offset()
返回的值:
$("div#container").offset().left
和
$("div#container").offset().top
将它们减去e.pageX
和e.pageY
。
offset()
函数为您提供匹配元素相对于文档的位置(请参阅docs),因此如果用户向下滚动则没有问题。