* Zepto.js v1.0.1 touch extend (Zepto.js v1.0.1 的swipe touch扩展)js-处理手机移动端web触屏手势动作。

Zepto.js v1.0.1版本的touch.js模块引入使用后会导致页面很卡的情况,所以开发了一个新的扩展插件来替换其touch.js。已经过Android/ios测试。

github
* zTouch特点:

zTouch.js只包含核心功能函数,不包含任何效果,简洁轻巧;
    提供丰富的回调参数,可由用户自定义扩展效果(可参考Demo);
    支持多种回调函数,方便及时监控及事件处理(实例化前/后回调,touch start/move/end回调);
    支持用户自定义手势标准定义(X-Y轴滑动限定,角度限定);
    支持BOX边界检测,touch超出边界后自动停止回调操作;
    提供内部属性设置接口,可在内部tPoint中加入用户自定义属性;
    支持手势横向滑动,同时保证浏览器纵向正常滑动;
    不会阻止BOX内的其它绑定事件(onclick等);
    支持多点触摸监控(缩放,旋转);

由于手机浏览器会阻止JS对gesture手势事件的监听zTouch.js中对gesture监听接口虽然可以调用,但无法实现手势操作(Android设备测试,IOS设备应该支持)。我们会在后续进行多点touch事件模拟解决。 (最新版zTouch已经去除对gesture事件的监听方法,采用e.touches对多点触摸进行监控,支持两点监控的缩放和旋转操作)
github
zTouch.js中为事件监听的核心文件。所有的特殊效果可以在回调函数进行个性化定制。
* 主要提供以下回调函数:

beforeCallback (实例化之前触发的回调函数),
sCallback (start callback,touchstart时触发的回调函数),
mCallback (move callback,touchmove时触发的回调函数),
eCallback (end callback,touchend时触发的回调函数)
afterCallback (实例化之后触发的回调函数),
* 回调函数中会传入touch事件相关回调参数:

self:实例化的BOX,
startX:触点起始X,
startY:触点起始Y,
bL:(Box Left) 相对于文档的left偏移,
bT:(Box Top)相对于文档的top偏移,
bW:(Box Width)BOX的宽度,
bH:(Box Height)BOX的高度,
bRb:(Box Right Border)BOX的右边界,
bBb:(Box Bottom Border)BOX的下边界,
endX:触点结束X;
endY:触点结束Y;
mX:(move x distance)X方向滑动距离;
mY:(move y distance)Y方向滑动距离;
direction:手势滑动方向(left/right/false);
angle:单点手势滑动角度;
duration:手势持续时间;
vendor:浏览器前缀(-moz/-webkit/-o/-ms);

tPoint.multiTouch:是否多点触摸(touchmove时可监控);
tPoint.gStartDis:(gisture start distance)手势起始距离;
tPoint.gEndDis:(gisture end distance)手势结束距离;
tPoint.scale:手势缩放比例;
tPoint.rotation:手势旋转角度;
* 同时在外部回调函数中提供修改内部tPoint数据的接口:

tPoint.setAttr(name,value);

* 调用方法:

<script type="text/javascript">
//传入args初始化参数对象
args={
iniL:30,//X方向滑动的最小距离
iniT:50,//Y方向滑动的最大距离
eCallback:function(tPoint){
switch(tPoint.direction){
case "left":
alert("left");
break;
case "right":
alert("right");
}
}
}
$("body").Swipe(args);
</script>

* 项目地址:

http://chinatjnet.github.io/zTouch/
* Github地址:

https://github.com/chinatjnet/zTouch/
* 演示地址:

http://chinatjnet.github.io/zTouch/demo.html

原文地址:http://blog.baiwand.com/?post=207

最新文章

  1. Maven入门详解
  2. webpack入门教程之初识loader(二)
  3. CentOS 7.0系统安装配置步骤详解
  4. GDUFE-OJ 1359校庆素数 埃氏筛法
  5. array_pop()将数组最后一个单元弹出(出栈)
  6. Activity生命周期解说
  7. String.format 细节
  8. MYSQL while 、repeat
  9. hdu1978(递推dp)
  10. 学习Lucene、solr之前应当了解的一些术语
  11. HDU - 1213 dfs求联通块or并查集
  12. LeetCode之“散列表”:Isomorphic Strings
  13. java并发编程(1) --并发基础及其锁的原理
  14. idea中使用github
  15. 我从Angular 2转向Vue.js, 也没有选择React
  16. 《Spring Boot 入门及前后端分离项目实践》系列介绍
  17. 自定义命令杀死 java 进程 alias kjava
  18. 面试题----实现memcpy
  19. 更换windows xp序列号
  20. 修复jqgrid setgridparam postdata 的多次查询条件累加

热门文章

  1. 【DataStructure】Some useful methods about linkedList(二)
  2. HINTERNET 句柄
  3. Hibernate annotation多对多配置
  4. Swift的基础,操作符,字符串和集合类型
  5. 在apache2.4版本之前做客户端访问控制,是用Allow Deny Order指令做访问控制的,
  6. easyui placeholder 解决方案
  7. RabbitMQ消息队列安装和配置以及推送消息
  8. IOS开发系列 --- 核心动画
  9. .Net中如何使用MySql连接池
  10. SQL随机查询,显示行号,查询数据段