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

Question

当我使用 Bing.com 搜索图像时，我意识到他们的图像被很好地裁剪和排序。当您将鼠标放在图像上时，会弹出另一个带有放大图像的窗口。

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

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

Answer 1

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

Answer 2

这是相同的图像。它只是稍微放大它。

Answer 3

这是一个关于使用 javascript 更改元素的显示属性的简单 HTML/CSS/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。