#touchjs插件介绍
1.Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.
2.Touch.js的代码已托管于github并开源,希望能帮助国内更多的开发者学习和开发出优秀的App产品.
3.Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用.
##1. 他自带的手势事件支持有:

     分类	参数	描述
	缩放	pinchstart	缩放手势起点
	pinchend	缩放手势终点
	pinch	缩放手势
	pinchin	收缩
	pinchout	放大
	旋转	rotateleft	向左旋转
	rotateright	向右旋转
	rotate	旋转
	滑动	swipestart	滑动手势起点
	swiping	滑动中
	swipeend	滑动手势终点
	swipeleft	向左滑动
	swiperight	向右滑动
	swipeup	向上滑动
	swipedown	向下滑动
	swipe	滑动
	拖动开始	dragstart	拖动屏幕
	拖动	drag	拖动手势
	拖动结束	dragend	拖动屏幕
	拖动	drag	拖动手势
	长按	hold	长按屏幕
	敲击	tap	单击屏幕
	doubletap	双击屏幕
	 * 
	 * 

##2.touchJS的语法:

语法:touch.on(元素或选择器,事件名,监听函数);

例如:
 ①代码touch.on(".div","tap",function);
 ②简单的一句代码就能选择到所有class为div的DOM元素加了一个点击事件,且事件里面的this指向了发生事件的原生DOM的元素;
 ③event对象是做手势里用处比较多的一个对象(如发生的距离的X/Y,发生的type)。

##3.touchJS例子

<script type="text/javascript">
		var rt = 100;
		touch.on(document, 'swiperight', function(ev){
			var oLeft = ball1.offsetLeft;
			ball1.style.left = oLeft+ rt +"px";
			console.log("向右滑动.");
		});

		touch.on(document, 'swipeleft', function(ev){
			console.log("向左滑动.");
			var oLeft = ball1.offsetLeft; 
			ball1.style.left = oLeft - rt +"px";
		});
		touch.on(document,"swipeup",function() {
			var oTop = ball1.offsetTop;
			ball1.style.top = oTop - rt + "px";
		})
		touch.on(document,"swipedown",function(){
			var oTop = ball1.offsetTop;
			ball1.style.top = oTop + rt + "px";
		})
		// touch.on(document,"swipeend",function() {
		// 	alert("滑动结束");
		// })

##下面会介绍手势事件
[js点击]JavaScript之触摸事件之touch.js详解

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐