www夜插内射视频网站,成人无码网www在线观看,777米奇色狠狠888俺也去乱

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

HTML5單頁面手勢滑屏切換如何實(shí)現(xiàn)

php中世界最好的語言

發(fā)布： 2018-01-12 09:56:37

原創(chuàng)

3594人瀏覽過

這次給大家?guī)韍tml5單頁面手勢滑屏切換如何實(shí)現(xiàn)，怎么實(shí)現(xiàn)html5單頁面手勢滑屏切換？html5單頁面手勢滑屏切換的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

H5單頁面手勢滑屏切換是采用HTML5 觸摸事件(Touch) 和 CSS3動畫(Transform,Transition)來實(shí)現(xiàn)的

1、實(shí)現(xiàn)原理

假設(shè)有5個(gè)頁面，每個(gè)頁面占屏幕100%寬，則創(chuàng)建一個(gè)DIV容器viewport，將其寬度(width) 設(shè)置為500%，然后將5個(gè)頁面裝入容器中，并讓這5個(gè)頁面平分整個(gè)容器，最后將容器的默認(rèn)位置設(shè)置為0,overflow設(shè)置為hidden,這樣屏幕就默認(rèn)顯示第一個(gè)頁面。

<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>

登錄后復(fù)制

CSS樣式：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

.viewport{
   width: 500%;
   height: 100%;
   display: -webkit-box;
   overflow: hidden;
   //pointer-events: none; //這句話會導(dǎo)致整個(gè)頁面上的點(diǎn)擊事件失效，如需綁定點(diǎn)擊事件，請注掉
   -webkit-transform: translate3d(0,0,0);
   backface-visibility: hidden;
   position: relative;
}

登錄后復(fù)制

注冊touchstart,touchmove和touchend事件，當(dāng)手指在屏幕上滑動時(shí),使用CSS3的transform來實(shí)時(shí)設(shè)置viewport的位置，比如要顯示第二個(gè)頁面，就設(shè)置viewport的transform:translate3d(100%,0,0) 即可，在這里我們使用translate3d來代替translateX，translate3d可以主動開啟手機(jī)GPU加速渲染，頁面滑動更流暢。

2、主要思路

從手指放在屏幕上、滑動操作、再到離開屏幕是一個(gè)完整的操作過程，對應(yīng)的操作會觸發(fā)如下事件：

手指放在屏幕上：ontouchstart

手指在屏幕上滑動：ontouchmove

手指離開屏幕：ontouchend

我們需要捕獲觸摸事件的這三個(gè)階段來完成頁面的滑動：

ontouchstart: 初始化變量, 記錄手指所在的位置,記錄當(dāng)前時(shí)間

/*手指放在屏幕上*/
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(); //記錄手指按下的開始時(shí)間
   isMove = false; //是否產(chǎn)生滑動
}.bind(this),false);

登錄后復(fù)制

? ?ontouchmove: 獲得當(dāng)前所在位置，計(jì)算手指在屏幕上的移動差量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方向，則認(rèn)為是左右滑動
   if (Math.abs(deltaX) > Math.abs(deltaY)){
       moveLength = deltaX;
       var translate = initialPos + deltaX; //當(dāng)前需要移動到的位置
       //如果translate>0 或 < maxWidth,則表示頁面超出邊界
       if (translate <=0 && translate >= maxWidth){
           //移動頁面
           this.transform.call(viewport,translate);
           isMove = true;
       }
       direction = deltaX>0?"right":"left"; //判斷手指滑動的方向
   }
}.bind(this),false);

登錄后復(fù)制

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

H5中視頻與音頻標(biāo)簽和進(jìn)度條如何使用

H5與C3的新交互特性有哪些

H5的塊級標(biāo)簽匯總

以上就是HTML5單頁面手勢滑屏切換如何實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！