HTML5单页手动滑动屏切换原理

H5 single page gesture slide panel switch is implemented by HTML5 touch event (Touch) and CSS3 animation (Transform, Transition). 效果如下所示。本文简要介绍了它的实现原理和主要思想。
1。实现原理
假设有5个页面，每个页面占100%的屏幕宽度，创建一个DIV视口的容器，它的宽度（宽度）设置为500%，那么5的页面装载容器，和5页拆分整个容器，并将容器的默认位置为0，溢出设置隐藏这是默认的屏幕，显示的第一页。

xml代码将内容复制到剪贴板。

- 1页
- 2页
- 3页
- 4页
- 5页

CSS样式：

xml代码将内容复制到剪贴板。
视口{。
宽度：500%；
身高：100%；
显示：WebKit的盒子；
溢出：隐藏；
指针事件：无；
WebKit的变换：translate3d（0,0,0）；
背面的可见性：隐藏；
职位：相对；
}

注册touchstart touchmove和touchend事件时，手指在屏幕上滑动，使用CSS3变换建立视口实时定位，例如显示一页第二，设置视口变换：translate3d（100%，0,0），这里我们使用translate3d代替translatex，translate3d可以主动开启手机GPU加速渲染页面，滑动更顺畅。
2，主要思想
把手指放在屏幕上，滑动和离开屏幕是一个完整的操作，相应的操作触发以下事件：
手指在屏幕上：ontouchstart
滑动手指在屏幕上：ontouchmove
手指从屏幕：ontouchend
我们需要捕获触摸事件的三个阶段来完成页面滑动：
Ontouchstart：初始化变量，记录手指的位置，并记录当前时间

xml代码将内容复制到剪贴板。

你的手指应该在屏幕上吗。
Document.addEventListener（touchstart
E.preventDefault（）；
VaR触摸= e.touches { 0 }；
touch.pagex startx =；
touch.pagey初始位置=；
initialpos =当前位置； / /初始位置滑动前
viewport.style.webkittransition = ； / /取消动画
，=新（日期）（的时间）； / /手指按记录开始时间
ismove = false； / /是否滑
}绑定（此）、false）；
ontouchmove：获取当前位置，计算出屏幕上的手指移动差Δx，然后将页面移动。

xml代码将内容复制到剪贴板。
如果你的手指穿过屏幕，请按手指移动/页。
Document.addEventListener（touchmove
E.preventDefault（）；
VaR触摸= e.touches { 0 }；
VaRΔx = touch.pagex - startx；
无功deltay = touch.pagey -初始位置；
如果x方向的位移大于y方向，那就是滑动。
如果（Math.abs（Δx）> Math.abs（deltay））{
movelength =Δx；
VaR翻译= initialpos +Δx； / /需要移动到的位置
/ /如果翻译> < 0或最大，超越边界表示的网页
如果（翻译= maxwidth）{
移动页面
this.transform.call（视口，翻译）；
ismove =真；
}
方向deltaX > 0 =右：左； / /判断手指滑动的方向
}
}绑定（此）、false）；

当ontouchend：手指离开屏幕，屏幕上结束的页面。首先，手指在屏幕上停留时间ΔT的计算。如果ΔT＜300ms考虑，认为这是快速滑动，但是恰恰相反，慢滑。快速滑行和慢速滑行的处理是不同的。
（1）如果它是快速滑动的，让当前页面完全位于屏幕中央（您需要计算当前页需要滑动多少）。
（2）如果滑动缓慢，还需要判断手指在屏幕上滑动的距离。如果滑动距离不超过屏幕宽度50%，那么它将返回到相反的方向，相反，它将停留在当前页面上。
xml代码将内容复制到剪贴板。
在计算最后需要停留在哪一页时，手指从屏幕上移开。
Document.addEventListener（touchend
E.preventDefault（）；
var翻译= 0；
手指停留在计算时间的屏幕上
Δ=新的VaR（）GetTime（）-，；
如果（ismove）{ / /有左右滑动
使用动画使页面转换/幻灯片到最后位置
viewport.style.webkittransition =0.3s易WebKit变换；
如果（ΔT＜300）{ / /如果停留时间小于300ms，即快速滑动，无论是滑动的距离，留下来
翻译= = =右方向
当前位置-（页宽+ movelength）：工作单位+页宽movelength；
如果最后位置超过边界位置，则停留在边界位置。
translatetranslate =翻译> 00：翻译； / /左边界
translatetranslate =翻译：翻译<<最大最大； / /右边框
{ }人
如果滑动距离小于屏幕50%，则返回
如果（Math.abs（movelength） /纸宽＜0.5）{
翻译=当前位置movelength；
其他{ }
如果距离大于滑动屏幕 50%，则滑动到
翻译= = =右方向
当前位置-（页宽+ movelength）：工作单位+页宽movelength；
translatetranslate =翻译> 00：翻译；
translatetranslate =翻译<< maxwidth maxwidth：翻译；
}
}
执行滑动，使页面完全显示到屏幕上。
this.transform.call（视口，翻译）；
}
}绑定（此）、false）；
另外，你必须计算当前页面的页数，并设置当前页码。

xml代码将内容复制到剪贴板。
计算当前页面
pagenow = math.round（Math.abs（译）/纸宽）+ 1；
setTimeout（）{（）函数（
/ /设置数量，DOM需要在子线程中操作，否则会出现Caton
This.setPageNow（）；
}绑定（这个），100）；
其基本思想是。当然，在实际操作过程中还需要注意一些细节。这里就不详细，但可以体现在code.html5单页手势滑屏切换原理的一个小编辑为大家介绍这么多，希望对你有帮助！