HTML5单网页页面手式滑屏切换基本原理

日期:2021-01-19 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

H5单网页页面手式滑屏切换是选用HTML5 触碰恶性事件(Touch) 和 CSS3动漫(Transform,Transition)来完成的,实际效果图以下所示,本文简易说1下实际上现基本原理和关键思路。
1、完成基本原理
假定有5个网页页面,每一个网页页面占显示屏100%宽,则建立1个DIV器皿viewport,将其宽度(width) 设定为500%,随后将5个网页页面装入器皿中,并让这5个网页页面均分全部器皿,最终将器皿的默认设置部位设定为0,overflow设定为hidden,这样显示屏就默认设置显示信息第1个网页页面。

XML/HTML Code拷贝內容到剪贴板
  1. <div id="viewport" class="viewport">    
  2. <div class="pageview" style="background: #3b76c0" >    
  3. <h3 >网页页面⑴</h3>    
  4. </div>    
  5. <div class="pageview" style="background: #58c03b;">    
  6. <h3>网页页面⑵</h3>    
  7. </div>    
  8. <div class="pageview" style="background: #c03b25;">    
  9. <h3>网页页面⑶</h3>    
  10. </div>    
  11. <div class="pageview" style="background: #e0a718;">    
  12. <h3>网页页面⑷</h3>    
  13. </div>    
  14. <div class="pageview" style="background: #c03eac;">    
  15. <h3>网页页面⑸</h3>    
  16. </div>    
  17. </div>   

CSS款式:

XML/HTML Code拷贝內容到剪贴板
  1. .viewport{    
  2. width: 500%;    
  3. height: 100%;    
  4. display: -webkit-box;    
  5. overflow: hidden;    
  6. pointer-events: none;    
  7. -webkit-transform: translate3d(0,0,0);    
  8. backface-visibility: hidden;    
  9. position: relative;    
  10. }  

申请注册touchstart,touchmove和touchend恶性事件,当手指在显示屏上拖动时,应用CSS3的transform来即时设定viewport的部位,例如要显示信息第2个网页页面,就设定viewport的transform:translate3d(100%,0,0) 便可, 在这里大家应用translate3d来替代translateX,translate3d能够积极打开手机上GPU加快3D渲染,网页页面拖动更顺畅。
2、关键思路
从手指放在显示屏上、拖动实际操作、再到离去显示屏是1个详细的实际操作全过程,对应的实际操作会开启以下恶性事件:
手指放在显示屏上:ontouchstart
手指在显示屏上拖动:ontouchmove
手指离去显示屏:ontouchend
大家必须捕捉触碰恶性事件的这3个环节来进行网页页面的拖动:
ontouchstart: 原始化自变量, 纪录手指所属的部位,纪录当今時间

XML/HTML Code拷贝內容到剪贴板
  1. /*手指放在显示屏上*/    
  2. document.addEventListener("touchstart",function(e){    
  3. e.preventDefault();    
  4. var touch = e.touches[0];    
  5. startX = touch.pageX;    
  6. startY = touch.pageY;    
  7. initialPos = currentPosition; //本次拖动前的原始部位    
  8. viewport.style.webkitTransition = ""; //撤销动漫实际效果    
  9. startT = new Date().getTime(); //纪录手指按下的刚开始時间    
  10. isMove = false; //是不是造成拖动    
  11. }.bind(this),false);   

ontouchmove: 得到当今所属部位,测算手指在显示屏上的挪动差量deltaX,随后使网页页面追随挪动

XML/HTML Code拷贝內容到剪贴板
  1. /*手指在显示屏上拖动,网页页面追随手指挪动*/    
  2. document.addEventListener("touchmove",function(e){    
  3. e.preventDefault();    
  4. var touch = e.touches[0];    
  5. var deltaX = touch.pageX - startX;    
  6. var deltaY = touch.pageY - startY;    
  7. //假如X方位上的位移超过Y方位,则觉得是上下拖动    
  8. if (Math.abs(deltaX) > Math.abs(deltaY)){    
  9. moveLength = deltaX;    
  10. var translate = initialPos + deltaX; //当今必须挪动到的部位    
  11. //假如translate>0 或 < maxWidth,则表明网页页面超过界限    
  12. if (translate <=0 && translate >= maxWidth){    
  13. //挪动网页页面    
  14. this.transform.call(viewport,translate);    
  15. isMove = true;    
  16. }    
  17. direction = deltaX>0?"right":"left"; //分辨手指拖动的方位    
  18. }    
  19. }.bind(this),false);   


ontouchend:手指离去显示屏时,测算显示屏最后滞留在哪儿1页。最先测算手指在显示屏上的滞留時间deltaT,假如deltaT<300ms,则觉得是迅速拖动,相反则是慢速拖动,迅速拖动和慢速拖动的解决是不一样的:
(1)假如是迅速拖动,则让当今网页页面详细的滞留在显示屏中间(必须测算当今网页页面也有是多少必须拖动)
(2)假如是慢速拖动,还必须分辨手指在显示屏上拖动的间距,假如拖动的间距沒有超出显示屏宽度50%,则要返回到上1页,相反则要滞留在当今网页页面

XML/HTML Code拷贝內容到剪贴板
  1. /*手指离去显示屏时,测算最后必须滞留在哪儿1页*/    
  2. document.addEventListener("touchend",function(e){    
  3. e.preventDefault();    
  4. var translate = 0;    
  5. //测算手指在显示屏上滞留的時间    
  6. var deltaT = new Date().getTime() - startT;    
  7. if (isMove){ //产生了上下拖动    
  8. //应用动漫过渡让网页页面拖动到最后的部位    
  9. viewport.style.webkitTransition = "0.3s ease -webkit-transform";    
  10. if(deltaT < 300){ //假如滞留時间小于300ms,则觉得是迅速拖动,不管拖动间距是是多少,都滞留到下1页    
  11. translate = direction == 'left'?    
  12. currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;    
  13. //假如最后部位超出界限部位,则滞留在界限部位    
  14. translatetranslate = translate > 0 ? 0 : translate; //左侧界    
  15. translatetranslate = translate < maxWidth ? maxWidth : translate; //右侧界    
  16. }else {    
  17. //假如拖动间距小于显示屏的50%,则退返回上1页    
  18. if (Math.abs(moveLength)/pageWidth < 0.5){    
  19. translate = currentPosition-moveLength;    
  20. }else{    
  21. //假如拖动间距超过显示屏的50%,则拖动到下1页    
  22. translate = direction == 'left'?    
  23. currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;    
  24. translatetranslate = translate > 0 ? 0 : translate;    
  25. translatetranslate = translate < maxWidth ? maxWidth : translate;    
  26. }    
  27. }    
  28. //实行拖动,让网页页面详细的显示信息到显示屏上    
  29. this.transform.call(viewport,translate);    
  30. }    
  31. }.bind(this),false);   

除此以外,还要测算当今网页页面是第几页,并设定当今页码

XML/HTML Code拷贝內容到剪贴板
  1. //测算当今的页码    
  2. pageNow = Math.round(Math.abs(translate) / pageWidth) + 1;    
  3. setTimeout(function(){    
  4. //设定页码,DOM实际操作必须放到子进程中,不然会出現卡顿    
  5. this.setPageNow();    
  6. }.bind(this),100);   

基础的思路就这些,自然在具体实际操作全过程中也有1些细节必须留意,这里就不详尽说了,都在编码里能反映出来。有关HTML5单网页页面手式滑屏切换基本原理 网编就给大伙儿详细介绍这么多,期待对大伙儿有一定的协助!

上一篇:HTML5的新特点(1) 返回下一篇:没有了