Javascript 对齐悬停工具提示以始终居中

我正在创建一组图像缩略图，当鼠标悬停时，这些缩略图将以全尺寸显示在工具提示中。我已经基于它，它工作得很好

但是，我希望无论图像大小如何，完整大小的图像都显示在其缩略图下方的中心位置。现在，我的全尺寸图像将其左侧对齐在工具提示下。我一直在玩弄

偏移量
值，但我无法让它工作


谢谢

我的JS：

$(document).ready(function () {
    xOffset = -50;
    yOffset = 0;

    $("a.preview").hover(function (e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<div id='preview'><div class='arrow'></div><img src='" + this.href + "' alt='Image preview' />" + c + "</div>");
        $("#preview")
            .css("top", (e.pageY - xOffset) + "px")
            .css("left", (e.pageX + yOffset) + "px")
            .fadeIn("fast");
    },

    function () {
        this.title = this.t;
        $("#preview").remove();
    });
    $("a.preview").mousemove(function (e) {
        $("#preview")
            .css("top", (e.pageY - xOffset) + "px")
            .css("left", (e.pageX + yOffset) + "px");
    });
});

$（文档）.ready（函数（）{
xOffset=-50；
yOffset=0；
$（“a.preview”）.hover（函数（e）{
this.t=this.title；
this.title=“”；
var c=（this.t！=”）？“
”+this.t:”；
$（“正文”）。追加（“+c+”）；
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）
.fadeIn（“快速”）；
},
函数（）{
this.title=this.t；
$（“#预览”）.remove（）；
});
$（“a.preview”）.mousemove（函数（e）{
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
});
});

我的HTML:

<ul>
    <li><a href="http://placehold.it/220x165" class="preview"><img src="http://placehold.it/40x40" alt="gallery thumbnail" /></a>

    </li>
    <li><a href="http://placehold.it/520x130" class="preview"><img src="http://placehold.it/40x40" alt="gallery thumbnail" /></a>

    </li>
</ul>







要将其显示在缩略图的正下方，您需要注意另一个遗漏的变量，即预览宽度。只需将
#预览
的宽度从
#预览
左侧减少一半即可。然后你会把它放在缩略图下面

var width1 = $("#preview").width() / 2;
$("#preview")
    .css("top", (e.pageY - xOffset) + "px")
    .css("left", (e.pageX + yOffset - width1) + "px")
    .fadeIn("fast");


因为它现在是我的全尺寸图像对齐它的左侧下方
工具提示

这是因为，您的工具提示是绝对定位的，您正在从
e.pageX
计算
left
属性，并添加一个固定偏移量
0px

我希望完整大小的图像显示在其下方居中
不考虑图像大小的缩略图

您可以快速完成的是，通过减小工具提示宽度的一半来计算
left
属性。可以使用
.outerWidth（）
方法计算工具提示的宽度

与此相反：

减少宽度的一半：

演示小提琴：


$("#preview")
    .css("top", (e.pageY - xOffset) + "px")
    .css("left", (e.pageX + yOffset) + "px")
    .fadeIn("fast");

var w = $("#preview").outerWidth();
$("#preview")
    .css("top", (e.pageY - xOffset) + "px")
    .css("left", (e.pageX + yOffset  - (w/2)) + "px")
    .fadeIn("fast");