移动设备手势事件库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 相关文章推荐
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
javascript断点调试心得分享
Apr 23 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
ant design实现圈选功能
Dec 17 Javascript
Vue实现简单的留言板
Oct 23 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 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使用ICQ网关发送手机短信
2013/10/30 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
基于JavaScript实现随机点名器
2021/02/25 Javascript
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python制作简单五子棋游戏
2019/06/18 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Python with标签使用方法解析
2020/01/17 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
经理助理岗位职责
2014/03/05 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
导游词之山海关
2019/12/10 职场文书