移动端网页特效

1. 触屏事件

1.1 触屏事件概述

touch 对象代表一个触摸点，触屏事件可响应用户手指对屏幕或者触控板操作。

常用的触屏事件：

1.2 触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件，使开发者可以检测触点的移动，触点的增加和减少。

触摸事件对象重点我们看三个常见对象列表：

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

2. classList 属性

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’);

注意以上方法里面，所有类名都不带点

3. click 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面

1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。

 <meta name="viewport" content="user-scalable=no">

2. 利用touch事件自己封装这个事件解决 300ms 延迟
3. 使用插件。 fastclick 插件解决 300ms 延迟
   https://github.com/ftlabs/fastclick

4. 移动端常用开发插件

4.1 插件的使用

1. 确认插件实现的功能
2. 去官网查看使用说明
3. 下载插件
4. 打开demo实例文件，查看需要引入的相关文件，并且引入
5. 复制demo实例文件中的结构html，样式css以及js代码

4.2 常用插件

Swiper 插件：轮播图
https://www.swiper.com.cn/
superslide：
http://www.superslide2.com/
iscroll：
https://github.com/cubiq/iscroll
移动端视频插件 zy.media.js：
https://github.com/ireaderlab/zyMedia

5. 移动端常用开发框架

前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端