How does Bing.com create enlarged thumbnails?

问题

When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.

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

I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.

回答1:

If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.

回答2:

It's the same image. It just enlarges it slightly.

回答3:

Here's a simple HTML/CSS/Javascript example on changing the display property of an element with 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
}

They also use a fancy transition thing like scriptaculous's effect-grow found here.

来源：https://stackoverflow.com/questions/1075320/how-does-bing-com-create-enlarged-thumbnails