Comment Bing.com créer des vignettes agrandies?

Question

Quand je recherche des images en utilisant Bing.com, je me rends compte de leurs images sont bien recadrée et triées. Lorsque vous placez votre souris sur une image, une autre fenêtre pop-up 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 pas la moindre idée comment ils le font. Est-ce que quelqu'un connaît-il? Toute suggestion est la bienvenue.

Answer 1

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

Answer 2

Il est la même image. Il agrandit juste un peu.

Answer 3

Voici 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 aussi une chose de transition de fantaisie comme de scriptaculous l'effet grow trouvé ici.