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

最新推荐文章于 2024-03-14 11:53:18 发布

liuixnjie_

最新推荐文章于 2024-03-14 11:53:18 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签： jquery 手机插件

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

项目中遇到触摸滑动的问题，在网上查找后，找到一个解决办法，再次记录一下，希望对大家有所帮助，该插件mini版大概20kb

注：转自http://www.cnblogs.com/aimyfly/p/3843977.html（温暖向阳Love）

1:TouchSwipe是依赖于jquery的
2:手指事件会在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内手指滑动内容效果，不出现滚动条：

<br><br>$(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:

笔者给出的：

关于a标签失效的解决方法：
goodsList.swipe({
swipe: function (event, phase, direction, distance, duration, fingers) {
},
excludedElements: ""//排除元素
});

liuixnjie_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
# 转：手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明

转：手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明项目中遇到触摸滑动的问题，在网上查找后，找到一个解决办法，再次记录一下，希望对大家有所帮助，该插件mini版大概20kb注：转自http://www.cnblogs.com/aimyfly/p/3843977.html（温暖向阳Love）1:TouchSwipe是依赖于jquery的 2:如果手指事件会
复制链接

扫一扫