简单的H5翻页实现

随着着微信的广泛应用，H5应该得到了大量的使用传播，现在咱就来做一个简单的H5翻页动作。

首先，页面的结构如下：
在content里面设置四个class=page的div
然后在javascript中使用（主要写往下翻）

$('.page').on('touchstart',function(ev){
var touch = ev.touches ? ev.touches[0] : ev;
this.pageX = touch.pageX;
this.pageY = touch.pageY;
}).on('touchmove',function(ev){
ev.preventDefault();
var touch = ev.touches ? ev.touches[0] : ev;
this.distX = touch.pageX - this.pageX;
this.distY = touch.pageY - this.pageY;
this.style.webkitTransform = 'translateY('+this.distY+'px)';
}).on(''touchend touchcancel',function(ev){
ev.preventDefault();
if(this.distx < -30){
$('.content').style.webkitTransform = 'translateY('+ -100% +'px)';
}
});