0

我有一堆画廊图像，我显示为小缩略图（大约 50 像素大）。当用户将鼠标悬停在小图像上时，会“长出”一个更大的图像（最大 100 像素），这样他们就可以更好地看到它。

我有这段代码，它计算出图像在页面上的位置，在顶部应用另一个图像（绝对定位），然后增长它。

$(document).on("mouseover", "img.grow", function() {
    var iid = $(this).attr("id");
    var isr = $(this).attr("src");
    var loc = $(this).offset();
    $("body").append('<img class="grown" id="o' + iid + '" src="' + isr + '" style="position: fixed; z-index: 1505; top: ' + loc.top + 'px; left: ' + loc.left + 'px; width: 33px;" />');
    $(".grown").animate({
        width: '100px', 
        marginLeft: '-25',
        marginTop: '-15'
    }, 250);
}).on("mouseleave", "img.grow", function() {
    var iid = $(this).attr("id");
    $("img#o" + iid).fadeOut(100, function() {
        $(this).remove(); 
    });
});

不过，我得到了可怕的“反弹”——因为新图像被放置在原始图像之上，它会导致“鼠标离开”触发。显然我不希望这种情况发生，但我需要使用绝对定位的图像来阻止布局被左右晃动。

有任何想法吗？

4

2 回答 2

2

事实证明，到目前为止，最简单的答案是将 mouseleave 应用于创建的图像，而不是下面的图像。最终代码：

$(document).on("mouseover", "img.grow", function() {
    var iid = $(this).attr("id");
    var isr = $(this).attr("src");
    var loc = $(this).offset();
    $("body").append('<img class="grown" id="o' + iid + '" src="' + isr + '" style="position: fixed; z-index: 1505; top: ' + loc.top + 'px; left: ' + loc.left + 'px; width: 33px;" />');
    $(".grown").animate({
        width: '100px', 
        marginLeft: '-25',
        marginTop: '-15'
    }, 250);
}).on("mouseleave", "img.grow", function() {
    var iid = $(this).attr("id");
    $("img#o" + iid).fadeOut(100, function() {
        $(this).remove(); 
    });
});

JSFiddle：http: //jsfiddle.net/Grimdotdotdot/FLB8E/

于 2012-04-26T19:41:48.983 回答
0

我认为您以错误的方式进行此操作，它太混乱了。怎么样：

  • 创建一个您想要增长到的完整大小的容器

  • 将图像应用BACKGROUND-IMAGE为x,y位置center,center

  • 此图像是全尺寸图像，但最初您将其设置BACKGROUND-SIZE为 60%

  • 悬停动画此属性

或与此类似的过程。

于 2012-04-26T16:40:22.207 回答