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()whichreturnとobjectプロパティを含むtopとleftです。これは、 に対する要素のオフセットですviewport。

上記の方法はIE >= 5、いくつかの簡単なハックで機能しますhttp://ejohn.org/blog/getboundingclientrect-is-awesome/を参照してください

jQuery.offset()または、ページにある場合は、メソッドを使用できjQueryます。elements offsetこれは一貫してクロスブラウザを返します。

offsetから上記の要素を取得するの<iframe>は、どこから位置を取得しようとしているかに応じて、少しトリッキーにelementなる可能性があり<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 に答える