zTouch-移动端触屏开发利器(zepto touch扩展)
* 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
zTouch-移动端触屏开发利器(zepto touch扩展)的更多相关文章
- 移动端触屏click点击事件延迟问题,以及tap的解决方案
在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...
- WPF环境下多点触屏开发的一些经验(转)
本系列将介绍Multi-Touch(MT)多点触控技术的相关内容,使开发人员了解如何在Windows 平台中开发出具有MT 功能的应用程序.众所周知Windows 7 操作系统自身已经支持具有MT 功 ...
- JS案例之5——移动端触屏滑动
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- WPF Multi-Touch 开发:基础触屏操作(Raw Touch)
原文 WPF Multi-Touch 开发:基础触屏操作(Raw Touch) 多点触控(Multi-Touch)就是通过与触屏设备的接触达到人与应用程序交互的操作过程.例如,生活中经常使用的触屏手机 ...
- 【转载】jQuery手机移动端触屏日历日期选择
文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...
- 移动端触屏滑动,JS事件
先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...
- js移动端触屏事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- 自己用原生JS写的轮播图,支持移动端触屏滑动,面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
随机推荐
- Linux FTP安装与简单配置
1.检測是否原有启动 ps -ef|grep vsftpd 2.检測是否有安装包 rpm -qa|grep vsftpd 3.假设有输出.查看状态并启动 service vsftp status - ...
- iOS8使用Core Graphics实现渐变效果-Swift基础教程
Core Graphics是一个强大的底层API,在这篇教程中我们主要使用Core Graphics来实现渐变效果,为了简单起见,我们采用线性渐变.线性渐变是从起点到终点颜色进行顺序渐变.教程在iOS ...
- [Python笔记][第二章Python序列-tuple,dict,set]
2016/1/27学习内容 第二章 Python序列-tuple tuple创建的tips a_tuple=('a',),要这样创建,而不是a_tuple=('a'),后者是一个创建了一个字符 tup ...
- RocketMQ与Kafka对比(18项差异)评价版
此文是rocketmq作者vintage.wang所写,对于每项对比,后面都增加了我的观点,有不对的地方,请各位指出. 淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为 ...
- eclipse安装svn插件,在输入url后,一直卡在in progress界面不懂。
今天遇到上面的情况.网上找了半天都没有找到解决的办法.后来,仔细比对了一下我的eclipse版本和svn版本.发现svn版本真的太老了.用上新的svn后,立马就可以用了 svn - http://su ...
- Oracle运维必修内功:前瞻性运维理念
数据库是商业的灵魂和大脑,作为核心IT业务模块,数据库的重要性毋庸置疑.管理数据库在做好系统前期部署后,在系统持续运行中,需要时刻关注系统自身和环境等对于运行可能产生的潜在影响和可能的危险,并及时予以 ...
- [zz]npm安装错误解决方法
错误: npm ERR! at Object.parse (native) npm ERR! at Packer.readRules (/usr/local/lib/node_modules/npm/ ...
- Android 桌面生成快捷方式
Android生成桌面快捷方式的几种方法: //------------以下为动态替换桌面应用Icon的一种解决方案------------------- // 1.获取本地目录图片的Bitmap ; ...
- WINFORM窗体里使用网页控件的一些办法
最近弄一个项目,是个CS的.当然也是有表单之类的,如果将HTML表单搬到窗体上就省事多了. .首先要使用一个控件 WebBrowser 载入页面没使用URL属性,使用了下面这个属性 this.webB ...
- ORACLE PL/SQL开发--bulk collect的用法 .
刚刚在inthirties老大的博客里看到这篇文章,写的不错,正好自己最近在学习PL/SQL,转过来学习学习. ============================================ ...