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

【问题标题】：How does Bing.com create enlarged thumbnails?Bing.com 如何创建放大的缩略图？
【发布时间】：2010-11-07 16:49:00
【问题描述】：

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

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

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

【问题讨论】：

我希望你不要指望有人为你写所有的代码！
当然不是。那么就没有乐趣了。 ;-)

标签： javascript thumbnails bing

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

它是同一张图片，只是放大了，但是当用户将鼠标悬停在它上面时，它们会显示在一个新的跨度中。

【解决方案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 found here.

【讨论】：