webapi_3 今天真真真全是大經典案例
這個項目一多起來了，還是分個序號比價好一點，你好我好大家好，然後關於這個標點符號的問題，我打字真的很不喜歡打標點符號，不是不好按，按個逗號其實也是順便的事情，可能就是養成習慣了，就喜歡按個空格來分開，也不曉得你們看有標點和沒得標點看起來有區別沒得，如果有區別的話我就慢慢養成習慣打上標點吧！！！歐爾整點感嘆號這些還是可以，我們今天書接上回由於是大項目所以用了另一種呈現的方法。
1.
我們後這個章節後面的內容的項目基本都要以一個自己編寫的緩衝動畫的函數為基礎，所以我先把這個函數貼上來
緩衝動畫函數終極版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { position: absolute; top: 50px; width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <div class="box"></div> <button>500</button> <button>800</button> <script> var box = document.querySelector('div') var btns = document.querySelectorAll('button') function animate(obj, target, callback) { clearInterval(obj.timer) obj.timer = setInterval(function() { if (obj.offsetLeft == target) { clearInterval(obj.timer) // callback必須寫到結束定時器這裡 if (callback) { callback() } } var step = (target - obj.offsetLeft) / 10 step = step < 0 ? Math.floor(step) : Math.ceil(step) obj.style.left = obj.offsetLeft + step + 'px' }, 15) } btns[0].onclick = function() { animate(box, 500) } btns[1].onclick = function() { animate(box, 800, function() { box.style.backgroundColor = 'red' }) } </script> </body> </html>
2.
來了 一個十分十分經典的案例，輪播圖，純手打還是要點邏輯的
我後面給她直接單領出來單獨放在了一個html裡面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ol, ul { list-style: none; } a { text-decoration: none; } .banner { position: relative; width: 721px; height: 455px; margin: 100px auto; overflow: hidden; } .banner >a { display: none; position: absolute; width: 40px; height: 40px; background-color: rgba(0, 25, 0, .5); font-size: 20px; color: white; text-align: center; line-height: 40px; z-index: 1; cursor: pointer; } .banner a:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); } .banner a:nth-child(1) { top: 50%; left: 0; transform: translateY(-50%); } .banner ol { position: absolute; bottom: 30px; left: 40px; color: white; } ol li { float: left; width: 8px; height: 8px; margin-left: 5px; border: 2px solid white; border-radius: 50%; cursor: pointer; } .current { background-color: #fff; } ul { position: absolute; left: 0; top: 0; width: 500%; } ul li { float: left; } </style> <script src="./js/animate.js"></script> <script src="./js/test.js"></script> </head> <body> <div class="banner"> <a href="javascript:;" class="arrow_r"><</a> <a href="javascript:;" class="arrow_l">></a> <ul> <li><a href="javascript:;"><img src="./upload/focus.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./upload/focus1.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./upload/focus2.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./upload/focus3.jpg" alt=""></a></li> </ul> <ol> </ol> </div> </body> </html>
然後最最重要的是他的js部分，非常值得回味，每一步我都寫出了我的想法以及邏輯
window.addEventListener('load', function() {
// 1.先完成移入輪播圖顯示隱藏點擊按鈕
var banner = document.querySelector('.banner');
var arrR = banner.querySelector('.arrow_l');
var arrL = banner.querySelector('.arrow_r');
banner.addEventListener('mouseenter', function() {
arrL.style.display = 'block';
arrR.style.display = 'block';
// 7.1滑鼠移入應該暫停輪播圖 即停止定時器
clearInterval(timer);
});
banner.addEventListener('mouseleave', function() {
arrL.style.display = 'none';
arrR.style.display = 'none';
// 7.2移出繼續計時器
timer = setInterval(function() {
arrR.click();
},2000)
});
// 2.動態生成小圓圈 利用ul裡面li的個數
var ul = banner.querySelector('ul');
var ol = banner.querySelector('ol');
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('data-index', i);
// 2.2小圓排他思想 點擊一個 其他為cuuret類 其他清空
// 2.3點擊小圓滾動圖片需要自定義data-index left值為date-index * width
li.addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('data-index');
// 5.一個bug 點擊右鍵或者點擊小圓後 再點擊小圓或者右鍵 會亂跳 是因為此時 num與circle沒有任何關聯 點擊一個後 再點擊另一個事件 就會按他的num或者circle走
// 此時需要將兩個值都給到index給她賦值 就會有關聯了
num = index;
circle = index;
animate(ul, -index * banner.offsetWidth);
})
ol.appendChild(li);
}
// 2.1創建好後給第一個小圓添加默認current類
ol.firstElementChild.className = 'current';
// 3.2因為我們直接動html程式碼 會導致小原點也增加一個 所以要在小圓點獲取ul li個數後面 動態克隆一個到ul最後面
ul.appendChild(ul.firstElementChild.cloneNode(true));
// 3.點擊右邊按鈕一次就滾動一次 開始點擊按鈕事件
// 首先要明確ul的移動距離等於 當前點擊的第幾次 * width
var num = 0;
var circle = 0;
// 8.點擊時還是有bug 點擊過快會切換的很快 通過節流閥來完成一個函數再來回調解決
var flag = true;
arrR.addEventListener('click', function() {
// 8.1如果flag為true才執行 一進去先給flag為false 如果沒完成這個函數永遠是flase 用戶點擊就沒的作用
if (flag) {
flag = false;
// 3.1當走到最後一張時當前 ul顯示幾個li就複製幾個li到最後面（html程式碼）然後判斷num是否等於4 如果是將num賦值為0 同時迅速將ul left為0
if (num == ul.children.length - 1) {
num = 0;
ul.style.left = 0;
};
// 點一次就要加一次
num++;
// 8.2通過回調函數 完成了這個切換才能為true
animate(ul, -num * banner.offsetWidth,function() {
flag = true;
});
// 4.點擊右側按鈕小圓跟著動 需要一個變數circle 點一次增加一次 獲取ol li 下標就為circle
circle++;
// 4.1判斷circle是否為最後一張 第四張 如果是就賦值為0、
if (circle == ol.children.length) {
circle = 0;
}
for (var i = 0; i < ol.children.length;i++) {
ol.children[i].className = '';
};
ol.children[circle].className = 'current';
}
});
// 6.左側按鈕點擊
arrL.addEventListener('click', function() {
if (flag) {
flag = false;
// 6.2此時應該判斷num是否為第一張也就是0 如果是num就為最後一張4 且left為4*width
if (num == 0) {
num = ul.children.length -1;
ul.style.left = num * banner.offsetWidth;
};
// 6.1先修改為--
num--;
animate(ul, -num * banner.offsetWidth, function() {
flag = true;
});
// 6.3circle也要為--
circle--;
// 6.4此時應該判斷circle是否小於0 如果是就重新賦值為3
if (circle < 0) {
circle = ol.children.length - 1;
}
for (var i = 0; i < ol.children.length;i++) {
ol.children[i].className = '';
};
ol.children[circle].className = 'current';
}
});
// 7.自動播放功能利用定時器 還有手動調用事件
var timer = setInterval(function() {
arrR.click();
},2000)
})
3.
趁熱打鐵，我們馬上再來一個移動端的輪播圖，跟pc端還是有點差距的，它是通過transform來實現的
html部分很簡單
<div class="focus"> <ul> <li><img src="upload/focus3.jpg" alt=""></li> <li><img src="upload/focus1.jpg" alt=""></li> <li><img src="upload/focus2.jpg" alt=""></li> <li><img src="upload/focus3.jpg" alt=""></li> <li><img src="upload/focus1.jpg" alt=""></li> </ul> <!-- 小圓點 --> <ol> <li class="current"></li> <li></li> <li></li> </ol> </div>
js部分邏輯性我覺得沒做熟練之前是比pc難的，做熟練過後其實還是可以的，三下五除二就搞完了
window.addEventListener('load', function() {
// 1.自動輪播功能
// 定義一個變數num 第一張為0 移動端的切換由translate實現
var focus = document.querySelector('.focus');
var ul = focus.querySelector('ul');
var num = 0;
var imgWidth = focus.offsetWidth;
var timer = setInterval(function() {
num++;
var translateX = -num * imgWidth;
ul.style.transition = 'transform .3s';
ul.style.transform = 'translateX('+translateX+'px)';
}, 2000)
// 2.無縫切換 移動端無縫切換 有一個新的事件 transitionend 通過這個事件判斷num 來做到無縫切換
ul.addEventListener('transitionend',function() {
if (num >= 3) {
num = 0;
var translateX = -num * imgWidth;
ul.style.transition = 'none';
ul.style.transform = 'translateX('+translateX+'px)';
// 5.2往右邊滑num--小於0了 要起到無縫切換效果還要在此進行一個判斷
} else if (num < 0 ) {
num = 2;
var translateX = -num * imgWidth;
ul.style.transition = 'none';
ul.style.transform = 'translateX('+translateX+'px)';
}
// 3.小圓點跟著圖走 用到新屬性 classlist 可以添加類名刪除類名
// 配合queryselector使用 可以快速把當前帶有該class名的去除
focus.lastElementChild.querySelector('.current').classList.remove('current');
focus.lastElementChild.children[num].classList.add('current');
});
// 4.手指拖動輪播圖 手指按下的時候獲得按下的坐標值 移動的時候不斷地用移動的坐標值減去按下的坐標值 盒子的位置 = 盒子的原始位置+移動的位置
var x = 0;
focus.addEventListener('touchstart', function(e) {
x = e.targetTouches[0].pageX;
clearInterval(timer);
});
var moveX = 0;
// 8.如果只是手指觸摸沒有移動 就不用進行touchend的判斷
var flag = false;
focus.addEventListener('touchmove', function(e) {
moveX = e.targetTouches[0].pageX - x;
var box = -num * imgWidth + moveX;
ul.style.transition = 'none';
ul.style.transform = 'translateX('+box+'px)';
flag = true;
// 7.清楚滑動的默認行為
e.preventDefault();
});
// 5.要完成圖片切換上下一張的效果 需要在事件手指離開螢幕中進行 判斷移動距離的絕對值是否大於五十 如果是 就說明是要進行切換 並在裡面再次判斷真正移動距離是否為正數
// 為正數就切換到上一張 為負數就切換到下一章
focus.addEventListener('touchend', function(e) {
if (flag) {
if (Math.abs(moveX) > 50) {
if (moveX > 0 ) {
num--;
} else {
num++;
}
}
var translateX = -num * imgWidth;
// 5.1注意此處的transition 必須要有效果 不然不進入transitionend進行判斷 導致沒有無縫切換效果以及小圓點跟著走的效果
ul.style.transition = 'transform .3s';
ul.style.transform = 'translateX('+translateX+'px)';
flag = false;
}
// 6.點擊過後繼續不再點擊繼續開啟定時器輪播 要先清空一下 使得只有一個定時器在運行
clearInterval(timer);
timer = setInterval(function() {
num++;
var translateX = -num * imgWidth;
ul.style.transition = 'transform .3s';
ul.style.transform = 'translateX('+translateX+'px)';
}, 2000);
});
})
4.
然後剩下的，就是一些插件使用了，這裡插件不做太詳細的說明因為明天開始進入jq的複習，有的是插件讓你用，然後還有一個本地存儲的案例雖然不難，但後面應用應該很廣泛，sessionStorage生命周期在瀏覽器關閉之前，只能在本頁面數據共享，localStorage生命周期永久存在，可多個頁面數據共享，這是一個記住用戶名的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 如果勾選記住用戶名， 下次用戶打開瀏覽器，就在文本框裡面自動顯示上次登錄的用戶名 --> <input type="text" name="" id=""> <input type="checkbox">記住用戶名 <script> var ipts = document.querySelectorAll('input') ipts[1].onclick = function() { if (this.checked) { localStorage.setItem('uname', ipts[0].value) } else { localStorage.removeItem('uname') } } if(localStorage.getItem('uname')) { ipts[0].value = localStorage.getItem('uname') ipts[1].checked = true } </script> </body> </html>
