javascript - 具有不同大小内容的绝对中心 *above* div

Question

我有这个脚本：http: //jsfiddle.net/ZhXf5/3/

当您将鼠标悬停在其中一个框上时，“弹出”div 将位于具有不同大小图像的框上方。如何使这些不同大小的图像居中在 div 上方？

Answer 1

加载图像以正确放置缩略图后，您需要做更多的数学运算（更新的 jsfiddle）：

$("document").ready(function () {

    $("div.box").hover(function() {

        var positionleft = $(this).position().left + $(this).outerWidth() / 2;
        var positiontop = $(this).position().top;

        var img = $("<img src='"+$(this).text()+"' />");
        $("div.popup div.image").html(img);

        img.load(function() {
            $("div.popup").css({
                display: 'block',
                left: positionleft - (img.outerWidth() / 2),
                top: positiontop - img.outerHeight() - 20,
            });   
        });
    });   

});​