Как Bing.com создает увеличенные миниатюры?

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-grow found. here.