介绍 & lt; DIV id=皏iewport"类=皏iewport"比;
& lt; div类=皃ageview"风格=氨尘?# 3 b76c0"比;
& lt; h4祝辞页面1 & lt;/h4>
& lt;/div>
& lt; div类=皃ageview"风格=氨尘?# 58 c03b;“比;
& lt; h4>页面2 & lt;/h4>
& lt;/div>
& lt; div类=皃ageview"风格=氨尘?# c03b25;“比;
& lt; h4>页面3 & lt;/h4>
& lt;/div>
& lt; div类=皃ageview"风格=氨尘?# e0a718;“比;
& lt; h4>页面4 & lt;/h4>
& lt;/div>
& lt; div类=皃ageview"风格=氨尘?# c03eac;“比;
& lt; h4>页面5 & lt;/h4>
& lt;/div>
& lt;/div> .viewport {
宽度:500%;
高度:100%;
显示:-webkit-box;
溢出:隐藏;//pointer-events:没有;//这句话会导致整个页面上的点击事件失效,如需绑定点击事件,请注掉
-webkit-transform: translate3d (0, 0, 0);
backface-visibility:隐藏;
位置:相对;
} /*手指放在屏幕上*/document.addEventListener (“touchstart",函数(e) {
e.preventDefault ();
var=联系e.touches [0];
startX=touch.pageX;
startY=touch.pageY;
initialPos=currentPosition;//本次滑动前的初始位置
viewport.style。webkitTransition=?“;//取消动画效果
.getTime startT=new日期()();//记录手指按下的开始时间
isMove=false;//是否产生滑动
}.bind(这),假); /*手指在屏幕上滑动,页面跟随手指移动*/document.addEventListener (“touchmove",函数(e) {
e.preventDefault ();
var=联系e.touches [0];
var△=联系。pageX - startX;
varδy=联系。pageY - startY;//如果X方向上的位移大于Y方向,则认为是左右滑动
如果(Math.abs(△)比;Math.abs(δy)) {
moveLength=?
var=initialPos +△翻译;//当前需要移动到的位置//如果translate> 0或& lt;maxWidth,则表示页面超出边界
如果(翻译& lt;=0,,翻译在=maxWidth) {//移动页面
this.transform.call(视窗,翻译);
isMove=true;
}
方向=deltaX> 0 ?“right":“left";//判断手指滑动的方向
}
}.bind(这个),假);
这篇文章主要介绍HTML5怎么实现单页面手势滑屏切换,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
H5单页面手势滑屏切换是采用HTML5触摸事件(触摸)和CSS3动画(变换,产品化)来实现的
1,实现原理
假设有5个页面,每个页面占屏幕100%的宽,则创建一个DIV容器窗口,将其宽度(宽度)设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,溢出设置为隐藏,这样屏幕就默认显示第一个页面。
CSS样式:
注册touchstart, touchmove和touchend事件,当手指在屏幕上滑动时,使用CSS3的变换来实时设置视窗的位置,比如要显示第二个页面,就设置视窗的变换:translate3d(100%, 0, 0)即可,在这里我们使用translate3d来代替translateX, translate3d可以主动开启手机GPU加速渲染,页面滑动更流畅。
2,主要思路
从手指放在屏幕上,滑动操作,再到离开屏幕是一个完整的操作过程,对应的操作会触发如下事件:
手指放在屏幕上:ontouchstart
手指在屏幕上滑动:ontouchmove
手指离开屏幕:ontouchend
我们需要捕获触摸事件的这三个阶段来完成页面的滑动:
ontouchstart:初始化变量,记录手指所在的位置,记录当前时间
ontouchmove:获得当前所在位置,计算手指在屏幕上的移动差量△,然后使页面跟随移动
以上是HTML5怎么实现单页面手势滑屏切换的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
