.up{-webkit-transform:translate(0px,-100%) scale(1)}
.down{-webkit-transform:translate(0px,100%) scale(1)}
.cur{-webkit-transform:translate(0px,0px) scale(1)}
#page1,#page2,#page3{position:absolute;width:100%;height:100%;}
var win_h=document.documentElement.clientHeight;
document.getElementById('page1').style.height=win_h;
document.getElementById('page2').style.height=win_h;
document.getElementById('page3').style.height=win_h;
var begin_y=end_y=0;distance_y=0,page_index=1;
function slide_start(e){
begin_y=end_y=e.targetTouched[0].pageY;
}
function slide_move(e){
end_y=e.targetTouches[0].pageY;
}
function slide_end(e){
distance_y=end_y-begin_y;
if(distance_y<=-100){
//此处假设总共三页,每一页的id为page1,page2,page3
if(page_index<3){
document.getElementById('page'+page_index).removeClass("cur").addClass('up');
page_index++;
document.getElementById('page'+page_index).removeClass("down").addClass("cur")
}
}
else if(distance_y>=100){
if(page_index>1){
document.getElementById('page'+page_index).removeClass('cur').addClass('down');
page_index--;
document.getElementById('page'+page_index).removeClass('up').addClass('cur');
}
}
}
document.body.addEventListener('touchstart',slide_start,false);
document.body.addEventListener('touchmove',slide_move,false);
document.body.addEventListener('touched',slide_end,false);
//add/remove class
function hasClass(el, className) {
if (el.classList)
return el.classList.contains(className)
else
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
}
function addClass(el, className) {
if (el.classList)
el.classList.add(className)
else if (!hasClass(el, className)) el.className += " " + className
}
function removeClass(el, className) {
if (el.classList)
el.classList.remove(className)
else if (hasClass(el, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
el.className=el.className.replace(reg, ' ')
}
}
http://jaketrent.com/post/addremove-classes-raw-javascript/
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList