1

我有一个收集点击事件的页面，event.pageX我event.pageY想将这些位置按比例映射到另一个页面上的 600 像素 x 750 像素框。这意味着如果框中有其他页面的屏幕截图，则单击位置的标记将在同一位置直观地显示。

我知道我有($('body').width(), $('body').height())、(document.body.offSetWidth, document.body.offSetHeight)和(screen.width, screen.height)，但我不太确定如何最好地将它们结合起来以获得准确的比率。

目前我只是在使用（在 sudo 代码中）：

x_ratio = 600 / document.body.offSetWidth
y_ratio = 750 / document.body.offSetHeight

new_x_position = event.pageX * x_ratio
new_y_position = event.pageY * y_ratio

然后框内点击事件的标记是

<div id='click_marker' 
    style="position: relative; top: new_y_position px; left: new_x_position px;">
</div>

但这似乎无法保持跨浏览器和屏幕尺寸的准确性。我想在一个浏览器和屏幕尺寸中获取点击位置，并能够准确地将其映射到任何浏览器和屏幕尺寸。

我怎样才能始终如一地准确地进行此计算？

4

2 回答 2

0

pageX 和 pageY，为您提供相对于网页而不是屏幕的坐标
使用 screenX 和 screenY 获取相对于屏幕的坐标，或者使用 clientX 和 clientY 获取相对于浏览器客户端窗口的坐标。这些事件字段可能并非在所有浏览器中都可用。

于 2012-04-26T23:13:05.793 回答
0

首先，您需要确定要从中转换坐标的区域。它是浏览器窗口还是文档正文？即，如果您有滚动条，您是否希望有人向下滚动并单击页面底部也出现在您的 600x750 框的底部或外部？从您的问题中显然不清楚。

event.pageX 和 event.pageY 提供从文档的左边缘和上边缘的位置因此使用 body.offsetWidth 将仅在 body 填充整个文档时保持一致。请检查以下小提琴以了解： http: //jsfiddle.net/Exceeder/YPHkr/ - 注意越过右身体边界如何使相对坐标超过 1.0

最简单的做法是获取 $(window).width() 和 $(window).height() - 如果不需要考虑滚动位置。否则，您将需要计算滚动位置，并且算法会有点困难。

确定后，您需要获得正确的宽度和高度。相关问题：不同浏览器的 document.body.offsetWidth 变化

于 2012-04-26T23:40:00.247 回答