javascript单页面手势滑屏切换原理详解


Posted in Javascript onMarch 21, 2016

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

javascript单页面手势滑屏切换原理详解

1、实现原理

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

<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;">
  <h3>页面-3</h3>
 </div>
 <div class="pageview" style="background: #e0a718;">
  <h3>页面-4</h3>
 </div>
 <div class="pageview" style="background: #c03eac;">
  <h3>页面-5</h3>
 </div>
</div>

CSS样式:

.viewport{
 width: 500%;
 height: 100%;
 display: -webkit-box;
 overflow: hidden;
 pointer-events: none;
 -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: 初始化变量, 记录手指所在的位置,记录当前时间

/*手指放在屏幕上*/
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,然后使页面跟随移动

/*手指在屏幕上滑动,页面跟随手指移动*/
document.addEventListener("touchmove",function(e){
 e.preventDefault();
 var touch = e.touches[0];
 var deltaX = touch.pageX - startX;
 var deltaY = touch.pageY - startY;
 //如果X方向上的位移大于Y方向,则认为是左右滑动
 if (Math.abs(deltaX) > Math.abs(deltaY)){
  moveLength = deltaX;
  var translate = initialPos + deltaX; //当前需要移动到的位置
  //如果translate>0 或 < maxWidth,则表示页面超出边界
  if (translate <=0 && translate >= maxWidth){
   //移动页面
   this.transform.call(viewport,translate);
   isMove = true;
  }
  direction = deltaX>0?"right":"left"; //判断手指滑动的方向
 }
}.bind(this),false);

ontouchend:手指离开屏幕时,计算屏幕最终停留在哪一页。首先计算手指在屏幕上的停留时间deltaT,如果deltaT<300ms,则认为是快速滑动,相反则是慢速滑动,快速滑动和慢速滑动的处理是不同的:

(1)如果是快速滑动,则让当前页面完整的停留在屏幕中央(需要计算当前页面还有多少需要滑动)

(2)如果是慢速滑动,还需要判断手指在屏幕上滑动的距离,如果滑动的距离没有超过屏幕宽度50%,则要回退到上一页,相反则要停留在当前页面

/*手指离开屏幕时,计算最终需要停留在哪一页*/
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){ //如果停留时间小于300ms,则认为是快速滑动,无论滑动距离是多少,都停留到下一页
   translate = direction == 'left'?
   currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;
   //如果最终位置超过边界位置,则停留在边界位置
   translate = translate > 0 ? 0 : translate; //左边界
   translate = translate < maxWidth ? maxWidth : translate; //右边界
  }else {
   //如果滑动距离小于屏幕的50%,则退回到上一页
   if (Math.abs(moveLength)/pageWidth < 0.5){
    translate = currentPosition-moveLength;
   }else{
    //如果滑动距离大于屏幕的50%,则滑动到下一页
    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);

除此之外,还要计算当前页面是第几页,并设置当前页码

//计算当前的页码
pageNow = Math.round(Math.abs(translate) / pageWidth) + 1;

setTimeout(function(){
 //设置页码,DOM操作需要放到子线程中,否则会出现卡顿
 this.setPageNow();
}.bind(this),100);

基本的思路就这些,当然在实际操作过程中还有一些细节需要注意,这里就不详细说了,都在代码里能体现出来,源代码已传至Git:https://github.com/git-onepixel/guesture, 有兴趣的同学欢迎一起讨论。

Javascript 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
详解JSON.stringify()的5个秘密特性
May 26 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
javascript实现dom元素可拖动
Mar 21 #Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 #Javascript
浅析AngularJS中的指令
Mar 20 #Javascript
简述Matlab中size()函数的用法
Mar 20 #Javascript
详解Matlab中 sort 函数用法
Mar 20 #Javascript
Sort()函数的多种用法
Mar 20 #Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 #Javascript
You might like
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
JS上传前预览图片实例
2013/03/25 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
python和bash统计CPU利用率的方法
2015/07/10 Python
python 切换root 执行命令的方法
2019/01/19 Python
Django Rest framework频率原理与限制
2019/07/26 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
班主任工作年限证明
2014/01/12 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
珠宝店促销方案
2014/03/21 职场文书
实习单位评语
2014/04/26 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Tomcat用户管理的优化配置详解
2022/03/31 Servers