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

Show bigger image on thumbnail's hover

本文关键字：显示 图像 悬停 略图      更新时间：2023-09-26

对于图像列表，我有正方形缩略图http://example.com/img1_thumb.jpg和原始大小(任意比例)http://example.com/img1.jpg的url。我在网格中显示缩略图，当用户将鼠标放在网格中的图像上时，我想显示原始的缩略图。也许使用浮动元素，目标是用户可以看到更详细的图像，并查看缩略图中裁剪的部分。

我该怎么做?我是HTML/css/Javascript的初学者

有很多jQuery插件可以做到这一点。既然你是初学者，我建议你从这里开始。这里有一篇文章提供了一些不同的选择。下面是您要查找的示例

不用缩略图也能工作。

为缩略图

<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;

 }

它不完整，但我想它可能会有帮助

使用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="">

基本上你可以创建一个<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设置为hide。

相关文章：