Question

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

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

Answer 1

有很多jQuery插件可以做到这一点。既然你是初学者我会建议你从那里开始。 Here is an article有一些不同的选择。 Here is an example of what you are looking for

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。希望我尽可能清楚。

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

4 个答案: