关闭

# 转:手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明

标签: jquery手机插件
338人阅读 评论(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: ""//排除元素
});
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1159次
    • 积分:45
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:3篇
    • 译文:1篇
    • 评论:0条
    文章分类