Question

我有一堆画廊图片，我显示为小缩略图（约50px大）。当用户将鼠标悬停在小图像上时，较大的图像会逐渐增长。超出它（高达100px）所以他们可以看得更好。

我已经获得了这个代码，它可以解决图像在页面上的位置，在顶部应用另一个图像（绝对定位），然后将其增长。

$(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(); 
    });
});

我得到了可怕的反弹＆＃39;虽然 - 当新图像放在原始图像的顶部时，它会导致鼠标移动。开火。显然我不希望这种情况发生，但我需要使用绝对定位的图像来阻止布局抖动。

有什么想法吗？

Answer 1

到目前为止，最简单的答案是将鼠标距离应用于创建的图像，而不是下面的图像。最终代码：

$(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/

Answer 2

我认为你这是错误的做法，它太乱了。怎么样：

以您希望增长的完整尺寸创建容器
将图片应用为BACKGROUND-IMAGE，x,y位置center,center
此图片是全尺寸图片，但最初您将BACKGROUND-SIZE设为60％
悬停动画此属性

或者类似的过程。

jQuery在mouseover上生成图像

2 个答案: