在wep-app中实现类似iPhone的内容滑块

Question

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

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

从我发现这是通过使用CSS3和JQuery完成。它内置在一些框架中，例如http://www.jqtouch.com/。但是我发现框架界面的功能有点过于沉重，并没有给用户带来顺畅的体验。我在测试时也遇到了一些错误。这就是为什么我将JQtouch排除在外的原因。

所以我要求的是如何实现滑动导航，同时保持应用整洁，平滑和轻量级的建议。最好的方法是走哪条路？是否有可能使用纯CSS制作？怎么样？任何能够以任何方式帮助我的示例代码都非常受欢迎。

Answer 1

这个原因框架很受欢迎，因为他们将脚本工作从生产可用于所有智能手机的JavaScript和css中解放出来。

的替代jqtouch可能是sencha touch或jquery mobile

如果我这样做，我会看看这些框架的来源，看看它们是如何工作的，并与该代码的某些片段的播放。这会让你很好地理解滚动等如何与触摸事件一起工作。他们使用touchstart和touchend事件来跟踪触摸位置 - 所以看看这些。不幸的是，它主要是用于功能的JavaScript。

Answer 2

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

例子很简单（只适用于WebKit浏览器 - Safari /铬）：http://jsfiddle.net/2USAR/8/

代码解释。

---

JS

在jQuery的侧上时的滑动的javascript类新分配给几个元素使用点击。

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

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

css中的这些类保存关于要调用的关键帧动画的详细信息。

而在我们的JS结尾处，有一个setTimeout会在动画完成后删除类（在我们的例子中为“animate”）。

---

CSS

大部分的东西是自我解释。请记住“.animate”css，并观察关键帧动画的结构。

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