quojs 手指触摸事件演示版 (Touch events)

在线演示：http://wobumang.com/demo/jquery/quojs/demo.html

看上面的图是不是很兴奋，很有兴趣呢？ 来，接下来我们一起来玩玩！！

html 源码：

	<p id="p1">
		<span class="s1-0">一个手指单击</span>
		<span class="s1-1 box" style="color: red;">一个手指点我是红色</span>
		<span class="s1-2 box" style="color: blue;">一个手指点我是蓝色</span>
	</p>
	<p id="p2">
		<span class="s2-0">一个手指双击</span>
		<span class="s2-1 box" style="color: red;">一个手指双击我是红色</span>
		<span class="s2-2 box" style="color: blue;">一个手指双击我是蓝色</span>
	</p>
	<p id="p3">
		<span class="s3-0">一个手指按住</span>
		<span class="s3-1 box" style="color: red;">一个手指我是红色</span>
		<span class="s3-2 box" style="color: blue;">一个手指我是蓝色</span>
	</p>
	<p id="p4">
		<span class="s4-0">一个手指四个方向滑动</span>
		<span class="s4-1 box" style="color: red;">一个手指向左滑动</span>
		<span class="s4-2 box" style="color: blue;">一个手指向右滑动</span>
		<span class="s4-3 box" style="color: green;">一个手指向上滑动</span>
		<span class="s4-4 box" style="color: yellow;">一个手指向下滑动</span>
	</p>
	<p id="p5">
		<span class="s5-0">两个手指左右方向转动</span>
		<span class="s5-1 box" style="color: red;">两个手指向左转动</span>
		<span class="s5-2 box" style="color: blue;">两个手指向右转动</span>
	</p>
	<p id="p6">
		<span class="s6-0">两个手指放大缩小</span>
		<span class="s6-1 box" style="color: red;">两个手指放大</span>
		<span class="s6-2 box" style="color: blue;">两个手指缩小</span>
	</p>

js 源码：

	//一个手指单击
	$$('span.s1-1').tap(function() {
		$$('p#p1').style('color', 'red');
	});
	$$('span.s1-2').tap(function() {
		$$('p#p1').style('color', 'blue');
	});
	//一个手指双击
	$$('span.s2-1').doubleTap(function() {
		$$('p#p2').style('color', 'red');
	});
	$$('span.s2-2').doubleTap(function() {
		$$('p#p2').style('color', 'blue');
	});
	//一个手指按住
	$$('span.s3-1').hold(function() {
		$$('p#p3').style('color', 'red');
	});
	$$('span.s3-2').hold(function() {
		$$('p#p3').style('color', 'blue');
	});
	//一个手指四个方向滑动
	$$('span.s4-1').swipeLeft(function() {
		$$('p#p4').style('color', 'red');
	});
	$$('span.s4-2').swipeRight(function() {
		$$('p#p4').style('color', 'blue');
	});
	$$('span.s4-3').swipeUp(function() {
		$$('p#p4').style('color', 'green');
	});
	$$('span.s4-4').swipeDown(function() {
		$$('p#p4').style('color', 'yellow');
	});
	//两个手左右方向转动
	$$('span.s5-1').rotateLeft(function() {
		$$('p#p5').style('color', 'red');
	});
	$$('span.s5-2').rotateRight(function() {
		$$('p#p5').style('color', 'blue');
	});
	//两个手放大缩小
	$$('span.s6-1').pinchOut(function() {
		$$('p#p6').style('color', 'red');
		var fsize = $$('span.s6-0').style('fontSize').replace('px','');
		$$('span.s6-0').style('fontSize', (parseInt(fsize)+2)+'px');
	});
	$$('span.s6-2').pinchIn(function() {
		$$('p#p6').style('color', 'blue');
		var fsize = $$('span.s6-0').style('fontSize').replace('px','');
		$$('span.s6-0').style('fontSize', (parseInt(fsize)-2)+'px');
	});

在线演示：http://wobumang.com/demo/jquery/quojs/demo.html