3

我有一个名为“容器”的初始 div，它是height:100% width:100%俄克拉荷马州地图的图像。这个想法是，当用户点击地图的某个部分（对于这个例子，panhandle），div 切换到一个 div 是 panhandle 图像。我通过知道鼠标点击时的像素位置来确定用户点击的位置。

问题是，不同尺寸屏幕的像素值不同。下面是适用于我自己大小的窗口的代码，但是当我为实际程序运行代码时，窗口较小，因此if语句中描述的区域不在锅柄周围。

$(document).ready(function()
{
    $("#container").click(function(e)
    {
        var x = event.pageX;
        var y = event.pageY;

        if(x >= 45 && x <= 550 && y >= 245 && y <= 330) 
        {
            //alert('You clicked the panhandle!');
            $("#region1").toggle();
            $("#container").toggle();
        }
}); 
});

我想我需要改变我在if声明中处理这种情况的方式。你会如何处理这个问题？

4

2 回答 2

3

您需要在比较每个值之前对其进行缩放。将每个 x 乘以您的规范宽度并除以实际宽度，并对 y 和高度执行相同操作。

于 2011-03-11T15:26:38.053 回答
0

您不应该假设确定的像素值并期望您的网站可以在各种设备和浏览器上运行——尤其是在 iPad 或 Android 平板电脑等具有缩放和 dpi 设置等复杂功能的设备上。

我的建议是始终为您的位置/尺寸规格使用宽度和高度的百分比。例如，您的平移手柄可能位于 (0.23,0.76) 并且大小为 (0.12,0.08) 等。

在任何浏览器中，获取框尺寸并将这些 % 值相乘以获得实际像素值。

于 2011-03-11T15:24:53.657 回答