【问题标题】: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/

这正是我想要的。

感谢大家的帮助!

【问题讨论】:

标签: 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 或更高版本上使用)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-04-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-14
    • 2016-01-29
    • 2011-05-28
    • 2015-12-08
    相关资源
    最近更新 更多