實現手機滑動翻頁效果

var nStartX,nEndX,nDetalX;
 
       function touchToNextPage(){
 
           document.addEventListener('touchstart', function (e) {
            //獲得手指開始碰觸屏幕時的x座標
           nStartX = e.touches[0].pageX;
 
           },false);
 
           document.addEventListener('touchmove', function (e) {
                    //獲得手指滑動過程中的x座標
                    nEndX =Number(e.touches[0].pageX);
                    if(nStartX -  nEndX > 10){
                     //翻頁
                     window.location.href ="article-1-2.html";
                     }else if(nStartX - nEndX< -10){
                         //返回上一頁
                         history.go(-1);
                    }
           },false);
 
           
       }
       touchToNextPage();

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章