移动设备手势事件库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 相关文章推荐
基于jquery的web页面日期格式化插件
Nov 15 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
Node.js引入UIBootstrap的方法示例
May 11 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 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
德生PL660的电路分析和打磨
2021/03/02 无线电
用PHP实现文件上传二法
2006/10/09 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
Python操作列表之List.insert()方法的使用
2015/05/20 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
怎么样写好简历中的自我评价
2013/10/25 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
个人买房协议书范本
2014/10/06 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
老公出轨后的保证书
2015/05/08 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL