Comment Bing.com crée-t-il des miniatures agrandies?

Question

Lorsque je recherche des images à l'aide de Bing.com, je réalise que leurs images sont bien rognées et triées. Lorsque vous placez votre souris sur une image, une autre fenêtre apparaît avec une image agrandie.

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

Je veux faire la même chose dans mon programme. J'ai vérifié le code source de leur page. Ils utilisent javascript, mais je n'ai toujours aucune idée de comment ils le font. Est-ce que quelqu'un le connaît? Toute suggestion est la bienvenue.

Answer 1

Si vous regardez le code HTML, vous verrez une portée immédiatement au-dessus de chacune des images. Il définit le style d'affichage de cette image de "none" à "block". Il utilise ensuite une bibliothèque d'animation pour redimensionner le contenu du cadre de couverture.

Answer 2

C'est la même image. Il l'agrandit légèrement.

Answer 3

est ici simple HTML/CSS/Javascript par exemple sur le changement de propriété d'affichage d'un élément avec 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 
} 

Ils utilisent également une chose de transition fantaisie comme effet de scriptaculous-grow trouvé here.