移动设备手势事件库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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
关于使用js算总价的问题
2017/06/23 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python中format()格式输出全解
2019/04/12 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Django的CVB实例详解
2020/02/10 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
爱国演讲稿400字
2014/05/07 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
人力资源部岗位职责
2015/02/11 职场文书
观看建国大业观后感
2015/06/01 职场文书
小学生大队委竞选稿
2015/11/20 职场文书