如何在jQuery/javascript中複製此圖像縮放動畫效果？

Question

當點擊本網站圖像上的縮略圖時：http://www.grouprecipes.com/138587/banana-oatmeal-chocolate-chip-cookies.html，它會展開並加載圖像的原始（全尺寸）版本。

我認爲他們正在使用原型或類似的東西。我一直在這裏看看，並且有only主要found例子，只是增加了原始圖像的大小，並沒有實際加載其他版本的圖像（如鏈接的例子）。

任何關心幫助我找出我應該使用什麼技術？ CSS3和一些.animate()的組合？

Answer 1

這是一個簡單的例子，使用CSS3，一些JavaScript。

說明：

• 最初兩者的縮略圖和圖像的放大版本被放置在使用absolute定位相同的空間。
• 直到縮略圖被點擊時才放大版本，因爲放大的img標籤沒有任何src開頭。它通過JS動態分配。
• 使用translateX和translateY選項可以將圖像移動到不同的位置，該選項可以通過所提到的編號移動圖像的絕對放大的放大版本。 X軸和Y軸上的像素。
• JavaScript用於將show類添加到放大的圖片中，該圖片觸發了過渡效果，並且還將img標籤的src設置爲較新/較大的圖片。
• 放大後的版本會在放大圖像上的任何位置點擊時返回原來的位置。
• JS代碼是使用類名而不是id編寫的，以防萬一您需要在同一頁面上顯示多個縮略圖。如果是這種情況，您可能需要刪除[0]，將其放入for循環中，並將計數器變量替換爲[0]。也可以通過鍵值對映射來保持每個這種縮略圖圖像的放大圖像的來源。
• 最初（在通過JS添加.show之前）圖像上的z-index: -1是爲了確保它保持在後臺並且不會妨礙點擊縮略圖。

注意要點：

• transform，translateX和translateY都是CSS3特性/功能，因此在IE8和更低的支持。對於較舊版本的Chrome，Firefox，Opera和Safari，需要使用瀏覽器前綴-webkit-,-moz。
• classList.add和classList.remove功能是HTML5標準，在IE9中不支持，但它們等效的IE9代碼添加或刪除類（如className += ..）可以輕鬆完成。

var images = {'img1': 'http://placehold.it/400/400'}; 
 
document.getElementsByClassName('thumbnail')[0].onclick = function(){ 
 
    document.getElementById('enlarged').src = images[this.id]; 
 
    document.getElementById('zoomed').classList.add('show'); 
 
} 
 
document.getElementById('enlarged').onclick = function(event){ 
 
    if(event.target != document.getElementsByClassName('thumbnail')[0]) 
 
     document.getElementById('zoomed').classList.remove('show'); 
 
}

.container{ 
 
    position: relative; 
 
} 
 
.thumbnail{ 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
#zoomed .enlarged{ 
 
    opacity: 0; 
 
    z-index: -1; 
 
    min-height: 200px; 
 
    min-width: 200px; 
 
    height: 200px; 
 
    width: 200px; 
 
    position: absolute; 
 
    transition: all 1s; 
 
    left: 0px; top: 0px; 
 
} 
 
#zoomed.show .enlarged{ 
 
    opacity: 1; 
 
    z-index: 2; 
 
    height: auto; 
 
    width: auto; 
 
    min-height: 400px; 
 
    min-width: 400px; 
 
    transform: translateX(200px) translateY(200px); 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/200/200" alt="" class="thumbnail" id='img1'/> 
 
    <div id='zoomed'> 
 
     <img src="" alt="" class="enlarged" id='enlarged'/> 
 
    </div> 
 
</div>

---

附加資源：

• Here是使用CSS（如果需要的放大版本）如何預先負載圖像的良好的製品+ JS，只有JS和AJAX。