移动端H5单页面跟随手指滑动切换组件PageSlider

2019独角兽企业重金招聘Python工程师标准>>>

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 >

转载于:https://my.oschina.net/u/2456768/blog/664612