Bing.com 如何创建放大的缩略图？

Question

当我使用 Bing.com 搜索图像时，我意识到它们的图像经过精心裁剪和排序。当您将鼠标放在图像上时，会弹出另一个窗口，其中显示放大的图像。

http://www.bing.com/images/search?q=Heros&FORM=BIFD#

我想在我的程序中做同样的事情。我检查了他们页面的源代码。他们正在使用 javascript，但我仍然不知道他们是如何制作的。有熟悉的人吗？欢迎任何建议。

Answer 1

如果查看 HTML，您会在每个图像的正上方看到一个跨度。 它将该框架的显示样式从“无”设置为“块”。 然后它使用动画库来调整覆盖框架内容的大小。

Answer 2

这是同一张图片。 只是稍微放大了而已。

Answer 3

这是一个简单的 HTML/CSS/Javascript 示例，使用 javascript 更改元素的显示属性：

HTML：

<div id="image1" class="image" onmouseover="showImg(1);">
   Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
   Here's the enlarged image and info about the picture
</div>

Javascript：

function showImg(num){
   document.getElementById('bigImage' + num).style.display='block';
}

function hideImg(num){
   document.getElementById('bigImage' + num).style.display='none';
}

CSS：

.bigImage{
   display:none
}

片段：

function showImg(num) {
  document.getElementById('bigImage' + num).style.display = 'block';
}

function hideImg(num) {
  document.getElementById('bigImage' + num).style.display = 'none';
}

.bigImage {
  display: none
}

<div id="image1" class="image" onmouseover="showImg(1);">
  Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout "hideImg(1);">
  Here's the enlarged image and info about the picture
</div>

他们还使用了一种奇特的过渡方式，例如 here 的 scriptaculous 的效果增长。