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 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
三峡导游词
2015/01/31 职场文书
单位推荐信范文
2015/03/27 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
自信主题班会
2015/08/14 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python