主頁(yè) > 知識(shí)庫(kù) > HTML5單頁(yè)面手勢(shì)滑屏切換原理

HTML5單頁(yè)面手勢(shì)滑屏切換原理
熱門標(biāo)簽：貸款電銷人工和機(jī)器人哪個(gè)好 杭州營(yíng)銷電銷機(jī)器人供應(yīng)商 西寧智能外呼系統(tǒng)加盟 百應(yīng)電銷機(jī)器人產(chǎn)業(yè) 飛亞外呼系統(tǒng) 高德地圖標(biāo)注賓館位置 電視購(gòu)物電銷外呼系統(tǒng) 聯(lián)通400電話申請(qǐng) 電話機(jī)器人如何

H5單頁(yè)面手勢(shì)滑屏切換是采用HTML5 觸摸事件(Touch) 和 CSS3動(dòng)畫(huà)(Transform,Transition)來(lái)實(shí)現(xiàn)的，效果圖如下所示，本文簡(jiǎn)單說(shuō)一下其實(shí)現(xiàn)原理和主要思路。
1、實(shí)現(xiàn)原理
假設(shè)有5個(gè)頁(yè)面，每個(gè)頁(yè)面占屏幕100%寬，則創(chuàng)建一個(gè)DIV容器viewport，將其寬度(width) 設(shè)置為500%，然后將5個(gè)頁(yè)面裝入容器中，并讓這5個(gè)頁(yè)面平分整個(gè)容器，最后將容器的默認(rèn)位置設(shè)置為0,overflow設(shè)置為hidden,這樣屏幕就默認(rèn)顯示第一個(gè)頁(yè)面。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div id="viewport" class="viewport">    
  2. <div class="pageview" style="background: #3b76c0" >    
  3. <h3 >頁(yè)面-1</h3>    
  4. </div>    
  5. <div class="pageview" style="background: #58c03b;">    
  6. <h3>頁(yè)面-2</h3>    
  7. </div>    
  8. <div class="pageview" style="background: #c03b25;">    
  9. <h3>頁(yè)面-3</h3>    
  10. </div>    
  11. <div class="pageview" style="background: #e0a718;">    
  12. <h3>頁(yè)面-4</h3>    
  13. </div>    
  14. <div class="pageview" style="background: #c03eac;">    
  15. <h3>頁(yè)面-5</h3>    
  16. </div>    
  17. </div>   

CSS樣式：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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. }  

注冊(cè)touchstart,touchmove和touchend事件，當(dāng)手指在屏幕上滑動(dòng)時(shí),使用CSS3的transform來(lái)實(shí)時(shí)設(shè)置viewport的位置，比如要顯示第二個(gè)頁(yè)面，就設(shè)置viewport的transform:translate3d(100%,0,0) 即可， 在這里我們使用translate3d來(lái)代替translateX，translate3d可以主動(dòng)開(kāi)啟手機(jī)GPU加速渲染，頁(yè)面滑動(dòng)更流暢。
2、主要思路
從手指放在屏幕上、滑動(dòng)操作、再到離開(kāi)屏幕是一個(gè)完整的操作過(guò)程，對(duì)應(yīng)的操作會(huì)觸發(fā)如下事件：
手指放在屏幕上：ontouchstart
手指在屏幕上滑動(dòng)：ontouchmove
手指離開(kāi)屏幕：ontouchend
我們需要捕獲觸摸事件的這三個(gè)階段來(lái)完成頁(yè)面的滑動(dòng)：
ontouchstart: 初始化變量, 記錄手指所在的位置,記錄當(dāng)前時(shí)間

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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; //本次滑動(dòng)前的初始位置    
  8. viewport.style.webkitTransition = ""; //取消動(dòng)畫(huà)效果    
  9. startT = new Date().getTime(); //記錄手指按下的開(kāi)始時(shí)間    
  10. isMove = false; //是否產(chǎn)生滑動(dòng)    
  11. }.bind(this),false);   

ontouchmove: 獲得當(dāng)前所在位置，計(jì)算手指在屏幕上的移動(dòng)差量deltaX,然后使頁(yè)面跟隨移動(dòng)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. /*手指在屏幕上滑動(dòng)，頁(yè)面跟隨手指移動(dòng)*/    
  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方向，則認(rèn)為是左右滑動(dòng)    
  8. if (Math.abs(deltaX) > Math.abs(deltaY)){    
  9. moveLength = deltaX;    
  10. var translate = initialPos + deltaX; //當(dāng)前需要移動(dòng)到的位置    
  11. //如果translate>0 或 < maxWidth,則表示頁(yè)面超出邊界    
  12. if (translate <=0 && translate >= maxWidth){    
  13. //移動(dòng)頁(yè)面    
  14. this.transform.call(viewport,translate);    
  15. isMove = true;    
  16. }    
  17. direction = deltaX>0?"right":"left"; //判斷手指滑動(dòng)的方向    
  18. }    
  19. }.bind(this),false);   


ontouchend:手指離開(kāi)屏幕時(shí)，計(jì)算屏幕最終停留在哪一頁(yè)。首先計(jì)算手指在屏幕上的停留時(shí)間deltaT,如果deltaT<300ms，則認(rèn)為是快速滑動(dòng)，相反則是慢速滑動(dòng)，快速滑動(dòng)和慢速滑動(dòng)的處理是不同的：
(1)如果是快速滑動(dòng)，則讓當(dāng)前頁(yè)面完整的停留在屏幕中央(需要計(jì)算當(dāng)前頁(yè)面還有多少需要滑動(dòng))
(2)如果是慢速滑動(dòng)，還需要判斷手指在屏幕上滑動(dòng)的距離，如果滑動(dòng)的距離沒(méi)有超過(guò)屏幕寬度50%，則要回退到上一頁(yè)，相反則要停留在當(dāng)前頁(yè)面

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. /*手指離開(kāi)屏幕時(shí)，計(jì)算最終需要停留在哪一頁(yè)*/    
  2. document.addEventListener("touchend",function(e){    
  3. e.preventDefault();    
  4. var translate = 0;    
  5. //計(jì)算手指在屏幕上停留的時(shí)間    
  6. var deltaT = new Date().getTime() - startT;    
  7. if (isMove){ //發(fā)生了左右滑動(dòng)    
  8. //使用動(dòng)畫(huà)過(guò)渡讓頁(yè)面滑動(dòng)到最終的位置    
  9. viewport.style.webkitTransition = "0.3s ease -webkit-transform";    
  10. if(deltaT < 300){ //如果停留時(shí)間小于300ms,則認(rèn)為是快速滑動(dòng)，無(wú)論滑動(dòng)距離是多少，都停留到下一頁(yè)    
  11. translate = direction == 'left'?    
  12. currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;    
  13. //如果最終位置超過(guò)邊界位置，則停留在邊界位置    
  14. translatetranslate = translate > 0 ? 0 : translate; //左邊界    
  15. translatetranslate = translate < maxWidth ? maxWidth : translate; //右邊界    
  16. }else {    
  17. //如果滑動(dòng)距離小于屏幕的50%，則退回到上一頁(yè)    
  18. if (Math.abs(moveLength)/pageWidth < 0.5){    
  19. translate = currentPosition-moveLength;    
  20. }else{    
  21. //如果滑動(dòng)距離大于屏幕的50%，則滑動(dòng)到下一頁(yè)    
  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. //執(zhí)行滑動(dòng)，讓頁(yè)面完整的顯示到屏幕上    
  29. this.transform.call(viewport,translate);    
  30. }    
  31. }.bind(this),false);   

除此之外，還要計(jì)算當(dāng)前頁(yè)面是第幾頁(yè)，并設(shè)置當(dāng)前頁(yè)碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. //計(jì)算當(dāng)前的頁(yè)碼    
  2. pageNow = Math.round(Math.abs(translate) / pageWidth) + 1;    
  3. setTimeout(function(){    
  4. //設(shè)置頁(yè)碼，DOM操作需要放到子線程中，否則會(huì)出現(xiàn)卡頓    
  5. this.setPageNow();    
  6. }.bind(this),100);   

基本的思路就這些，當(dāng)然在實(shí)際操作過(guò)程中還有一些細(xì)節(jié)需要注意，這里就不詳細(xì)說(shuō)了，都在代碼里能體現(xiàn)出來(lái)。關(guān)于HTML5單頁(yè)面手勢(shì)滑屏切換原理 小編就給大家介紹這么多，希望對(duì)大家有所幫助！

標(biāo)簽：晉中 安慶 邯鄲 牡丹江 玉溪 撫州 煙臺(tái) 內(nèi)蒙古

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5單頁(yè)面手勢(shì)滑屏切換原理》，本文關(guān)鍵詞  HTML5,單頁(yè)面,單,頁(yè)面,手勢(shì),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5單頁(yè)面手勢(shì)滑屏切換原理》相關(guān)的同類信息！
  • 本頁(yè)收集關(guān)于HTML5單頁(yè)面手勢(shì)滑屏切換原理的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章