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

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

---

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

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

下面是一个简单的HTML/CSS/Javascript示例，介绍如何使用Javascript更改元素的显示属性：

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

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

HTML:

CSS:

---

他们还使用了一种奇特的过渡方式，比如scriptaculous的效果grow found

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

我希望您不要期望有人为您编写所有代码！当然不是。那就没有乐趣了。；-）这是同一幅图像，只是放大了，但它们显示在一个新的范围内，当用户将鼠标悬停在该范围上时，该范围变得可见。

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

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

.bigImage{
   display:none
}