我正在为智能手机构建网络应用。在我的应用程序中，我想给用户一个类似iOS的体验。我希望我的界面功能类似于iOS。我主要是考虑导航。我希望我的应用程序从左向右滑动，并根据用户点击的链接显示动态内容。这是一个按我想要的方式显示导航的视频：
http://www.youtube.com/watch?v=KTcISVU4Nf4&feature=player_detailpage#t=2s
据我所知，这是通过使用CSS3和JQuery实现的。它内置于某些框架中，例如http://www.jqtouch.com/。但我发现框架接口功能有点过于沉重和迟缓，它不会给用户带来流畅的体验。我在测试时也遇到了一些错误。这就是我将JQtouch排除在外的原因。
所以我要求的是如何实现滑动导航同时保持应用整洁，流畅和轻量级的建议。哪种方式最好？是否可以使用纯CSS制作？怎么样？任何可以帮助我的示例代码都非常受欢迎。
答案 0 :(得分：3)
框架受欢迎的原因是因为他们不需要制作适用于所有智能手机的javascript和css。
jqtouch的替代方案可以是sencha touch或jquery mobile
如果我要这样做，我会看一下这些框架的来源，看看它们是如何工作的，并与该代码的一些片段进行游戏。这将使您很好地理解滚动等如何与触摸事件一起工作。他们使用touchstart和touchend事件来跟踪触摸位置 - 所以请查看这些内容。不幸的是，它主要是javascript的功能。
答案 1 :(得分：1)
我们来看看。 jQuery touch通过在幻灯片上使用翻译动画来完成他们的功能。
非常简单的示例（仅适用于webkit浏览器 - Safari / Chrome）：http://jsfiddle.net/2USAR/8/
代码说明。
<强> JS
在jQuery方面，当使用幻灯片点击时，javascript会将新类分配给多个元素。
首先，我们将类动画分配给幻灯片的父级持有者。该类触发css，其中包含与我们如何为幻灯片设置动画相关的详细信息。
然后我们将类“slideLeftOut”和“slideLeftIn”分别分配给#first和#second div。
css中的这些类包含要调用的关键帧动画的详细信息。
在我们的JS结束时，有一个setTimeout将在动画结束后删除类（在我们的例子中为“animate”）。
<强> CSS
大部分内容都是自我解释的。请记住“.animate”css并查看关键帧动画的结构。
在关键帧动画中，我们使用webkit translate将元素移动到左侧。