Html 在缩略图悬停时显示更大的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15449437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show bigger image on thumbnail's hover
提问by Addev
For a list of images I have the urls for the squared thumbnail http://example.com/img1_thumb.jpgand for the original size (any proportion) http://example.com/img1.jpg. I'm showing the thumbnails in a grid and I'd like to show the original one when the user puts the mouse over a image in the grid. Maybe using a floating element, the target is the user can see the image in more detail and view the parts of the cropped in the thumbnail.
对于图像列表，我有平方缩略图http://example.com/img1_thumb.jpg和原始尺寸（任何比例）的网址http://example.com/img1.jpg。我在网格中显示缩略图，当用户将鼠标放在网格中的图像上时，我想显示原始缩略图。也许使用浮动元素，目标是用户可以更详细地查看图像并查看缩略图中裁剪的部分。
How can I do it? I'm a beginner with HTML/css/Javascript
我该怎么做？我是 HTML/css/Javascript 的初学者
采纳答案by Nikhar
U can work without thumbnails..
你可以在没有缩略图的情况下工作..
for thumbnail
缩略图
<img src="http://example.com/img1.jpg" class="compress"/>
on hover of the above show this one
在上面的悬停上显示这个
$(".compress").hover(function(){
$(".image").show();
});
full image
完整图像
<img src="http://example.com/img1.jpg" class="image"/>
css
css
.compress{
width:20%;
/*aspect ratio will be maintained*/
}
.image{
display:none;
position:absolute;
}
its not complete,but i think it might help
它不完整，但我认为它可能会有所帮助
回答by ryan
There are lots of jQuery plugins that do this. Since you are a beginner I would recommend starting there. Here is an articlewith some different options. Here is an example of what you are looking for.
有很多 jQuery 插件可以做到这一点。由于您是初学者，我建议您从那里开始。这是一篇有一些不同选项的文章。这是您正在寻找的示例。
回答by makedon
Use JQuery:
使用 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="">
回答by steo
Basically you can create a <div class="some_class"><img src="http://example.com/img1.jpg"></div>set it's display:noneand then bind an event to the thumb divlike this :
基本上你可以创建一个<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()
}
Of course you can personalize every div. The second functionlet you to hidethe div when the mouse is out of the thumb. Hope i was as clear as possible.
当然，您可以个性化每个div. 第二个function让你hide在鼠标离开拇指时进入 div。希望我尽可能清楚。
