jQuery swipe 직접 구현하기

한페이지에 2개의 탭이 있고
탭 전환을 터치이벤트나 마우스클릭 이벤트로 스와이프 되게 구현한 것입니다. 
css 부분
각 div를 가로로 배열합니다.

div.tab_right { 
	left: 100%;
}

div.tab_left, div.tab_right { 
	width: 100%;
	position: absolute;
}

스크립트
페이지가 스와이프 되는 애니메이션 부분입니다.
단순하게 생각하여 두페이지를 나열하고 각페이지의 left값을 조정하여 좌우로 이동시키고
화면 밖으로 나간 div은 숨김처리하여 가로 스크롤이 나오지 않게 합니다.

$(".tab_left").show().animate({
	left : '0'
});
$(".tab_right").animate({
	left : '100%'
}, function(){
	this.style.display = 'none';
});

$(".tab_left").animate({
	left : '-100%'
}, function(){
	this.style.display = 'none';
});
$(".tab_right").show().animate({
	left : '0'
});

페이지의 이벤트를 체크하는 부분
클릭이나 터치된 부분의 좌표로부터 이동한 좌표를 계산하여 좌/우 를 판별합니다.
다만 수직 스크롤시 약간 이동하는 부분이 있기 때문에 감도로 상수값을 줬습니다.

var startX = 0; 
var endX = 0;
var sensitive = 90;
$(document).bind('touchstart mousedown', function(e) {
	e.preventDefault();	//	이벤트취소
		if (e.type == 'touchstart' || e.type == 'touchmove'
			|| e.type == 'touchend' || e.type == 'touchcancel') {
		var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
		startX = touch.pageX;
		} else if (e.type == 'mousedown' || e.type == 'mouseup'
				|| e.type == 'mousemove' || e.type == 'mouseover'
				|| e.type == 'mouseout' || e.type == 'mouseenter'
				|| e.type == 'mouseleave') {
			startX = e.pageX;
		}
	});
	
	$(document).bind('touchend mouseup', function(e) {
		e.preventDefault();	//	이벤트취소

		if (e.type == 'touchstart' || e.type == 'touchmove'
				|| e.type == 'touchend' || e.type == 'touchcancel') {
			var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			endX = touch.pageX;
		} else if (e.type == 'mousedown' || e.type == 'mouseup'
				|| e.type == 'mousemove' || e.type == 'mouseover'
				|| e.type == 'mouseout' || e.type == 'mouseenter'
				|| e.type == 'mouseleave') {
			endX = e.pageX;
		}
		if(startX + sensitive < endX){
			swipe("left");
		} else if(startX > endX + sensitive) {
			swipe("right");
		}
	});