清风带你学-H5+CSS3（五）移动端滑动,手势，布局

M-web

• 了解touch事件的使用

• 独立完成jdM的轮播图

• 掌握区域滚动插件使用

• 了解手势事件的原理

• 安装less运行环境nodeJS

touch事件

触摸事件

事件	说明
touchstart	当手指触碰屏幕时候触发该事件
touchmove	当手指在屏幕上滑动时候触发该事件
touchend	当手指离开屏幕时触发该事件
touchcancel	当系统停止跟踪（被迫终止）触摸时候会触发。

触摸点集合

触摸点集合	说明
targetTouches	目标元素的所有当前触摸点集合
changedTouches	目标元素的最新更改的触摸点集合
touches	页面上的所有触摸点集合

注意：在touchend事件的时候event只会记录changedtouches

坐标组

点坐标	说明
pageX/pageY	基于页面大小的坐标
clientX/clientY	基于视口大小的坐标
screenX/screenY	基于屏幕大小的坐标

IScroll

插件介绍

区域滚动插件，对于移动端的页面滚动效果表现不一致，和需要上拉刷新上拉加载等效果的页面，可以帮助快速的实现滚动效果。

插件使用

IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。

尽可能保持DOM结构的简洁。iScroll使用硬件合成