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

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

by 郑州seo on 2013 年 7 月 6 日 in jquery, 网站建设 with 6 Comments

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

 
     
      
        
        
          < 
          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 
          > 
         
 
      
 
     
   

移动端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

转载请注明本文地址：手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明