使用 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

它应该返回用户浏览器窗口的宽度。

希望这有帮助！