HTML5单页面如何手势滑屏切换

转自：微点阅读（www.weidianyuedu.com）  http://www.weidianyuedu.com/

H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的，效果图如下所示，本文简单说一下其实现原理和主要思路。

1、实现原理

假设有5个页面，每个页面占屏幕100%宽，则创建一个DIV容器viewport，将其宽度(width) 设置为500%，然后将5个页面装入容器中，并让这5个页面平分整个容器，最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面。

XML/HTML Code复制内容到剪贴板

<div id="viewport" class="viewport">

<div class="pageview" style="background: #3b76c0" >

<h3 >页面-1</h3>

</div>

<div class="pageview" style="background: #58c03b;">

<h3>页面-2</h3>

</div>

<div class="pageview" style="background: #c03b25;&#