在缩略图悬停时显示更大的图像

Question

我有一些图片的链接，其中包括缩略图的链接http://example.com/img1_thumb.jpg和原始大小的链接（任意比例）http://example.com/img1.jpg。我在网格中展示缩略图，并希望当用户将鼠标悬停在网格中的图像上时显示原始大小的图像。也许可以使用浮动元素，目标是让用户能够更详细地查看图像并查看缩略图中裁剪的部分。

我该怎么做呢？我是HTML / CSS / Javascript的初学者。

- Addev

Answer 1

有很多jQuery插件可以做到这一点。由于您是初学者，我建议您从那里开始。 这里是一篇文章，介绍了一些不同的选择。 这是您要寻找的示例。

- ryan

---

太好了。我很惊讶找了这么久才找到像这样简单易懂的东西。我以为这是一件很普遍的事情。 - Jonesopolis

Answer 2

您可以在没有缩略图的情况下工作。

关于缩略图

<img src="http://example.com/img1.jpg" class="compress"/>

在上方悬停时显示此内容。

$(".compress").hover(function(){
  $(".image").show();

});

完整图片

 <img src="http://example.com/img1.jpg" class="image"/>

css

 .compress{
  width:20%;
/*aspect ratio will be maintained*/

}

.image{
display:none;
position:absolute;


 }

虽然不完整，但我认为它可能会有所帮助。

- Nikhar

Answer 3

使用 JQuery：

$(function() {
      $('#thumbnails img').click(function() {
            $('#thumbnails').hide();
            var src = $(this).attr('src').replace('.png', 'Large.png');
            $('#largeImage').attr('src', src).show();
      });
      $('#largeImage').hide().click(function() {
            $(this).hide();
            $('#thumbnails').show();
      });
});

<div id="thumbnails">
<img src="thumbnail1.png">...
</div>
<img id="largeImage" src="">

- makedon

Answer 4

基本上，您可以创建一个 <div class="some_class"><img src="http://example.com/img1.jpg"></div>，将其设置为display:none，然后像这样为 thumb div 绑定事件:

$(".thumb_class").hover(function(){
   $(".some_class").show()
},
function(){
   $(".some_class").hide()
}

当然，您可以个性化每个 div。第二个 function 允许您在鼠标移出缩略图时隐藏该 div。希望我表述得尽可能清楚。

- steo