Como é que Bing.com criar miniaturas alargada?

Question

Quando eu pesquisar imagens usando Bing.com, percebo as suas imagens são bem cortadas e ordenados. Quando você coloca o mouse sobre uma imagem, outra janela irá aparecer com uma imagem ampliada.

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

Eu quero fazer a mesma coisa no meu programa. Eu verifiquei o código-fonte de sua página. Eles estão usando javascript, mas ainda não tenho idéia como eles fazem isso. Alguém familiarizado com ele? Qualquer sugestão é bem-vinda.

Answer 1

Se você olhar para o HTML, você verá um período imediatamente acima cada uma das imagens. Ele define o estilo de apresentação desse quadro de "nenhum" para "bloquear". Em seguida, usa uma biblioteca de animação para redimensionar o conteúdo do quadro de cobertura.

Answer 2

É a mesma imagem. Isso só aumenta ligeiramente.

Answer 3

Aqui está um HTML simples / CSS / Javascript exemplo sobre como alterar a propriedade de um elemento com javascript display:

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
}

Eles também usam uma coisa transição extravagante como efeito a crescer de scriptaculous encontrada aqui.