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

 更新时间:2017年08月18日 11:09:58   作者:漫彧明  
这篇文章主要介绍了移动设备手势事件库Touch.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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/

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

相关文章

  • easyUI实现(alert)提示框自动关闭的实例代码

    easyUI实现(alert)提示框自动关闭的实例代码

    下面小编就为大家带来一篇easyUI实现(alert)提示框自动关闭的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • webpack配置文件外置的两种实现方式

    webpack配置文件外置的两种实现方式

    webpack配置环境变量文件,是根据打包命令寻找对应的环境变量文件,从而获取接口地址,本文就来介绍一下webpack配置文件外置的两种实现方式,感兴趣的可以了解一下
    2023-12-12
  • js判断手机端(Android手机还是iPhone手机)

    js判断手机端(Android手机还是iPhone手机)

    现在使用手机上网的人越来越多,一些下载网站会通过判断不同系统手机来访问不同网页,比如iPhone和Android。下面我们就来介绍一下如何用javascript判断iPhone或Android手机访问
    2015-07-07
  • JavaScript中if嵌套assert的方法详解

    JavaScript中if嵌套assert的方法详解

    在JavaScript中,通常我们不会直接使用`assert`这个词,因为JavaScript标准库中并没有直接提供`assert`函数,下面是一个详细的示例,展示如何在JavaScript中模拟`assert`函数,并在`if`语句中嵌套使用它来检查条件,需要的朋友可以参考下
    2024-09-09
  • JavaScript 一道字符串分解的题目

    JavaScript 一道字符串分解的题目

    要求用js写一个函数,对传入的形如下网址字符串,返回对应的对象。
    2011-08-08
  • es6 javascript对象Object.values() , Object.entries()示例详解

    es6 javascript对象Object.values() , Object.entr

    这篇文章主要介绍了es6 javascript对象Object.values() , Object.entries()的示例代码,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 关于JS中的apply,call,bind的深入解析

    关于JS中的apply,call,bind的深入解析

    下面小编就为大家带来一篇关于JS中的apply,call,bind的深入解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-04-04
  • 实例讲解javascript实现异步图片上传方法

    实例讲解javascript实现异步图片上传方法

    给大家详细讲解一下如何通过javascript写出异步图片上传,并且把实例代码给大家分享了下,有兴趣的读者们测试一下吧。
    2017-12-12
  • 微信小程序自定义模态框

    微信小程序自定义模态框

    这篇文章主要为大家详细介绍了微信小程序自定义模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript 贪吃蛇(详细注释版)

    javascript 贪吃蛇(详细注释版)

    javascript贪吃蛇 作者sunxing007 注释完整,面向对象
    2009-05-05

最新评论