javascript - 使用 jQuery 和 CutyCapt 的浏览器相对定位

Question

我一直在使用 CutyCapt 截取几个网页的屏幕截图，并取得了巨大成功。我现在的挑战是在代表用户点击位置的屏幕截图上绘制几个点。

CutyCapt 在进行屏幕截图之前会经历一个将网页大小调整为滚动宽度的过程。这非常有用，因为您只会获得内容，而不会获得太多(如果有的话)页面背景。

我的挑战是尝试将用户的鼠标 X 坐标映射到屏幕截图。显然，用户的屏幕分辨率不同，浏览器窗口的大小也不同。下图显示了 3 个具有相同 Logo 的示例。例如，假设 Logo 距离“内容”区域(红色)的左边缘 10 个像素。

在每种情况下，对于任何分辨率，我都需要一个 JavaScript 例程来计算 Logo 的 X 坐标为 10。同样，挑战(我认为)是不同的分辨率。在居中对齐的示例中， Logo 的位置(从浏览器的左边缘(黑色)开始测量)随着浏览器大小的变化而不同。左对齐示例应该很简单，因为 Logo 不会随着屏幕大小的调整而移动。

谁能想出一种方法来计算页面的可滚动宽度？换句话说，我正在寻找一种 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'));

希望这有帮助:-？？