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
}

他们还使用了一种奇特的过渡方式，例如 scriptaculous 的effect-grow 发现 这里。