holyzfy/myTouch.js

## myTouch.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1" />
<title>test touch</title>
<script src="http://img1.cache.netease.com/f2e/libs/zepto.js"></script>
<!-- <script src="zepto.js"></script> -->
<style>
.box {
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-ms-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
}
.dragging {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}
</style>
</head>

<body style="overflow: hidden;">

<div id="box" class="box" style="position:relative; top:200px; height:50px; background: #ccc;">左右滑动看看</div>

<script>
var myTranslate = (function(){
	var getProperty = function(name) {
		var prefixes = ['Webkit', 'Moz', 'O', 'ms', ''],
			testStyle = document.createElement('div').style;
		for (var i = 0; i < prefixes.length; ++i) {
			if (testStyle[prefixes[i] + name] !== undefined) {
				return prefixes[i] + name;
			}
		}
		// Not Supported
		return;
	};

	var transformProperty = getProperty('Transform');
	return function(element, dx, dy) {
		dx = dx || 0;
		dy = dy || 0;
		if (typeof dx == 'number') dx = dx + 'px';
		if (typeof dy == 'number') dy = dy + 'px';
		element.style[transformProperty] = 'translate(' + dx + ', ' + dy + ')';
	};
})();

var myTouch =  function(actions, element, threshold){
	var noop = function(){};
	for(var key in actions) {
		actions[key] = actions[key] || noop;
	}
	element = element || document;
	threshold = threshold || 50;

	var touch = {},
		dx,
		dy,
		direction;
	$(element).on("touchstart", function(e){
		var firstTouch = e.touches[0];
		touch.x1 = firstTouch.pageX;
		touch.y1 = firstTouch.pageY;
		actions.start.call(element, e);
	})
	.on("touchmove", function(e) {
		var firstTouch = e.touches[0];
		touch.x2 = firstTouch.pageX;
		touch.y2 = firstTouch.pageY;
		dx = touch.x2 - touch.x1;
		dy = touch.y2 - touch.y1;
		var angle = Math.atan2(dy, dx) * 180 / Math.PI;
		if(angle > -30 && angle < 30) {
			direction = "right"
		} else if(angle > 150 || angle < -150) {
			direction = "left";
		} else if(angle > -120 && angle < - 60) {
			direction = "up";
		} else if(angle > 60 && angle < 120) {
			direction = "bottom";
		} else {
			direction = null;
		}
		!isNaN(dx) && direction && actions.move.call(element, e, direction, dx, dy);
	})
	.on("touchend touchcancel", function(e){
		var action = Math.abs(dx) > threshold ? "end" : "cancel";
		actions[action].call(element, e, direction);
		actions.complete.call(element, e);
		touch = {};
	});
};

var box = $("#box")[0];
myTouch({
	start: function() {
		console.info("start", arguments);
	},
	move: function(e, direction, dx, dy) {
		console.info("move", arguments);
		$(this).addClass("dragging");
		myTranslate(this, dx, dy);
	},
	end: function(e, direction){
		console.info("end", arguments);
		var viewport = document.documentElement.clientWidth;
		if(direction == "left") {
			viewport *= -1;
		}
		myTranslate(this, viewport);
	},
	cancel: function() {
		console.info("cancel", arguments);
		myTranslate(this, 0, 0);
	},
	complete: function(e, x){
		$(this).removeClass("dragging");
		console.info("complete", arguments);
	}
}, box);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, maximum-scale=1" />
	<title>test touch</title>
	<script src="http://img1.cache.netease.com/f2e/libs/zepto.js"></script>
	<!-- <script src="zepto.js"></script> -->
	<style>
	.box {
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-ms-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
	}
	.dragging {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
	}
	</style>
	</head>

	<body style="overflow: hidden;">

	<div id="box" class="box" style="position:relative; top:200px; height:50px; background: #ccc;">左右滑动看看</div>

	<script>
	var myTranslate = (function(){
	var getProperty = function(name) {
	var prefixes = ['Webkit', 'Moz', 'O', 'ms', ''],
	testStyle = document.createElement('div').style;
	for (var i = 0; i < prefixes.length; ++i) {
	if (testStyle[prefixes[i] + name] !== undefined) {
	return prefixes[i] + name;
	}
	}
	// Not Supported
	return;
	};

	var transformProperty = getProperty('Transform');
	return function(element, dx, dy) {
	dx = dx \|\| 0;
	dy = dy \|\| 0;
	if (typeof dx == 'number') dx = dx + 'px';
	if (typeof dy == 'number') dy = dy + 'px';
	element.style[transformProperty] = 'translate(' + dx + ', ' + dy + ')';
	};
	})();

	var myTouch = function(actions, element, threshold){
	var noop = function(){};
	for(var key in actions) {
	actions[key] = actions[key] \|\| noop;
	}
	element = element \|\| document;
	threshold = threshold \|\| 50;

	var touch = {},
	dx,
	dy,
	direction;
	$(element).on("touchstart", function(e){
	var firstTouch = e.touches[0];
	touch.x1 = firstTouch.pageX;
	touch.y1 = firstTouch.pageY;
	actions.start.call(element, e);
	})
	.on("touchmove", function(e) {
	var firstTouch = e.touches[0];
	touch.x2 = firstTouch.pageX;
	touch.y2 = firstTouch.pageY;
	dx = touch.x2 - touch.x1;
	dy = touch.y2 - touch.y1;
	var angle = Math.atan2(dy, dx) * 180 / Math.PI;
	if(angle > -30 && angle < 30) {
	direction = "right"
	} else if(angle > 150 \|\| angle < -150) {
	direction = "left";
	} else if(angle > -120 && angle < - 60) {
	direction = "up";
	} else if(angle > 60 && angle < 120) {
	direction = "bottom";
	} else {
	direction = null;
	}
	!isNaN(dx) && direction && actions.move.call(element, e, direction, dx, dy);
	})
	.on("touchend touchcancel", function(e){
	var action = Math.abs(dx) > threshold ? "end" : "cancel";
	actions[action].call(element, e, direction);
	actions.complete.call(element, e);
	touch = {};
	});
	};

	var box = $("#box")[0];
	myTouch({
	start: function() {
	console.info("start", arguments);
	},
	move: function(e, direction, dx, dy) {
	console.info("move", arguments);
	$(this).addClass("dragging");
	myTranslate(this, dx, dy);
	},
	end: function(e, direction){
	console.info("end", arguments);
	var viewport = document.documentElement.clientWidth;
	if(direction == "left") {
	viewport *= -1;
	}
	myTranslate(this, viewport);
	},
	cancel: function() {
	console.info("cancel", arguments);
	myTranslate(this, 0, 0);
	},
	complete: function(e, x){
	$(this).removeClass("dragging");
	console.info("complete", arguments);
	}
	}, box);
	</script>
	</body>
	</html>