12

jQueryoffset（）関数について質問があります。メールアイコンをクリックした後、自分のサイトで「友達にメール」ウィンドウを表示するために使用しています。

ただし、ウィンドウはアイコンの位置ではなく、ブラウザのウィンドウの右側に貼り付けられて表示されます。http://pec.solarismedia.net/calendarday.htmlで実際の動作を確認できます

$（ "。emailFriend"）。hide（）;
    $（ "。emailIcon"）。on（ "click"、function（e）{
        $（ "。emailFriend"）。css（{
            「位置」：「絶対」、
            "左"：$（this）.offset（）。left、
            "top"：$（this）.offset（）。top
        }）。fadeIn（500）;
        falseを返します。
    }）;

意図と現実の違いを示す写真があります。

4

2 に答える 2

16

#container持っているからposition: relative;です。したがって、電子メールボックスの絶対設定は、＃containerを基準にしています。プロパティを削除するか、次のleftようなものでの値を計算する必要があります。

$(this).offset().left - $('#container').offset().left
于 2012-11-19T07:18:48.127 に答える
3

位置をそのまま使用します。.position（）メソッドを使用すると、オフセットされた親を基準にした要素の現在の位置を取得できます。これを.offset（）と比較してください。これは、ドキュメントに対する現在の位置を取得します。

$(".emailFriend").insertBefore('.emailIcon').hide();
$(".emailIcon").on("click", function(e) {
    $(".emailFriend").css({
        "position": "absolute", 
        "left": $(this).position().left, 
        "top": $(this).position().top
    }).fadeIn(500);
    return false; 
});

appendTo（'。userTools'）を追加しました。別の要素と同じ位置に表示されている要素は、同じ要素内にある必要があります。その後、位置が機能し、レイアウトを変更しても機能します。

何らかの理由でdom構造を変更したくない場合は、次のようなものを使用する必要があります。 

$(".emailFriend").hide();
$(".emailIcon").on("click", function(e) {
    $(".emailFriend").css({
        "position": "absolute", 
        "left": $(this).offset().left-$(".emailFriend").offsetParent().offset().left, 
        "top": $(this).offset().top-$(".emailFriend").offsetParent().offset().top
    }).fadeIn(500);
    return false; 
});
于 2012-11-19T07:38:23.463 に答える