帮我用 JavaScript 创建一个类似 iPad 的照片库

Posted 2023-03-12

【中文标题】帮我用 JavaScript 创建一个类似 iPad 的照片库

【英文标题】：Help me create an iPad photos-like gallery with JavaScript

【发布时间】：2011-06-27 22:12:33

【问题描述】：

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

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

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

非常感谢任何帮助。我觉得我在这里有点过头了:)

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

【问题讨论】：

这是你的小提琴，没​​有烦人的开始：jsfiddle.net/maniator/5dMrx/42

这听起来根本不像一个问题。请将其重新格式化为特定问题

@Ahrengot -- 我在 OP 中更新了你的小提琴

@Eran -- 我在 OP 中加粗了问题

请更正 JSFiddle 链接 -> jsfiddle.net/5dMrx

【参考方案1】：

你可以有一个绝对定位的 DIV，里面有一个全尺寸的图像。

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

然后，为两者的位置和大小设置动画，以您想要的大小将它们带到屏幕中心。

【讨论】：

感谢大家的反馈。抱歉，我之前的问题不够清楚。我已经更新了小提琴链接，我想我也许可以从这里达到我的目标。非常感谢！

如果我的回答有帮助，您是否可以点击投票按钮下方的复选标记将其标记为答案？

当然没问题。这个网站还是新手 :)