最近需要做一个手机小门户网站，因为目前主流的手机都是安卓和苹果的，他们的浏览器内核都是webkit，这就意味着手机网站是可以用html5和css3开发的，越开发越感觉到html5和css3的强大与它的重要性，且不谈html5和css3，做网站的时候遇到了一个大问题，就是触摸js的问题，以前都是写的电脑端的js，突然接触到触摸屏的js可真是脑袋大了，因为手机网站属于初期，即使你有问题也在互联网上很难找得到，后来就在这个文章上找到了关于触摸屏的js插件《43个处理触摸事件的jquery插件》,最后找了一个自己觉得不错的插件——TouchSwipe,TouchSwipe是依赖于jquery的，而这个插件也没有中文资料，那我今天就整理一下他的相关信息及教程。

注意：此插件虽好，但是需要注意的是如果手指事件会在a标签超链接内失效，笔者做了一个焦点图，如果图片上有A标记的话会失效，所以在官方没有改正之前，还是放弃吧。。。。（另一个手机触摸插件jQuery Touchwipe Plugin 轻量级的手机触摸特效插件（javascript））

事件：

滑动事件：

swipe (事件，滑动的方向，滑动的距离，一次滑动的时间 , 几根手指)

滑动事件还有 方法和上面相同 swipeLift – 向左滑动  swipeRight-向右滑动 swipeUp-向上滑动  swipeDown-向下滑动

swipeStatus (事件, 手指状态，滑动的方向，滑动的距离，一次滑动的时间 , 几根手指)

swipeStatus 和 swipe 不同的是 这个参数是一直在执行的，大家可以看看下面的例子（复制到记事本上打开即可），来了解一下两个事件的不同之处。

两根手指往里捏或者扩张事件：

pinchStatus(事件,手指状态 ,方向(in和out，需要注意的一点in是往外扩，out是往里捏),滑动的距离, 一次滑动的时间 , 几根手指, 变焦)

包含：pinchIn（向外扩张），pinchOut （向里捏）

其他常用事件还有：doubleTap （双击屏幕） click （单击屏幕） longTap (长按屏幕)

滑动事件demo：

移动端div内手指滑动内容效果，不出现滚动条：

$(function () {

    //手机滑动效果

    var swiptleft = 0;

    var swiptw = $(".touchswipe").width() - $(".borrowlistcon .block").eq(0).width();

    $(".touchswipe").swipe({

        swipeLeft: function (event, direction, distance, duration, fingerCount) {

            swiptleft = swiptleft - distance;

            if (swiptleft > swiptw) {

                $(".touchswipe .block").animate({

                    left: swiptleft + 'px'

                }, 10)

            }

            else {

                swiptleft = swiptw;

                $(".touchswipe .block").animate({

                    left: swiptw + 'px'

                }, 10)

            }

        },

        swipeRight : function (event, direction, distance, duration, fingerCount) {

                swiptleft = swiptleft + distance;

                if (swiptleft < 0) {

                    $(".touchswipe .block").animate({

                        left: swiptleft + 'px'

                    }, 10)

                }

                else {

                    swiptleft = 0;

                    $(".touchswipe .block").animate({

                        left: 0 + 'px'

                    }, 10)

                }

    }

    });

})

官方网站

http://labs.rampinteractive.co.uk/touchSwipe/demos/

英文说明地址：

http://labs.rampinteractive.co.uk/touchSwipe/docs/symbols/%24.fn.swipe.html

下载地址

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

现在有那么多的设备支持触摸事件，你没有理由不去丰富你的UI交互功能。

开发背景

TouchSwipe原本是为Renault 设计的，是在一个IPad的专题网站上展示一个汽车的相册，这个插件可以让用户触摸操作幻灯片的播放，例如up/down或者是left/right，当时（2010）jQuery移动开发还处于起步阶段，所以我们决定编写自己的插件将触摸事件jQuery。

特点

• Detects swipes in 4 directions, “up”, “down”, “left” and “right”
• Detects pinches “in” and “out”
• Supports single finger or double finger touch events
• Supports click events both on the touchSwipe object and its child objects
• Definable threshold / maxTimeThreshold to determin when a gesture is actually a swipe
• Events triggered for swipe “start”,”move”,”end” and “cancel”
• End event can be triggered either on touch release, or as soon as threshold is met
• Allows swiping and page scrolling
• Disables user input elements (Button, form, text etc) from triggering swipes

Swipe

在它最基本的，该插件将添加一部Swipe检测使用Swipe处理程序，你可以发现哪个方向用户Swipe。

$("#swipe").swipe({

  swipe:function(event, direction, distance, duration, fingerCount) {

    $(this).text("You swiped " + direction );

  }

});

为了方便我们添加处理程序，只有在一个特定方向触发：swipeLeft, swipeRight, swipeUp, swipeDown，每种都通过了以下的论点：event, direction, distance, duration, fingerCount.

$("#swipe").swipe({

  swipeLeft:function(event, direction, distance, duration, fingerCount) {

    //This only fires when the user swipes left

  }

});

距离阈值

确保动作是一种故意swipe，最小距离阈值被添加，默认是75px。如果用户移动小于然后swipe[Direction] 的处理是不触发。

$("#threshold").swipe({

  swipe:function(event, direction, distance, duration, fingerCount){

    $(this).text("You swiped " + direction + " for " + distance + "px" );

  },

  threshold:100

});

Fingers

我们还可以限制swipe只触发1或“所有”组合的手指，用手指的value，0用手指将报告如果运行在非触摸设备（桌面）。

$("#fingers").swipe({

  swipe:function(event, direction, distance, duration, fingerCount){

    $(this).text("You swiped " + direction + " with " + fingerCount + " fingers" );

  },

  fingers:'all'

});

Swipe Status

为了使更多的复杂界面的相互作用，也可以用于swipe每个阶段接收事件，使用swipeStatus处理程序。

$("#status").swipe( {

swipeStatus:function(event, phase, direction, distance, duration, fingerCount)

{

  //Here we can check the:

  //phase : 'start', 'move', 'end', 'cancel'

  //direction : 'left', 'right', 'up', 'down'

  //distance : Distance finger is from initial touch point in px

  //duration : Length of swipe in MS

  //fingerCount : the number of fingers used

  },

  threshold:100,

  maxTimeThreshold:2500,

  fingers:'all'

});

Simple image scroller demo

这个简单的例子使用刷卡状态检测当用户是移动的，但尚未达到滑动阈值，图像拖动直到达到阈值，并滚动到下一个图像，如果刷卡没有完成，图像会回到它开始的地方。

滑动事件

• swipe (事件，滑动的方向，滑动的距离，一次滑动的时间 , 几根手指)，滑动事件还有 方法和上面相同 swipeLift – 向左滑动  swipeRight-向右滑动 swipeUp-向上滑动  swipeDown-向下滑动。
• swipeStatus (事件, 手指状态，滑动的方向，滑动的距离，一次滑动的时间 , 几根手指)，swipeStatus 和 swipe 不同的是 这个参数是一直在执行的，大家可以看看下面的例子（复制到记事本上打开即可），来了解一下两个事件的不同之处。
• 两根手指往里捏或者扩张事件：pinchStatus(事件,手指状态 ,方向(in和out，需要注意的一点in是往外扩，out是往里捏),滑动的距离, 一次滑动的时间 , 几根手指, 变焦)
• 包含：pinchIn（向外扩张），pinchOut （向里捏）
• 其他常用事件还有：doubleTap （双击屏幕） click （单击屏幕） longTap (长按屏幕)

More info

For the source, documentation, detailed demos, or to contribute, see:

• demos : http://labs.skinkers.com/content/touchSwipe/demo
• docs : http://labs.skinkers.com/content/touchSwipe/docs
• github : https://github.com/mattbryson/TouchSwipe-Jquery-Plugin