iPhone 类似文件夹在 web 上打开的设计答案

【问题标题】：iPhone like folder opened design on the webiPhone 类似文件夹在 web 上打开的设计
【发布时间】：2011-04-03 01:04:22
【问题描述】：

这有点难，我希望能得到一些帮助。我一直在研究，找不到办法，也不知道怎么写。我正在寻找为网络创建一个类似 iPhone 文件夹的设计。设计是这样的：

对于那些拥有 iDevices 的人，我也希望在您单击文件夹时出现“滑出”效果。

对于那些没有 iPhone/ipads/itouch 的人（我不知道你一开始是如何生活的！）但是当你点击它时，它是一个很好的流畅的打开菜单。

当您单击“登录”按钮时，我希望它看起来像打开 iphone 文件夹，并且有点像 iDevices 那样将页面“拆分”成两半。

我很乐意帮助我写这篇文章，因为我相信很多人也会从中受益。它不必是精确的，我只想要底层的动画。我可以自己写其他所有内容。如果您查看源代码，您需要的所有内容都应该在该站点上。

点击“浏览所有功能”：

http://www.apple.com/ipodtouch/features/

这正是我想要的。

感谢大家的帮助！

【问题讨论】：

这个插件做到了app-folders.com

标签： jquery iphone css stylesheet

【解决方案1】：

我可以向您指出一个我不久前就同一件事问过的问题吗？在此处查看问题：How to split page and reveal stuff underneath?

具体看一下 Jimmy Chandra 的超棒代码 sn-p： http://jsfiddle.net/hKHWL/

修改这一行并不难：

.folder { background-color:#0df }

拥有您尝试制作的文件夹背景。

【讨论】：

@JD：希望你能顺利运行！如果您不介意，请在完成后在此处发布，以便我可以看到最终结果。 :)
会的，再次感谢！我一直在寻找原型！我现在只需要顶部的胡萝卜

【解决方案2】：

我的建议是把它分成几部分，然后从那里开始工作。

例如，如果您在最基本的层面上查看您想要做什么，您实际上只是想插入一个 div。所以，先让它工作。正确插入 div 后，您可以添加滑出动画，这只是 div 高度的动画。

像这样一块一块地做，你很快就会让它工作。

【讨论】：

我可以创建 div。只是我想要它的动画。如果我创建了一个 id 为“login_div”的 div，我不知道下一步该做什么。我不是一个 jquery/动画人。

【解决方案3】：

我在 jQuery 中重新制作了一些 iOS5 视图/元素。包括动态壁纸拆分器（目前用于 1 个文件夹和报摊）。它的行为与文件夹的高度和位置有关。演示：http://webkit-os.pixelass.com/iframe/ （仅限 Webkit 浏览器：Safari Chrome.. 最好在 safari5 OS X 10.6.x 或更高版本上使用）

【讨论】：