在缩略图的悬停上显示大图

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

我该怎么办？我是一个HTML/css/JavaScript的初学者

来源

2013-03-16 Addev

U可以不缩略图工作..

为缩略图上的上述节目悬停这个

完整图像

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

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

CSS

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

} 

.image{ 
display:none; 
position:absolute; 


}

它不是完整的，但我认为它可以帮助

来源

2013-03-16 12:51:45 Nikhar

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

来源

2013-03-16 12:49:42 ryan

很大。我很惊讶用这种简单的方法找到这样的东西需要多长时间。我认为这将是一件普通的事情。 – Jonesopolis 2014-01-13 13:51:46

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

来源

2013-03-16 12:50:25 makedon

点击不是悬停... – Robusto 2013-03-16 12:51:53

基本上你可以创建一个<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当鼠标不在拇指上时。希望我尽可能清楚。

来源

2013-03-16 12:51:37 steo

在缩略图的悬停上显示大图

回答

相关问题