幫我創建一個iPad照片般的廊用JavaScript

Question

我一直在類似於iPad's photos app，那就是你有縮略圖堆放整齊，並在點擊的畫廊玩弄（觸摸），他們飛了出去在網格佈局中。如果一個圖庫/堆疊已經打開，當你點擊另一個堆疊時，照片應該堆積在原來的位置，然後再下一組。

我雖然像Isotope這樣會有所幫助，但我真的很難讓它停止覆蓋自己。另外，我不能完全弄清楚如何讓它看起來像縮略圖從「封面圖像」中飛出。

我把what I've got so far on JSFiddle的簡化版本。

任何幫助非常感謝。我覺得我在這裏有點過頭:)

我的問題是：我該如何讓它看起來好像縮略圖從「封面圖像」飛出？

Answer 1

你可以有一個絕對定位的DIV與全尺寸的圖像裏面。

最初，定位div並縮放圖像，使其與縮略圖完美重疊。

然後，將兩者的位置和大小設置爲動畫，以使其以您想要的大小移動到屏幕中心。