移动设备手势事件库Touch.js
来源:互联网 发布:软件著作权加急官费 编辑:程序博客网 时间:2024/05/16 15:15
Touch.js手势库是专门在Webkit内核浏览器的移动设备中使用中设计的, Touch.js是移动设备上的手势识别与事件库。Touch.js基于原生事件,支持事件代理, 性能更好,极简的API,秒速上手等优势。
1、旋转事件- startRotate
var angle = 0;touch.on('#target', 'touchstart', function(ev){ev.startRotate();ev.preventDefault();});touch.on('#target', 'rotate', function(ev){var totalAngle = angle + ev.rotation;if(ev.fingerStatus === 'end'){angle = angle + ev.rotation;}this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)';});
2、双指缩放事件-Scale
var target = document.getElementById("target");target.style.webkitTransition = 'all ease 0.05s';touch.on('#target', 'touchstart', function(ev){ev.preventDefault();});var initialScale = 1;var currentScale;touch.on('#target', 'pinchend', function(ev){currentScale = ev.scale - 1;currentScale = initialScale + currentScale;currentScale = currentScale > 2 ? 2 : currentScale;currentScale = currentScale < 1 ? 1 : currentScale;this.style.webkitTransform = 'scale(' + currentScale + ')';log("当前缩放比例为:" + currentScale + ".");});touch.on('#target', 'pinchend', function(ev){initialScale = currentScale;});
3、识别单击, 双击和长按事件-Tap & Hold
touch.on('#target', 'hold tap doubletap', function(ev){//console.log(ev.type);});
4、向左, 向右滑动-Swipe
touch.on('#target', 'touchstart', function(ev){ev.preventDefault();});var target = document.getElementById("target");target.style.webkitTransition = 'all ease 0.2s';touch.on(target, 'swiperight', function(ev){this.style.webkitTransform = "translate3d(" + rt + "px,0,0)";log("向右滑动.");});touch.on(target, 'swipeleft', function(ev){log("向左滑动.");this.style.webkitTransform = "translate3d(-" + this.offsetLeft + "px,0,0)";});
5、拖拽事件-Drag
touch.on('#target', 'touchstart', function(ev){ev.preventDefault();});var target = document.getElementById("target");var dx, dy;touch.on('#target', 'drag', function(ev){dx = dx || 0;dy = dy || 0;log("当前x值为:" + dx + ", 当前y值为:" + dy +".");var offx = dx + ev.x + "px";var offy = dy + ev.y + "px";this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";});touch.on('#target', 'dragend', function(ev){dx += ev.x;dy += ev.y;});
6、原生事件-Touch
touch.on('#target', 'touchstart touchmove touchend', function(ev){console.log(ev.type);});
touch.js官方网站:http://touch.code.baidu.com/
阅读全文
0 0
- 移动设备手势事件库Touch.js
- 浅谈移动端之js touch事件 手势滑动事件
- js touch事件 手势滑动事件总结
- 手势识别与事件库 Touch.js若干问题及解决方法
- Hammer.js 移动设备触摸手势js库
- js中的touch事件及gesture(手势)事件
- 移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库
- 移动端手势事件 hammer.JS插件
- 移动设备,点击事件生效,但是touch事件未生效.
- 移动端touch事件 之 百度 touch.js 开发文档
- AS3 移动设备上的触控事件和手势
- AS3移动设备上的触控事件和手势
- Hammer.js——移动设备触摸手势
- JS移动设备触摸事件API
- js中的移动设备的事件处理
- 移动端touch事件
- 移动端滑屏 touch事件
- js实现touch移动触屏滑动事件
- js 获取当前网址/项目地址
- HDU 5875
- QNX驱动开发—APP应用与resource manger的交互通信,进程间通信
- CO-IP技术详解
- 慕课玩转算法课程之动态规划入门——1
- 移动设备手势事件库Touch.js
- ctrl+home在16寸笔记本中的使用
- Html5的video标签自动填充满父div的大小
- 面试之常考二叉树
- form表单提交的两种方式
- 莫比乌斯反演知识点及其理解
- SSL CA客户端证书双向认证IIS配置及代码验证
- 微商城的魅力
- 【备忘】传智播客最新大数据第3期实战培训完整版视频教程