移动端常见特效#
触屏事件概述#
移动端浏览器兼容性较好，不需要考虑之前js的兼容性问题，可以放心的使用原生js书写效果，但是移动端也有自己独特的地方，比如
触屏事件
touch
（也称触摸事件），Android和IOS都有。
touch
对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
触摸事件对象（TouchEvent）#
TouchEvent
是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件，这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
touchstart
、
touchmove
、
touchend
三个事件都各自有事件对象。
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无变化 |
若侦听的是同一个DOM元素，那
touches
和
targetTouches
是一样的
因为一般都是触摸元素，所以最常用的是
targetTouches
若有多个手指触摸屏幕，使用
targetTouches[0]
即可得到正在触摸DOM元素的第一根手指的相关信息，比如手指坐标等
移动端拖动元素#
-
touchstart、touchmove、touchend可以实现拖动元素 -
但是拖动元素需要当前手指的坐标值，可以使用
targetTouches[0]里面的pageX和pageY - 移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离
- 手指移动的距离：手指滑动中的位置-手指刚开始触摸的位置
拖动元素三部曲：
- 触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
- 移动手指touchmove：计算手指的滑动距离，并且移动盒子
- 离开手指touchend
注意： 手指移动也会触发滚动屏幕，所以要阻止默认的屏幕滚动
e.preventDefault();
案例#
手指滑动轮播图（携程旅游）#
- 本质就是ul跟随手指移动，简单说就是移动端拖动元素
- 触摸元素touchstart：获取手指初始坐标
- 移动手指touchmove：计算手指的滑动距离，并且移动盒子
- 移开手指touchend：根据滑动的距离分不同的情况
- 如果移动距离小于某个像素值，就回弹原来的位置
- 若移动距离大于某个像素值，就上一张下一张滑动。
返回顶部（携程旅游）#
当页面滚动到某个地方，就显示返回顶部模块，否则隐藏
点击即可返回顶部
- 滚动到某个地方显示
- 事件：scroll页面滚动事件
- 若被卷去的头部（window.pageYOffset）大于某个数值
- 点击，window.scroll(0,0)返回顶部