0

我制作了一个图片库，您可以在其中单击图片以显示更大的版本。单击图像时，将在下面的行中插入新图像。我遇到了一个错误，我不知道如何解决它。例如，如果您单击第一行的图像，则会显示图像的预览。然后，如果您单击下面两行的图像，则不会显示图像预览。它不适用于 Chrome 和 Safari。在 Firefox 中效果很好。

这是我使用的 Javascript 和 jQuery(2.0.3)：

$(document).on("click", ".imgBox", function(){
    imgsrc = $(this).find('img').attr('src');
    var bigBox = $('<div class="bigBox"><img src="'+imgsrc+'"/></div>');
    imgClicked = $(this);
    $('.bigBox').remove()
    if ($(".bigBox").length > 0){

            bigBox.find('img').attr('src', imgsrc);
            bigBox.insertAfter(imgClicked);
    } else {
            bigBox.insertAfter(imgClicked).css('display', 'block');
    }


});

我创建了一个JSFiddle，以便您可以自己尝试。只需确保调整浏览器窗口的大小，以便获得至少 3 行。

我已经在 OSX 上的 Chrome 30.0.1599.101、Safari 6.0.5 和 Firefox 24.0 中对其进行了测试。

4

2 回答 2

1

警告：这个解决方案有点骇人听闻。:)

我注意到，当我调整 jsfiddle 窗口的大小时，chrome 会显示此图像，正如我将它放在评论中一样。于是我开始尝试“愚弄”chrome再次重绘的方法。有很多方法会导致重绘。我选择操纵style属性。

所以我创建了一个简单的检查来overflow动态设置属性从auto到visible（这两个值都不应该破坏你的布局。当用户单击图像时我会切换这些值。就像这样：http: //jsfiddle.net/HeQGL/5/

Ps 请注意，我稍微更改了您的脚本。更改了事件侦听器的元素，在函数内部使用了变量，并在我们需要将元素重新插入 DOM 时更适合使用它.detach()。.remove()

于 2013-10-18T14:52:10.250 回答
0

我在 Windows 上的 Chrome 30.0.1599.101 m 中对其进行了测试，效果非常好。

于 2013-10-18T14:07:36.503 回答