Bing.com如何創建放大的縮略圖？

Question

當我使用Bing.com搜索圖像時，我意識到他們的圖像很好地裁剪和排序。將鼠標放置在圖像上時，會彈出另一個窗口，並顯示放大的圖像。

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

我想要做同樣的事情在我的計劃。我檢查了他們頁面的源代碼。他們正在使用JavaScript，但我仍然不知道他們是如何做到的。有誰熟悉它？歡迎任何建議。

Answer 1

如果你看看HTML，你會看到每個圖像上方的跨度。它將該框架的顯示風格從「無」設置爲「阻止」。然後它使用動畫庫調整覆蓋幀的內容。

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的效果 - 增長髮現的花哨過渡事物here.