移动设备手势事件库Touch.js使用详解


Posted in Javascript onAugust 18, 2017

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/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
jquery实现保存已选用户
Jul 21 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
vue中锚点的三种方法
Jul 06 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
JavaScript你不知道的一些数组方法
Aug 18 #Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 #Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 #Javascript
JS实现页面打印(整体、局部)
Aug 18 #Javascript
简单实现jQuery轮播效果
Aug 18 #jQuery
JavaScript编写的网页小游戏,很给力
Aug 18 #Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 #Javascript
You might like
PHP的ASP防火墙
2006/10/09 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
使用Apache的rewrite
2021/03/09 Servers
你真的了解JavaScript吗?
2007/02/24 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python matlab库简单用法讲解
2020/12/31 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
什么是设计模式
2012/06/17 面试题
优秀应届生推荐信
2013/11/09 职场文书
大跃进口号
2014/06/16 职场文书
农民工讨薪标语
2014/06/26 职场文书
人代会标语
2014/06/30 职场文书
特岗教师个人总结
2015/02/10 职场文书
党员公开承诺书2016
2016/03/24 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
新手必备Python开发环境搭建教程
2021/05/28 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android