手機觸屏觸摸特效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：

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 >

 

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