1、觸屏事件

1.1 觸屏事件概述

移動端瀏覽器兼容性較好，我們不需要考慮以前JS的兼容性問題，可以放心的使用原生JS書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件touch (也稱觸摸事件)， Android和IOS都有。

1.2 觸摸事件對象（TouchEvent）

TouchEvent是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件。這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等。
touchstart、touchmove、touchend三個事件都會各自有事件對象。

觸摸列表說明

touches	正在觸摸屏幕的所有手指的一個列表
targetTouches	正在觸摸當前DOM元素上的一個手指的一個列表
changedTouches	手指狀態發生了改變的列表，從無到有，從有到無變化

如果偵聽的是一個DOM元素，touchstart 和 targetTouches 是一樣的
一般都是觸摸元素，所以經常使用的是targetTouches

1.3 移動端拖動元素

1、touchstart、touchmove、touchend可以實現拖動元素
2、但是拖動元素需要當前手指的坐標值，我們可以使用targetTouches[0]里面的paegX 和 pageY
3、移動端拖動的原理：手指移動中，計算出手指移動的距離。然后用盒子原來的位置 + 手指移動的距離。
4、手指移動的距離：手指滑動中的位置減去 手指剛開始觸摸的位置
拖動元素三部曲：
（1）、觸摸元素touchstart：獲取手指初始坐標，同時獲得盒子原來的位置；
（2）、移動手指touchmove：計算手指的滑動距離，并且移動盒子
（3）、離開手指touchend；
注：手指移動也會觸發滾動屏幕，所以這里要阻止默認的屏幕滾動e.preventDefault();

2、移動端常見特效

2.1classList屬性

classList屬性是HTML5新增的一個屬性，返回元素的類名，但是ie10以上版本支持。
該屬性用于在元素中添加，移除以及切換CSS類，有以下方法：

• 添加類： element.classList.add(‘類名’)；
• 移除類： element.classList.remove(‘類名’)；
• 切換類： element.classList.toggle(‘類名’)；

2.2 click延時解決方案

移動端click事件會有300ms的延時，原因是移動端屏幕雙擊會縮放（double tap to zoom）頁面。
解決方案：
1、禁用縮放。瀏覽器禁用默認的雙擊縮放行為并且去掉300ms的點擊延遲。

<meta name="viewport" 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() {});

3、使用插件。fastclick插件能解決300ms延遲。

3、移動端常用開發插件

3.1 什么是插件

移動端要求的是快速開發，所以我們經常會借助一些插件來幫我們完成操作。
JS插件是js文件 ，它遵循一定的編寫規范，方便程序展示效果，擁有特定功能且方便調用。如輪播圖和瀑布流插件。
特點： 他一般是為了解決某個問題而專門存在，其功能單一，并且比較小。

3.2 fastclick插件

fastclick 插件解決 300ms延時，使用延時。
[GitHub官網地址：] (https://github.com/ftlabs/fastclick)

3.3 Swiper插件的使用

[中文官網地址：] (https://www.swiper.com.cn/）
1、引入插件相關文件
2、按照規定語法使用

3.4 其他移動端常用插件

• superslide：http://www.superslide2.com/
• iscroll：https://github.com/cubiq/iscroll

3.5 插件的使用總結

1、確認插件實現的功能
2、去官網查看使用說明
3、下載插件
4、打開demo實例文件，查看需要引入的相關文件，并且引入；
5、復制demo實例文件中的結構html，樣式css以及js代碼；

3.5 移動端視頻插件 zy.media.js

H5給我們提供了video標簽，但是瀏覽器的支持情況不同；
不同的視頻格式文件，我們可以通過source解決；
但是外觀樣式，還有暫停、播放、全屏等功能我們只能自己寫代碼解決；
這個時候我們可以使用插件方式來制作

４、移動端常用開發框架

４.１ 框架概述

框架，顧名思義就是一套架構，它會基于自身的特點向用戶提供一套較為完整的解決方案，框架的控制權在框架本身，使用者要按照框架所規定的某種規范進行開發。
插件一般是為了解決某個問題而專門存在，其功能單一，并且比較小。
前端常用的框架有Bootstrap、Vue、Angular、react等。既能開發 PC端，也能開發移動端。
前端常用的移動端插件有swiper、superslide、iscroll　等。

框架：大而全，一整套解決方案；
插件：小而專一，某個功能的解決方案；

４.2 Bootstrap框架

Bootstrap 是一個簡潔、直觀、強悍的前端開發框架，它讓web開發更迅速、簡單。
它能開發PC端、也能開發移動端
Bootstrap JS插件使用步驟：
1、引入相關js文件；
2、復制HTML結構；
3、修改對應樣式；
4、修改相應JS參數；

總結

以上是生活随笔為你收集整理的移动端特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。