15.1 移動端常見特效
15.1.1 案例講解-攜程移動端輪播圖
1.引入相關js 文件
2.複製HTML 結構
3.修改對應樣式
4.修改相應JS 參數
15.2 classList屬性
15.2.1 概述
classList屬性是HTML5新增的一個屬性,返回元素的類名。但是ie10以上版本支持。
該屬性用於在元素中添加,移除及切換 CSS 類。有以下方法
添加類:
element.classList.add(’類名’);
focus.classList.add('current');
移除類:
element.classList.remove(’類名’);
focus.classList.remove('current');
切換類:
element.classList.toggle(’類名’);
focus.classList.toggle('current');
注意:以上方法裏面,所有類名都不帶點
15.2.2 案例講解-攜程移動端輪播圖改進
- 手指滑動輪播圖
- 本質就是ul跟隨手指移動,簡單說就是移動端拖動元素
- 觸摸元素touchstart: 獲取手指初始座標
- 移動手指touchmove: 計算手指的滑動距離,並且移動盒子
- 離開手指touchend: 根據滑動的距離分不同的情況
- 如果移動距離小於某個像素 就回彈原來位置
- 如果移動距離大於某個像素就上一張下一張滑動。
- 滑動也分爲左滑動和右滑動判斷的標準是 移動距離正負 如果是負值就是左滑 反之右滑
- 如果是左滑就播放下一張 (index++)
- 如果是右滑就播放上一張 (index--)
15.2.3 案例講解-返回頂部
當頁面滾動某個地方,就顯示,否則隱藏
點擊可以返回頂部
15.3 click延遲解決方案
15.3.1 產生原因
移動端 click 事件會有 300ms 的延時,原因是移動端屏幕雙擊會縮放(double tap to zoom) 頁面。
解決方案:
- 禁用縮放。 瀏覽器禁用默認的雙擊縮放行爲並且去掉300ms 的點擊延遲。
<meta name="viewport" content="user-scalable=no">
2.利用touch事件自己封裝這個事件解決300ms 延遲。
原理就是:
- 當我們手指觸摸屏幕,記錄當前觸摸時間
- 當我們手指離開屏幕, 用離開的時間減去觸摸的時間
- 如果時間小於150ms,並且沒有滑動過屏幕, 那麼我們就定義爲點擊
代碼如下:
//封裝tap,解決click 300ms 延時
function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 記錄觸摸時候的時間變量
obj.addEventListener('touchstart', function (e) {
startTime = Date.now(); // 記錄觸摸時間
});
obj.addEventListener('touchmove', function (e) {
isMove = true; // 看看是否有滑動,有滑動算拖拽,不算點擊
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Date.now() - startTime) < 150) { // 如果手指觸摸和離開時間小於150ms 算點擊
callback && callback(); // 執行回調函數
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//調用
tap(div, function(){ // 執行代碼 });
- 使用插件。fastclick 插件解決300ms 延遲。
15.3.2 禁用縮放
禁用縮放。 瀏覽器禁用默認的雙擊縮放行爲並且去掉300ms 的點擊延遲。
<meta name="viewport" content="user-scalable=no">
15.3.3 利用touch事件自己封裝
- 當我們手指觸摸屏幕,記錄當前觸摸時間
- 當我們手指離開屏幕, 用離開的時間減去觸摸的時間
- 如果時間小於150ms,並且沒有滑動過屏幕, 那麼我們就定義爲點擊
代碼如下:
//封裝tap,解決click 300ms 延時
function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 記錄觸摸時候的時間變量
obj.addEventListener('touchstart', function (e) {
startTime = Date.now(); // 記錄觸摸時間
});
obj.addEventListener('touchmove', function (e) {
isMove = true; // 看看是否有滑動,有滑動算拖拽,不算點擊
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Date.now() - startTime) < 150) { // 如果手指觸摸和離開時間小於150ms 算點擊
callback && callback(); // 執行回調函數
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//調用
tap(div, function(){ // 執行代碼 });
15.3.4 fastclick 插件
使用插件fastclick 插件解決300ms 延遲。
<script type='application/javascript' src='/path/to/fastclick.js'></script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>
15.4 移動端常用開發插件
15.4.1 什麼是插件
移動端要求的是快速開發,所以我們經常會藉助於一些插件來幫我完成操作,那麼什麼是插件呢?
JS 插件是 js 文件,它遵循一定規範編寫,方便程序展示效果,擁有特定功能且方便調用。如輪播圖和瀑布流插件。
特點:它一般是爲了解決某個問題而專門存在,其功能單一,並且比較小。
我們以前寫的animate.js 也算一個最簡單的插件
fastclick 插件解決 300ms 延遲。 使用延時
GitHub官網地址: https://github.com/ftlabs/fastclick
15.4.2 Swiper 插件的使用
中文官網地址: https://www.swiper.com.cn/
- 引入插件相關文件。
- 按照規定語法使用
15.4.3 視頻插件zy.media.js
框架,顧名思義就是一套架構,它會基於自身的特點向用戶提供一套較爲完整的解決方案。框架的控制權在框架本身,使用者要按照框架所規定的某種規範進行開發。
插件一般是爲了解決某個問題而專門存在,其功能單一,並且比較小。
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能開發PC端,也能開發移動端
前端常用的移動端插件有 swiper、superslide、iscroll等。
框架: 大而全,一整套解決方案
插件: 小而專一,某個功能的解決方案
15.4.4 其他移動端常見插件
lsuperslide: http://www.superslide2.com/
l iscroll: https://github.com/cubiq/iscroll
15.5 移動端常用開發框架
15.5.1 BootStrap
Bootstrap 是一個簡潔、直觀、強悍的前端開發框架,它讓 web 開發更迅速、簡單。
它能開發PC端,也能開發移動端
Bootstrap JS插件使用步驟:
1.引入相關js 文件
2.複製HTML 結構
3.修改對應樣式
4.修改相應JS 參數
15.5.2案例講解-阿里百秀輪播圖
1.引入相關js 文件
2.複製HTML 結構
3.修改對應樣式
4.修改相應JS 參數
15.6本地存儲
15.6.1本地存儲特性
隨着互聯網的快速發展,基於網頁的應用越來越普遍,同時也變的越來越複雜,爲了滿足各種各樣的需求,會經常性在本地存儲大量的數據,HTML5規範提出了相關解決方案。
1、數據存儲在用戶瀏覽器中
2、設置、讀取方便、甚至頁面刷新不丟失數據
3、容量較大,sessionStorage約5M、localStorage約20M
4、只能存儲字符串,可以將對象JSON.stringify() 編碼後存儲
15.6.2 window.sessionStorage
1、生命週期爲關閉瀏覽器窗口
2、在同一個窗口(頁面)下數據可以共享
3、以鍵值對的形式存儲使用
存儲數據:
sessionStorage.setItem(key, value)
獲取數據:
sessionStorage.getItem(key)
刪除數據:
sessionStorage.removeItem(key)
清空數據:(所有都清除掉)
sessionStorage.clear()
15.6.3 window.localStorage
1、聲明週期永久生效,除非手動刪除 否則關閉頁面也會存在
2、可以多窗口(頁面)共享(同一瀏覽器可以共享)
- 以鍵值對的形式存儲使用
存儲數據:
localStorage.setItem(key, value)
獲取數據:
localStorage.getItem(key)
刪除數據:
localStorage.removeItem(key)
清空數據:(所有都清除掉)
localStorage.clear()
15.6.4 案例講解-記住用戶名
如果勾選記住用戶名, 下次用戶打開瀏覽器,就在文本框裏面自動顯示上次登錄的用戶名
案例分析
把數據存起來,用到本地存儲
關閉頁面,也可以顯示用戶名,所以用到localStorage
打開頁面,先判斷是否有這個用戶名,如果有,就在表單裏面顯示用戶名,並且勾選複選框
當複選框發生改變的時候change事件
如果勾選,就存儲,否則就移除
<input type="text" id= "username" />
<input type= "checkbox" name="" id="remember">
<script>
var username = document.querySelector( '#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')){
username.value a localStorage.getItem( ' username ' );
remember .checked = true;
}
remember. addEventListener('change', function(){
if (this.checked){
localStorage.setItem( 'username ' , username.value)
}else{
localStorage.removeItem( 'username');
}
}
</script>