今天分享一款很棒的插件touchSwipe，估计很多朋友都在找手机全屏滚动的效果，因为好多企业的微官网是或是专题都在用这样的效果，那么今天touchSwipe 1.6是最新的专门为移动设备设计的jquery插件，如：Ipad，苹果、安卓，当然PC上也是可以用的，嘻嘻。插件touchSwipe可监听单个和多个手指触摸,鼠标按着左键拖动等事件，因此插件可以实现滑动滚屏、缩放等效果。本实例主讲滚屏效果，相了解缩放功能的请参考官方文档。

特点：

1、监听滑动的4个方向：上、下、左、右；

2、监听多个手指收缩还是外张；

3、支持单手指或双手指触摸事件；

4、支持单击事件touchSwipe对象和它的子对象；

5、可定义临界值和最大时间来判断手势的实际滑动；
6、滑动事件有4个触发点：“开始”,“移动”,“结束”和“取消”；

7、结束事件可以在手提释放或是快速达到临界值时触发；

8、允许手指刷和页面滚屏；

9、可禁用户通过输入元素（如：按钮、表单、文本框等）触发事件；

引入核心文件

<scripttype="text/javascript"src="http://libs.useso.com/js/jquery/1.8.2/jquery.min.js"></script><scripttype="text/javascript"src="jquery.touchSwipe.min.js"></script>


写入CSS文件

*{margin:0;padding:0;}html,body{width:100%;height:100%;overflow:hidden;}.container{width:100%;height:100%;position:absolute;left:0;top:0%;}.container.page{height:100%;position:relative;color:#fff;text-align:center;}.container.pageh2{padding-top:120px;line-height:50px;color:#666;}.container.pagep{text-align:center;color:#aaa;}.container.page0{background:url(p_w_picpaths/1.jpg)centercenterno-repeat;}.container.page1{background:url(p_w_picpaths/2.jpg)centercenterno-repeat;}.container.page2{background:url(p_w_picpaths/3.jpg)centercenterno-repeat;}.container.page3{background:url(p_w_picpaths/4.jpg)centercenterno-repeat;}

写入JS实现效果

$(document).ready(function(){varnowpage=0;//给class为container的容器加上触滑监听事件$(".container").swipe({swipe:function(event,direction,distance,duration,fingerCount){//事件，方向，距离（像素为单位），时间，手指数量if(direction=="up")//当向上滑动手指时令当前页面记数器加1{nowpage=nowpage+1;}elseif(direction=="down")//当向下滑动手指时令当前页面记数器减1{nowpage=nowpage-1;}if(nowpage>4)//因本实例只有5张图片，所以当记数器大于4时令他返回4（从0开始记），避免溢出出错{nowpage=4;}if(nowpage<0)//道理同上{nowpage=0;}$(".container").animate({"top":nowpage*-100+"%"},400);//根据当前记数器滚动到相应的高度}});});