2017-12-27 161 views
0

我正在構建一個包含完整頁面水平和垂直滾動的小站點。查看一個codepen demo here.演示中存在一個錯誤,'left'和'up'按鈕不能正常工作。 '右'和'下'按鈕工作正常。我只是一起扔給你看我在說什麼(原諒我的內聯樣式)。添加touchEvents進行導航

首先,我需要合併touchEvents以在移動設備上進行整頁滾動工作。如果用戶向左,向右,向下或向上滑動,頁面應該相應地移動。我仍然在學習JS的基礎知識,我不知道從哪開始。

其次,我對我是否在我的JS中使用最佳實踐有一些懷疑。首先,我重複了很多。另一方面,我敢肯定,我正在嘗試做的事情有一個更簡單的方法。如果你能看看我的代碼並給我一些建議,我會很感激。謝謝!

回答

1

您需要在CSS中修改這兩個:一是

#center.cslide-up { 
    top: 100vh; 
} 

#center.cslide-left { 
    left: 100vw; 
} 
  • 之一:當點擊向上按鈕,它會移動100vh下來從頂部位置。
  • 第二個:當點擊左鍵,它將移動100vw右側從左至右位置。

至於手機,我建議嘗試使用:

你可以通過烹飪一個函數來減少代碼行數,並像這樣調用它:(Make su重新聲明全局變量是Panel2)

btnL.addEventListener('click', function() { 
    swiper("left"); 
}); 
btnLBack.addEventListener('click', function() { 
    swiper("left"); 
}); 


function swiper(dir){ 
panelC.classList.toggle('cslide-'+dir); 
if(dir=="up") panel2=panelU; 
else if(dir=="right") panel2=panelR; 
else if(dir=="left") panel2=panelL; 
else if(dir=="down") panel2=panelD; 
panel2.classList.toggle('slide-'+dir); 
} 
  • 功能刷卡只有一個參數dir其確定它具有方向移動。您可以連接dircslide-以移動中心容器。並使用if/else條件來確定哪個面板移動並使用相同的想法。
  • 爲了讓它更簡單和有效一些,如果你沒有使用任何其他的按鈕或面板的事件監聽器,並且唯一的目的是切換類,你可以直接使用內聯onClick="swiper('direction');"屬性面板和按鈕僅在需要時才觸發它,而不是在腳本中定義事件偵聽器。

var panel2; 
 
var panelC = document.getElementById('center'); 
 
var panelU = document.getElementById('up'); 
 
var panelR = document.getElementById('right'); 
 
var panelD = document.getElementById('down'); 
 
var panelL = document.getElementById('left'); 
 
var btnU = document.getElementById('btn-up'); 
 
var btnR = document.getElementById('btn-right'); 
 
var btnD = document.getElementById('btn-down'); 
 
var btnL = document.getElementById('btn-left'); 
 
var btnUBack = document.getElementById('btn-up-back'); 
 
var btnRBack = document.getElementById('btn-right-back'); 
 
var btnDBack = document.getElementById('btn-down-back'); 
 
var btnLBack = document.getElementById('btn-left-back'); 
 

 
btnU.addEventListener('click', function() { 
 
    swiper("up"); 
 
}); 
 
btnUBack.addEventListener('click', function() { 
 
    swiper("up"); 
 
}); 
 

 
btnR.addEventListener('click', function() { 
 
    swiper("right"); 
 
}); 
 
btnRBack.addEventListener('click', function() { 
 
swiper("right"); 
 
}); 
 

 
btnD.addEventListener('click', function() { 
 
    swiper("down"); 
 
}); 
 
btnDBack.addEventListener('click', function() { 
 
    swiper("down"); 
 
}); 
 

 
btnL.addEventListener('click', function() { 
 
    swiper("left"); 
 
}); 
 
btnLBack.addEventListener('click', function() { 
 
    swiper("left"); 
 
}); 
 

 

 
function swiper(dir){ 
 
panelC.classList.toggle('cslide-'+dir); 
 
if(dir=="up") panel2=panelU; 
 
else if(dir=="right") panel2=panelR; 
 
else if(dir=="left") panel2=panelL; 
 
else if(dir=="down") panel2=panelD; 
 
panel2.classList.toggle('slide-'+dir); 
 
}
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    transition: 1.5s ease; 
 
    -webkit-transition: 1.5s ease; 
 
    overflow: hidden; 
 
    background: white; 
 
} 
 

 
.panel { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: block; 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
} 
 

 
.btn { 
 
    position: absolute; 
 
    padding: 16px; 
 
    cursor: pointer; 
 
} 
 

 
#center { 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
} 
 

 
#center.cslide-up { 
 
    top: 100vh; 
 
} 
 

 
#center.cslide-left { 
 
    left: 100vw; 
 
} 
 

 
#center.cslide-right { 
 
    left: -100vw; 
 
} 
 

 
#center.cslide-down { 
 
    top: -100vh; 
 
} 
 

 

 

 
#up { 
 
    top: -100vh; 
 
} 
 

 
#up.slide-up { 
 
    top: 0; 
 
} 
 

 
#right { 
 
    right: -100vw; 
 
} 
 

 
#right.slide-right { 
 
    right: 0; 
 
} 
 

 
#down { 
 
    bottom: -100vh; 
 
} 
 

 
#down.slide-down { 
 
    bottom: 0; 
 
} 
 

 
#left { 
 
    left: -100vw 
 
} 
 

 
#left.slide-left { 
 
    left: 0; 
 
}
<div class="panel" id="center"> 
 
    <div class="btn" id="btn-up" style="text-align: center; width: 100%;"> 
 
    up 
 
    </div> 
 
    <div class="btn" id="btn-right" style="right: 0; top: 50%;"> 
 
    right 
 
    </div> 
 
    <div class="btn" id="btn-down" style="text-align: center; bottom: 0; width: 100%;"> 
 
    down 
 
    </div> 
 
    <div class="btn" id="btn-left" style="top: 50%;"> 
 
    left 
 
    </div> 
 
</div> 
 

 
<div class="panel" id="up"> 
 
    <div class="btn" id="btn-up-back" style="bottom: 0; width: 100%; text-align: center;"> 
 
    back 
 
    </div> 
 
</div> 
 

 
<div class="panel" id="right"> 
 
    <div class="btn" id="btn-right-back" style="left: 0; top: 50%;"> 
 
    back 
 
    </div> 
 
</div> 
 

 
<div class="panel" id="down"> 
 
    <div class="btn" id="btn-down-back" style="top: 0; width: 100%; text-align: center;"> 
 
    back 
 
    </div> 
 
</div> 
 

 
<div class="panel" id="left"> 
 
    <div class="btn" id="btn-left-back" style="right: 0; top: 50%;"> 
 
    back 
 
    </div> 
 
</div>

+0

我其實不能使用jQuery或庫項目。你對vanilla javascript資源有什麼建議嗎? – loudenw

+1

@loudenw更新了鏈接,第一個不使用Jquery,但它是一個JavaScript庫,它非常輕便,您可以查看它。另一個是發佈在應該工作的舊帖子上的解決方案。希望能幫助到你 :) – 2017-12-28 08:52:29