本文摘自PHP中文网,作者小云云,侵删。
H5现在可谓也是编程世界的主流,H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,下面通过本文简单说一下其实现原理和主要思路,希望对大家有帮助。1、实现原理
假设有5个页面,每个页面占屏幕100%宽,则创建一个p容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <p id= "viewport" class = "viewport" >
<p class = "pageview" style= "background: #3b76c0" >
<h3 >页面-1</h3>
</p>
<p class = "pageview" style= "background: #58c03b;" >
<h3>页面-2</h3>
</p>
<p class = "pageview" style= "background: #c03b25;" >
<h3>页面-3</h3>
</p>
<p class = "pageview" style= "background: #e0a718;" >
<h3>页面-4</h3>
</p>
<p class = "pageview" style= "background: #c03eac;" >
<h3>页面-5</h3>
</p>
</p>
|
CSS样式:
1 2 3 4 5 6 7 8 9 10 | .viewport{
width: 500%;
height: 100%;
display: -webkit-box;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
backface-visibility: hidden;
position: relative;
}
|
注册touchstart,touchmove和touchend事件,当手指在屏幕上滑动时,使用CSS3的transform来实时设置viewport的位置,比如要显示第二个页面,就设置viewport的transform:translate3d(100%,0,0) 即可, 在这里我们使用translate3d来代替translateX,translate3d可以主动开启手机GPU加速渲染,页面滑动更流畅。
2、主要思路
从手指放在屏幕上、滑动操作、再到离开屏幕是一个完整的操作过程,对应的操作会触发如下事件:
手指放在屏幕上:ontouchstart
手指在屏幕上滑动:ontouchmove
手指离开屏幕:ontouchend
我们需要捕获触摸事件的这三个阶段来完成页面的滑动:
ontouchstart: 初始化变量, 记录手指所在的位置,记录当前时间
1 2 3 4 5 6 7 8 9 10 11 | document.addEventListener( "touchstart" , function (e){
e.preventDefault();
var touch = e.touches[0];
startX = touch.pageX;
startY = touch.pageY;
initialPos = currentPosition;
viewport.style.webkitTransition = "" ;
startT = new Date ().getTime();
isMove = false;
}.bind(this),false);
|
ontouchmove: 获得当前所在位置,计算手指在屏幕上的移动差量deltaX,然后使页面跟随移动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | document.addEventListener( "touchmove" , function (e){
e.preventDefault();
var touch = e.touches[0];
var deltaX = touch.pageX - startX;
var deltaY = touch.pageY - startY;
if (Math. abs (deltaX) > Math. abs (deltaY)){
moveLength = deltaX;
var translate = initialPos + deltaX;
if (translate <=0 && translate >= maxWidth){
this.transform.call(viewport,translate);
isMove = true;
}
direction = deltaX>0? "right" : "left" ;
}
}.bind(this),false);
|
ontouchend:手指离开屏幕时,计算屏幕最终停留在哪一页。首先计算手指在屏幕上的停留时间deltaT,如果deltaT<300ms,则认为是快速滑动,相反则是慢速滑动,快速滑动和慢速滑动的处理是不同的:
如果是快速滑动,则让当前页面完整的停留在屏幕中央(需要计算当前页面还有多少需要滑动)
如果是慢速滑动,还需要判断手指在屏幕上滑动的距离,如果滑动的距离没有超过屏幕宽度50%,则要回退到上一页,相反则要停留在当前页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | document.addEventListener( "touchend" , function (e){
e.preventDefault();
var translate = 0;
var deltaT = new Date ().getTime() - startT;
if (isMove){
viewport.style.webkitTransition = "0.3s ease -webkit-transform" ;
if (deltaT < 300){
translate = direction == 'left' ?
currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;
translate = translate > 0 ? 0 : translate;
translate = translate < maxWidth ? maxWidth : translate;
} else {
if (Math. abs (moveLength)/pageWidth < 0.5){
translate = currentPosition-moveLength;
} else {
translate = direction == 'left' ?
currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;
translate = translate > 0 ? 0 : translate;
translate = translate < maxWidth ? maxWidth : translate;
}
}
this.transform.call(viewport,translate);
}
}.bind(this),false);
|
除此之外,还要计算当前页面是第几页,并设置当前页码
1 2 3 4 5 6 7 | pageNow = Math. round (Math. abs (translate) / pageWidth) + 1;
setTimeout( function (){
this.setPageNow();
}.bind(this),100);
|
基本的思路就这些,当然在实际操作过程中还有一些细节需要注意,这里就不详细说了,都在代码里能体现出来,大家赶紧动手操作一下吧。
相关推荐:
javascript - 我的订单页面加载速度慢
php简单页面缓存的实现代码
python爬虫beta版之抓取知乎单页面
以上就是HTML5单页面手势滑屏切换原理分析的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
详解h5和html4的区别
HTML5标准学习-简介介绍
HTML5 canvas学习的实例介绍
如何使用css更改占位符颜色?(代码示例)
如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)
有关HTML5页面在iphonex适配问题
具体解析HTML5文件读取filereader及文件读取模块的封装
HTML5 canvas画布详解(二)
浏览器兼容HTML5和css3的问题
HTML5加载时的等待动画效果制作
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5单页面手势滑屏切换原理分析