1

经过一些简化后，问题是当用户单击第一个图像时，我不知道如何将图像设置在另一个图像上。在这个 fiddle中更容易看到这一点。

有什么问题？我相信问题出在“相对”的div#problem元素上。如果您从 CSS中删除“位置：相对”，一切正常，但我需要这里的相对。

另外，我注意到如果我将“pin 容器”更改为替代容器（直接从HTML标记挂起）一切正常，但我需要相对 DIV中的“pin 容器” 。

真正的问题是什么？我想这.offset()会给我相对于文档中所述的文档的位置，并且.offset(coordinates)会做同样的事情。

注意：想法是黑盒子应该出现在与大图像相同的坐标中，但它似乎放错了位置。

NOTE2：我不知道这是否是问题所在，但我正在使用 Chrome 和 Firefox 开发 Ubuntu Linux。两种浏览器都显示错位的黑匣子。

NOTE3：目标是获取大图像的坐标并使用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 回答