简单的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)';
}
});


   转载规则


《简单的H5翻页实现》 Sterne Lee 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
12 个 CSS 高级技巧汇总 12 个 CSS 高级技巧汇总
下面这些CSS高级技巧,一般人我可不告诉他哦。 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化
2015-10-30
下一篇 
把HTML插入canvas实现网页截图 把HTML插入canvas实现网页截图
将DOM内容HTML绘制到画布中是有可能的,但如何有把握并且安全地实现它,就应该按照规范行事。你不能把HTML画到canvas上。相反,你需要使用一个SVG图像,其中包含你想要呈现的内容。可以使用<foreignobject>元素包含
2015-09-29
  目录