H5單頁面手勢滑屏切換是采用HTML5 觸摸事件(Touch) 和 CSS3動畫(Transform,Transition)來實現的,效果圖如下所示,本文簡單說一下其實現原理和主要思路。
1、實現原理
假設有5個頁面,每個頁面占屏幕100%寬,則創建一個DIV容器viewport,將其寬度(width) 設置為500%,然后將5個頁面裝入容器中,并讓這5個頁面平分整個容器,最后將容器的默認位置設置為0,overflow設置為hidden,這樣屏幕就默認顯示第一個頁面。
新聞熱點
疑難解答