移动端网页特效

一、触屏事件

1、触屏事件概述

移动端兼容性好，可以放心使用原生JS书写效果，但是移动端也有自己独特地方。比如触屏事件 touch（触摸事件）

触屏事件可响应用户手指对屏幕或者触控板操作。

2、触摸事件对象(TouchEvent)

这是一类描述手指在触摸平面的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少等等

touchstart、touchmove、touchend  三个事件都会各自有事件对象。

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

3、移动端拖动元素

1、touchstart、touchmove、touchend 可以实现拖动元素

2、但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches【0】 里面的pageX和pageY

 3、移动端拖动原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置  +  手指移动的距离

4、手指移动的距离： 手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三部曲：

        

注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

二、移动端常见特效

移动端轮播图-滚动图片

移动端轮播图-无缝滚动

classList 属性

classList属性是HTML5新增的一个属性，返回元素的类名。但是IE10以上版本支持

该属性用于在元素中添加，移除及切换css类。有以下方法

        切换类:

element.classList.toggle('类名')

轮播图-小圆点跟随变化

轮播图-手指拖动轮播图

根据移动距离判断回弹还是播放上一张下一张

回弹效果

返回顶部模块

click 延时解决方案

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

解决方案：

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

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

2、利用touch 事件自己封装这个事件解决300ms 延迟

原理就是

1、当我们手指触摸屏幕，记录当前触摸时间

2、当我们手指离开屏幕，用离开的时间减去触摸的时间

3、如果时间小于150ms ，并且没有滑动过屏幕，那么我们就定义为点击

3、使用插件。fastclick插件解决 300ms 延迟

三、移动端常用开发插件

1、什么是插件

JS插件 是JS文件，特点：他一般是为了解决某个问题而专门存在，其功能单一且较小

animate.js 算是一个最简单的插件

2、插件的使用

1、引入JS插件文件

3、Swiper 插件的使用

4、其他移动端常见插件

5、插件使用总结

6、练习-移动端视频插件 zy.media.js

不同视频格式文件，可以通过source 解决。但外观播放暂停等可以使用插件来制作

四、移动端常用开发框架

1、框架概述

框架大而全，插件小而专一

2、bootstarp