web前端課程技術內容之如何做一個簡單的手機端頁面的翻頁
【如何做一個簡單的手機端頁面的翻頁】
第一步：建立移動端頁面內 HTML + CSS 【注】可用彈性佈局 但需要注意的是 外層盒子的定位
第二步： 思考問題 要實現怎樣的效果？
- 手指滑動時觸發事件【左右】兩個方向
2.點選footer部分的下標實現切換效果
3.點選footer部分的下標實現下標顏色變化
第三步；編寫JS程式碼
新增監聽事件
document.addEventListener('DOMContentLoaded',function(){
建立一個數組用於呼叫陣列屬性值 或者 方便【數值】的更改 【注】可以用陣列 /物件 但物件更方便我們的使用
var postion = {
startX:0,
startY:0,
endX:0,
endY:0,
baseMoveX: window.innerHeight / 3,
index:1
}
獲取頁面元素 比不可少的一個步驟
var tab2 = document.getElementsByClassName('tab2')[0];//獲取到ul 思路： 用ul定位來實現頁面的切換 （ul的寬度設定成 innerWind * 4）
var li2 = document.getElementsByClassName('li2');//索引值不確定 且不寫先
var tab3 = document.querySelector('#tab3');
var li3 = document.querySelectorAll('.li3');
li3[0].style.color = '#58bc58';//設定預設的第一個下標的顏色
//封裝一個函式用於清空下標 的顏色
function delite(){
for(var i = 0;i < li3.length; i++){
li3[i].style.color = '';
}
}
手指事件【注】 這裡的原理和拖拽一抹一樣 （手指按下和 手指移動是 時 必須給給記錄 游標位置）
手指移動到位置上時候觸發 記錄滑鼠移動座標
tab2.addEventListener('touchstart',function(e){
postion.startX = e.touches[0].clientX;
postion.startY = e.touches[0].clientY;
})
手指移動位置胡時候觸發 記錄滑鼠移動座標
tab2.addEventListener('touchmove',function(en){
postion.endX = en.touches[0].clientX;
postion.endY = en.touches[0].clientY;
move();//當手指滑動時觸發函式 改變ul的定位
})
手指移開的時候定位
tab2.addEventListener('touchend',function(vent){
move(true);//手指鬆開時呼叫呼叫函（函式用於判斷 ：滑動的距離是否超過絕對值 1.超過 (滑動到下一頁) 2.不超過 (位置定位在當前頁)）
})
function move(_end){
var x = postion.startX - postion.endX;
var y = postion.startY - postion.endY;
滑動效果
if(postion.index < li2.length){//第一種情況==========left [用if 判斷：索引值是 1-3的時候可以 向左滑動 改變 ul的定位 【注】因為超出會造成使用者滑動出現空白頁面 ]
if(x > 0){//計算公式： 起點位置 - 終點位置 = x; 如果 x > 0 說明滑動的方向是左邊
to left