3

这可能已经被问过了，但我无法找到任何解决我想要做的事情的方法。

我试图找到事件对象上属性的神奇组合，以及滚动和其他偏移量，以提供元素相对于 iframe 中可能存在或不存在的最顶层窗口的位置。我这样做是为了在被鼠标悬停的元素右侧淡入一个小的（绝对定位的）图像。

我正在尝试获取 jQuery 悬停事件中的位置。我尝试了以下属性的不同组合：

$(element).position()
$(element).offset()
$(element).scrollTop()
$(element).scrollLeft();
$(document).scrollTop();
$(document).scrollLeft();
event.clientX
event.clientY
event.pageX
event.pageY

有没有人可以给出这些数字的函数或方程？

4

2 回答 2

3

现代浏览器中最简单的方法是document.querySelector('.foo').getBoundingClientRect()'return和object包含属性top和left，它们是元素相对于 . 的偏移量viewport。

上述方法适用于IE >= 5几个简单的技巧，请参阅http://ejohn.org/blog/getboundingclientrect-is-awesome/

或者，您可以使用该jQuery.offset()方法，如果您jQuery在页面上有。这将返回elements offset始终如一的跨浏览器。

从 an获取offset所述元素的the<iframe>可能会有点棘手，具体取决于您尝试从何处获取位置，即脚本运行在与element可能在 an 中的相同页面上<iframe>，或者在根页面element中运行<iframe>

如果你是第一种情况，只要你的元素被重新定位在里面的某个地方，你就不需要做任何事情，<iframe>因为你已经有了正确的偏移量。

如果您不在<iframe>您需要考虑的iframe.getBoundClientRect()偏移量，因为它element.getBoundingClientRect()是相对于它自己的viewport（<iframe>）

于 2012-08-14T16:12:32.703 回答
1

我已经设法解决了一些适用于这种情况的代码。希望这对将来的某人有所帮助：

var timeoutID;
$(element).hover(function () {
    // cancel any pending fades
    window.clearTimeout(timeoutID);

    var offset = {
        left: 0,
        top: 0
    };

    if (top !== self) {
        offset = top.$('#divContainingIframes').offset();
    }

    var that = $(this);
    var elementPosition = that.position();

    var xCoord = offset.left + // distance between screen and iframe
        elementPosition.left + // distance between iframe and element
        that.width() + // width of the element
        5; // 5 pixel padding

    var yCoord = offset.top + // distance between screen and iframe
        elementPosition.top; // distance between iframe and element

    // call the show function with xCoord and yCoord
}, function () {
    // don't fade immediately, wait a half second
    timeoutID = setTimeout(function () {
        // call some hide function
    }, 500);
});
于 2012-08-14T17:51:26.503 回答