Written by myself and copied here for future reference.
var startX, startY, ingX, ingY, endX, endY, distance, pathX, pathY, tempX, tempY, pageIndex;
pageIndex = 0;
function load (){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
var event = event || window.event;
switch(event.type){
case "touchstart":
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
break;
case "touchend":
endX = event.changedTouches[0].pageX;
endY = event.changedTouches[0].pageY;
pathX = endX - startX;
pathY = endY - startY;
distance = Math.sqrt(pathX*pathX + pathY*pathY);
if (distance >= 100 && pathY < 0) {
console.log('distance is more than 30!');
switch(pageIndex){
case 0:
console.log('test1');
//$('#header').hide();
alert('Corresponding resources are loading, please wait for a moment++++++ !')
pageIndex = 1;
break;
case 1:
console.log('test2');
$('body').animate({
scrollTop: pageHeight * 2 + 'px'
}, 300);
pageIndex = 2;
break;
case 2:
console.log('test3');
//$('#footer').show();
pageIndex = 2;
break;
}
};
if (distance >= 100 && pathY > 0) {
console.log('distance is more than 30!');
switch(pageIndex){
case 0:
console.log('test1');
alert('Page is loading, please wait for a moment!');
pageIndex = 0;
break;
case 1:
console.log('test2');
//$('#header').show();
pageIndex = 1;
break;
case 2:
console.log('test3');
//$('#footer').hide();
$('body').animate({
scrollTop: pageHeight * 0 + 'px'
}, 300);
pageIndex = 1;
break;
}
};
break;
case "touchmove":
event.preventDefault();
ingX = event.touches[0].pageX;
ingY = event.touches[0].pageY;
console.log(ingX, ingY);
tempX = ingX - startX;
tempY = ingY - startY;
/*
$('#page2').css({
transform: 'scale(' + (1+tempX/100) + ', ' + (1+tempY/100) + ')'
});
*/
break;
}
}
}
window.addEventListener('load',load, false);