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

Question

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

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

Answer 1

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

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;


 }

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

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

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让你hide在鼠标离开拇指时进入 div。希望我尽可能清楚。