移動端H5單頁面跟隨手指滑動切換組件PageSlider

PageSlider 是一個基於zepto.js用於實現H5單頁面跟隨手指上下滑動切換的組件，支持經過transform3D啓動GPU加速，目前僅支持移動端touch設備。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<! DOCTYPE  html> < html > < head >      < meta  charset = "utf-8" >      < meta  name = "viewport"  content = "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />      < meta  content = "telephone=no"  name = "format-detection" />      < meta  name = "description"  content = "" />      < meta  name = "keywords"  content = "" />      < title >demo - pageSlider</ title >      <!--引入pageSlider所需樣式表-->      < link  rel = "stylesheet"  href = "css/pageSlider.css" >      <!--引入zepto.js-->      < script  src = "http://cdn.bootcss.com/zepto/1.1.4/zepto.js" ></ script >      <!--引入pageSlider.js文件-->      < script  src = "js/pageSlider.js" ></ script > < body >      <!--DOM結構-->      < div  class = "section sec1"  style = "background-color:#FFCCCC;" >1< p >向下滑動</ p ></ div >      < div  class = "section sec2"  style = "background-color:#4ACBF7;" >2</ div >      < div  class = "section sec3"  style = "background-color:#63E339;" >3</ div >      < div  class = "section sec4"  style = "background-color:#F7D34A;" >4</ div >      < div  class = "section sec5"  style = "background-color:#FF8ECE;" >5</ div >      < div  class = "section sec6"  style = "background-color:#ACDCED;" >6</ div >        < script >          $(function(){              var pageSlider = PageSlider.case();          });      </ script > </ body > </ html >