移动设备手势事件库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 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
浅谈js原生拖放
Nov 21 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
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之变量、常量学习笔记
2008/03/27 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
element中的$confirm的使用
2020/04/26 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python实现用户名密码校验
2020/03/18 Python
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
物理力学求职信
2014/02/18 职场文书
闪闪的红星观后感
2015/06/08 职场文书
中秋节主题班会
2015/08/14 职场文书
Java异常体系非正常停止和分类
2022/06/14 Java/Android