在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將元素移動到左側。