Question

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

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

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

Answer 1

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

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的效果增长here.

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

3 个答案: