javascript - 帮我用 JavaScript 创建一个类似 iPad 照片的画廊

Question

我一直在玩一个类似于 iPad's photos app 的画廊，缩略图整齐地堆叠在一起，点击(触摸)它们会以网格布局飞出。如果在您单击另一个堆栈时一个画廊/堆栈已经打开，则照片应该在下一组动画结束之前堆积在它们的原始位置。

我虽然有点像 Isotope在这里会有帮助，但我真的很难让它停止覆盖自己。另外，我不太明白如何使缩略图看起来好像从“封面图片”中飞出。

我放了一个简化版的what I've got so far on JSFiddle .

非常感谢任何帮助。我觉得我有点头疼:)

我的问题是:如何使缩略图看起来好像从“封面图片”中飞出？

Answer 1

您可以拥有一个绝对定位的 DIV，其中包含一个全尺寸图像。

首先，定位 div 并缩放图像，使其与缩略图完美重叠。

然后，对两者的位置和大小进行动画处理，使它们以您想要的大小位于屏幕中央。