手機觸屏觸摸特效javascript-TouchSwipe（依賴於jquery庫）中文說明

最近須要作一個手機小門戶網站，由於目前主流的手機都是安卓和蘋果的，他們的瀏覽器內核都是webkit，這就意味着手機網站是能夠用html5和css3開發的，越開發越感受到html5和css3的強大與它的重要性，且不談html5和css3，作網站的時候遇到了一個大問題，就是觸摸js的問題，之前都是寫的電腦端的js，忽然接觸到觸摸屏的js可真是腦殼大了，由於手機網站屬於初期，即便你有問題也在互聯網上很難找獲得，後來就在這個文章上找到了關於觸摸屏的js插件《43個處理觸摸事件的jquery插件》,最後找了一個本身以爲不錯的插件——TouchSwipe,TouchSwipe是依賴於jquery的，而這個插件也沒有中文資料，那我今天就整理一下他的相關信息及教程。javascript

注意：此插件雖好，可是須要注意的是若是手指事件會在a標籤超連接內失效，筆者作了一個焦點圖，若是圖片上有A標記的話會失效，因此在官方沒有改正以前，仍是放棄吧。。。。（另外一個手機觸摸插件jQuery Touchwipe Plugin 輕量級的手機觸摸特效插件（javascript））css

事件：html

滑動事件：html5

swipe (事件，滑動的方向，滑動的距離，一次滑動的時間 , 幾根手指)java

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

swipeStatus (事件, 手指狀態，滑動的方向，滑動的距離，一次滑動的時間 , 幾根手指)css3

swipeStatus 和 swipe 不一樣的是這個參數是一直在執行的，你們能夠看看下面的例子（複製到記事本上打開便可），來了解一下兩個事件的不一樣之處。git

兩根手指往裏捏或者擴張事件：github

pinchStatus(事件,手指狀態 ,方向(in和out，須要注意的一點in是往外擴，out是往裏捏),滑動的距離, 一次滑動的時間 , 幾根手指, 變焦)web

包含：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