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

Question

当我搜索使用Bing.com图像，我知道他们的图像是公裁剪和排序。当您将鼠标在图像上，另一个窗口会弹出放大的图像。

http://www.bing.com/images/search？ q =＆英雄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的效果长出发现这里。