1

いくつかの単純化の後、問題は、ユーザーが最初の画像をクリックしたときに別の画像の上に画像を設定する方法がわからないことです。この fiddleでこれを確認する方が簡単です。

どうしたの？問題は「相対的な」div#problem要素だと思います。CSS から「 position: relative 」を削除すると、すべて正常に動作しますが、ここでは相対が必要です。

また、「ピン コンテナー」を別のもの ( HTMLタグから直接保留中) に変更すると、すべて正常に動作することに注意しましたが、相対 DIV内に「ピン コンテナー」が必要です。

本当の問題は何ですか？ドキュメントに記載されているように、ドキュメントに対する相対的な.offset()位置が得られ、同じことを行うと思いました。.offset(coordinates)

注: ブラック ボックスは大きな画像と同じ座標に表示されるはずですが、位置がずれているように見えます。

注2：それが問題かどうかはわかりませんが、ChromeとFirefoxを使用してUbuntu Linuxで作業しています。両方のブラウザで、ブラック ボックスが正しく配置されていません。

注 3 : 目標は、大きな画像の座標を取得し、ポジショニングを使用して同じ位置に小さなボックスを設定するabsoluteことです。margin大きな画像と同じものをブラックボックスに設定するようなトリックはありません、ごめんなさい。

4

2 に答える 2

2

.offset()ドキュメントに対する要素の位置を見つけます。コンテナ.position()内の場所を見つけるために使用したいようです。relative

http://jsfiddle.net/T7czp/200/を参照

また、元の画像にあるマージンを適用し、新しい寸法を適用する必要があります.css()

于 2012-12-10T17:34:33.777 に答える
1

.offset()ドキュメント全体に対する要素の位置を返します。必要なのは、オフセットの親に対する相対的な位置を取得することです(#innerこの場合)。それ.position()がそのためです。

$("img").click(function () {
    var offset = $(this).position(); // not offset!
    var $pin = $('<img>')
            .addClass('pin')
            .attr('src', "http://208.86.154.173/shared/images/black_box.png")
            .css({top: offset.top, left: offset.left}); //.offset() works, but shouldn't
    $("#pins").append($pin);
});​

ピンに 5px の余白 (元の画像と同じ余白) を追加すると、ピンは画像の左上隅に正確に表示されます。

于 2012-12-10T17:34:44.353 に答える