touchSwipe移动端触摸事件-创新互联

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

成都创新互联公司专注于企业全网营销推广、网站重做改版、集宁网站定制设计、自适应品牌网站建设、html5、商城网站制作、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为集宁等各大城市提供网站开发制作服务。

特点：

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

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

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

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

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

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

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

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

引入核心文件

<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.8.2/jquery.min.js"></script>
<script type="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 .page h2{padding-top:120px; line-height:50px; color:#666;}
.container .page p{text-align:center; color:#aaa;}
.container .page0{background:url(p_w_picpaths/1.jpg) center center no-repeat;}
.container .page1{background:url(p_w_picpaths/2.jpg) center center no-repeat;}
.container .page2{background:url(p_w_picpaths/3.jpg) center center no-repeat;}
.container .page3{background:url(p_w_picpaths/4.jpg) center center no-repeat;}

写入JS实现效果

  $(document).ready(
        function() {
            var nowpage = 0;
            //给class为container的容器加上触滑监听事件
            $(".container").swipe(
                {
                    swipe:function(event, direction, distance, duration, fingerCount) {//事件，方向，距离（像素为单位），时间，手指数量
                         if(direction == "up")//当向上滑动手指时令当前页面记数器加1
                         {
                            nowpage = nowpage + 1;
                         }
                         else if(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);//根据当前记数器滚动到相应的高度
                    }
                }
            );
        }
    );

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站标题：touchSwipe移动端触摸事件-创新互联
路径分享：https://www.cdcxhl.com/article40/ccssho.html

成都网站建设公司_创新互联，为您提供App开发、软件开发、微信小程序、全网营销推广、网站营销、关键词优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联