浏览器与jQuery和CutyCapt的相对定位

Question

我一直在使用CutyCapt来拍摄几个网页的屏幕截图并取得了巨大的成功。我现在面临的挑战是在那些代表用户点击位置的屏幕截图上画几个点。

CutyCapt在拍摄屏幕截图之前会经历一个将网页大小调整为滚动宽度的过程。这非常有用，因为你只获得内容，而不是页面的背景（如果有的话）。

我的挑战是尝试将用户的鼠标X坐标映射到屏幕截图。显然，用户具有不同的屏幕分辨率，并且其浏览器窗口可以打开不同的大小。下图显示了3个具有相同徽标的示例。例如，假设徽标是“内容”区域左边缘的10个像素（红色）。

在每种情况下，对于任何解决方案，我都需要一个JavaScript例程来计算徽标的X坐标是10.再次，挑战（我认为）是不同的分辨率。在中心对齐的示例中，从浏览器左边缘（黑色）测量的徽标位置随浏览器大小的变化而不同。左对齐的示例应该很简单，因为徽标在屏幕调整大小时不会移动。

有人能想出一种计算页面可滚动宽度的方法吗？换句话说，我正在寻找一个JavaScript解决方案来计算水平滚动条显示之前浏览器窗口的最小宽度。我需要在不知道任何元素ID或类名的情况下执行此操作。

感谢您的帮助！

Answer 1

您可以获得元素所需的总空间：

function getWidth(x){
    var totalWidth = x.width();
    totalWidth += parseInt(x.css("padding-left"), 10) + parseInt(x.css("padding-right"), 10); //Total Padding Width
    totalWidth += parseInt(x.css("margin-left"), 10) + parseInt(x.css("margin-right"), 10); //Total Margin Width
    totalWidth += parseInt(x.css("borderLeftWidth"), 10) + parseInt(x.css("borderRightWidth"), 10); //Total Border Width 
    return totalWidth;

 }

您必须将其添加到元素的位置：

$('#yourlogo').offset().left;

所以：

var window-width =  $('#yourlogo').offset().left + getWidth($('#yourlogo'));

希望这会有所帮助： - ??

Answer 2

如果我理解正确，那么这应该适合你！

var browserWidth=$(window).width();   // returns width of browser viewport

它应该返回人物浏览器窗口的宽度。

希望这有帮助！