在 Web 应用程序中实现类似 iPhone 的内容滑块答案

【问题标题】：Implementing an iPhone-like content slider in a wep-app在 Web 应用程序中实现类似 iPhone 的内容滑块
【发布时间】：2012-03-29 14:40:10
【问题描述】：

我正在为智能手机构建一个网络应用。在我的应用程序中，我想为用户提供类似 iOS 的体验。我希望我的界面功能类似于 iOS。我主要考虑这里的导航。我希望我的应用程序从左到右滑动并根据用户单击的链接显示动态内容。这是一个视频，显示了我想要的导航方式：

http://www.youtube.com/watch?v=KTcISVU4Nf4&feature=player_detailpage#t=2s

据我所知，这是通过使用 CSS3 和 JQuery 完成的。它内置在某些框架中，例如http://www.jqtouch.com/。但是我发现框架接口的功能有点过于沉重和迟缓，它并没有给用户带来流畅的体验。而且我在测试时也遇到了一些错误。这就是为什么我排除了 JQtouch 作为替代方案。

所以我要的是关于如何实现滑动导航同时保持应用整洁、流畅和轻量级的建议。最好的方法是什么？可以用纯CSS制作吗？如何？任何可以以任何方式帮助我的示例代码都非常受欢迎。

【问题讨论】：

标签： jquery iphone css navigation web-applications

【解决方案1】：

框架之所以如此受欢迎，是因为它们省去了生成适用于所有智能手机的 javascript 和 css 的繁重工作。

jqtouch 的替代品可以是sencha touch 或jquery mobile

如果我要这样做，我会查看这些框架的源代码，看看它们是如何工作的，并尝试使用该代码的一些 sn-ps。这将使您对滚动等如何与触摸事件一起工作有一个很好的理解。他们使用 touchstart 和 touchend 事件来跟踪触摸位置 - 所以请查看这些。不幸的是，它主要是 javascript 的功能。

【讨论】：

Sencha Touch 非常好，但学习曲线相当陡峭。

【解决方案2】：

让我们看看。 jQuery touch 通过在幻灯片上使用翻译动画来完成它们的功能。

非常简单的示例（仅适用于 webkit 浏览器 - Safari/Chrome）：http://jsfiddle.net/2USAR/8/

代码说明。

在 jQuery 端，当使用幻灯片上的点击时，javascript 会将新类分配给几个元素。

首先，我们将动画类分配给幻灯片的父持有者。该类触发 css，其中包含与我们将如何为幻灯片制作动画相关的详细信息。

然后我们将类“slideLeftOut”和“slideLeftIn”分别分配给#first 和#second div。

css 中的这些类包含有关要调用的关键帧动画的详细信息。

在我们的 JS 末尾有一个 setTimeout，它将在动画完成后删除类（在我们的例子中是“animate”）。

CSS

大部分内容都是不言自明的。请记住“.animate”css 并查看关键帧动画的结构。

在关键帧动画中，我们使用 webkit translate 将元素向左移动。

【讨论】：