移動(dòng)端網(wǎng)頁特效
觸屏事件绣夺，可以使用addEventListener監(jiān)聽
touchstart? 手指觸摸到一個(gè)dom元素時(shí)觸發(fā)
touchmove 手指在一個(gè)dom元素上滑動(dòng)時(shí)觸發(fā)
touchend? 手指從一個(gè)dom元素上移開時(shí)觸發(fā)
觸摸事件對(duì)象-TouchEvent
是一類描述手指在觸摸平面(觸摸屏吏奸、觸摸板等)，的狀態(tài)變化事件陶耍。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)奋蔚，使開發(fā)者可以檢測(cè)觸點(diǎn)的移動(dòng)，觸點(diǎn)的增加和減少等烈钞。
touchstart,touchmove,touchend三個(gè)事件都有各自的事件對(duì)象泊碑。
觸摸事件對(duì)象重點(diǎn)，我們看三個(gè)常見的對(duì)象列表:
e.touches? 正在觸摸屏幕的所有手指的一個(gè)列表
e.targetTouches? 正在觸摸當(dāng)前dom元素上的手指的一個(gè)列表
e.changedTouches? 手指狀態(tài)發(fā)生了改變的列表毯欣，從無到有馒过，從有到無變化
我們平時(shí)都給元素注冊(cè)觸摸事件，所以重點(diǎn)記住tatgetTouches
移動(dòng)端拖動(dòng)元素
touchstart,touchmove,touchend可以實(shí)現(xiàn)拖動(dòng)元素
但是拖動(dòng)元素需要當(dāng)前手指的坐標(biāo)值酗钞，我們可以使用targetTouches[0]里面的pageX和pageY
移動(dòng)端拖動(dòng)原理:手指移動(dòng)計(jì)算出手指拖動(dòng)的距離腹忽，然后用盒子原來的位置+手指移動(dòng)的距離。
手指移動(dòng)的距離:手指滑動(dòng)中的位置-手指剛開始觸摸的位置算吩。
拖動(dòng)元素三部曲:0
拖動(dòng)元素touchstart:獲取手指初始坐標(biāo)留凭，同時(shí)過去盒子原來的位置
移動(dòng)手指touchmove:計(jì)算手指的滑動(dòng)距離，并且移動(dòng)盒子
離開手指touchend
注意偎巢，手指移動(dòng)也會(huì)觸發(fā)滾動(dòng)屏幕蔼夜，所以這里要阻止默認(rèn)的屏幕滑動(dòng)e.preventDefault();
classList屬性
H5新增的一個(gè)屬性，返回元素的類名压昼，但是ie10+
該屬性用于在元素中添加求冷，移除及切換CSS類。
添加類-element.classList.add('類名');
刪除類-element.classList.remove('類名');
切換類-element.classList.toggle('類名');
click延時(shí)解決方案
移動(dòng)端click會(huì)有300ms延時(shí)窍霞，原因移動(dòng)端屏幕雙擊會(huì)縮放頁面匠题。
1.禁止縮放:瀏覽器禁止默認(rèn)的雙擊縮放行為并且去掉300ms的點(diǎn)擊延遲。<meta name="viewport" content="user-scalable=no">
2.利用touch事件自己封裝函數(shù)解決300 ms延時(shí)
原理:當(dāng)我們手指觸摸屏幕但金，記錄當(dāng)前時(shí)間
當(dāng)我們手指離開屏幕韭山，用離開的時(shí)間減去觸摸的時(shí)間
如果時(shí)間小于150ms，并且沒有滑動(dòng)過屏幕，就定義為點(diǎn)擊
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){
? ? ? ? ? ? callback && callback();
? ? ? ? }
? ? ? ? isMove = false;
? ? ? ? startTime = 0;
? ? });
}
Facebook解決300ms延時(shí)地址
http://github.com/ftlabs/fastclick/
移動(dòng)端常用開發(fā)插件
swiper插件使用-移動(dòng)端輪播圖庫(kù)
superslide? -www.superslide2.com
iscroll-? github.com/cubiq/iscroll
移動(dòng)端視頻插件zy.media.js
本地存儲(chǔ)
本地存儲(chǔ)特性:
數(shù)據(jù)存儲(chǔ)在用戶瀏覽器中
設(shè)置钱磅、讀取方便梦裂、甚至頁面刷新不丟失數(shù)據(jù)
容量較大，sessionStorage約5m,localStorage約20m
只能存儲(chǔ)字符串盖淡，可以將對(duì)象JASON.stringify()編譯后存儲(chǔ)
window.sessionStorage
1.生命周期為關(guān)閉瀏覽器窗口
2.在同一個(gè)窗口(頁面)下數(shù)據(jù)可以共享
3.以鍵值對(duì)的形式
存儲(chǔ)數(shù)據(jù):sessionStorage.setItem(key,value)
獲取數(shù)據(jù):sessionStorage.getItem(key)
刪除數(shù)據(jù):sessionStorage.removeItem(key)
刪除所有數(shù)據(jù):sessionStorage.clear()
window.localStorage
1.生命周期永久生效年柠，除非手動(dòng)刪除，否則關(guān)閉頁面也會(huì)存在
2.可以多個(gè)窗口(頁面)下數(shù)據(jù)可以共享(同一瀏覽器共享)
3.以鍵值對(duì)的形式使用
存儲(chǔ)數(shù)據(jù):localStorage.setItem(key,value)
獲取數(shù)據(jù):localStorage.getItem(key)
刪除數(shù)據(jù):localStorage.removeItem(key)
刪除所有數(shù)據(jù):localStorage.clear()
