Question

我正在创建一堆图像缩略图，当悬停时将在工具提示中以完整大小显示。我的基础是this demo，而且效果很好。

然而，我想要将全尺寸图像显示在其缩略图下方的中心，而不管图像大小如何。现在，我的全尺寸图像将其左侧对齐在工具提示下方。我一直在玩offset值，但我无法让它工作。

谢谢！

我的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");
    });
});

我的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>

Answer 1

要将其显示在缩略图的中心位置，您需要处理另外一个缺少的变量，即 #preview宽度 。只需从 #preview左侧 减少#preview宽度的一半。然后你就可以在缩略图下面了。

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

<强> Working Fiddle

Answer 2

现在我的全尺寸图像将其左侧对齐工具提示。

这是因为，您的工具提示绝对定位，并且您正在计算left e.pageX属性，添加固定偏移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");

演示小提琴：http://jsfiddle.net/abhitalks/o6tkm85j/1/

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

2 个答案: