手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明

最近需要做一个手机小门户网站，因为目前主流的手机都是安卓和苹果的，他们的浏览器内核都是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：

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

< html > < head > < meta  http-equiv = "Content-Type"  content = "text/html; charset=gb2312"  /> < title >无标题文档</ title > < script  type = "text/javascript"  src = "http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.min.js" ></ script > < script  type = "text/javascript"  src = "http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js" ></ script > < script > $(function() { //swipe 的dome $("#test").swipe( { swipe:function(event, direction, distance, duration, fingerCount) { $(this).text("你用"+fingerCount+"个手指以"+duration+"秒的速度向" + direction + "滑动了" +distance+ "像素 " ); }, }); //swipeStatus的dome $("#test2").swipe( { swipeStatus:function(event, phase, direction, distance, duration,fingerCount) { $(this).text("你用"+fingerCount+"个手指以"+duration+"秒的速度向" + direction + "滑动了" +distance+ "像素 " +"你在"+phase+"中"); }, }); }); </ script > </ head > < body > < div  id = "test"  style = "height:200px; background:#C63;-webkit-user-select:none; text-align:center; line-height:200px; color:#fff" >swipe 的dome</ div > < div  id = "test2"  style = "height:200px; background:#C63; margin-top:20px;-webkit-user-select:none; text-align:center; line-height:200px; color:#fff" >swipeStatus的dome</ div > </ body > </ html >

官方网站

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