JS学习之BOM移动端常见网页特效

移动端网页的特效

触屏事件概述

移动端浏览器兼容性好，不需要考虑一起JS兼容性问题，可以放心的使用原生JS书写效果，但是移动端页游自己独特的地方，比如触屏事件(touch)也称触摸事件，不像电脑端有手指、十字架等，触摸事件安卓和IOS都有

touch对象代表一个触摸点，触摸点可能时一根手指，也可能是一根触摸笔，触屏事件可以相应用户兽（或触控笔）对屏幕或者触控板操作

触屏touch事件 作用

touchstart 手指触摸到一个DOM元素时触发

touchmove 手指在一个DOM元素上滑动时触发

touchend 手指从一个DOM元素上移开时触发

触摸事件对象(TouchEvent)

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

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

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

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发送了改变的列表，从无到有吗，从有到无变化

移动端拖动元素(比较常见）

touchstart touchmove touchend 可以实现拖动元素

1. 但是拖动元素 需要当前手指的坐标值 我们可以使用tartgetTouches[0]里面的pageX 和 pageY

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

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

拖动元素三步曲：

• 触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置

• 移动手指touchmove：计算手指的滑动距离，并且移动盒子

• 离开手指touchend：

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

移动端常见特效

案例：轮播图

移动端轮播图功能和基本PC端一致

1. 可以自动播放图片

• 开启定时器

• 在移动端大量使用C3效果，可以使用translate移动

• 想要图片优雅的移动，添加过渡效果

但是这种播放只能自动播放一遍

自动播放功能-无缝滚动

• 注意，判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断

• 此时需要添加检测过渡完成事件transitionend

1. 判断条件：如果索引号等于3 说明走早了最后一张图片，此时索引号要复原为0

   此时图片，去掉过渡效果，然后移动

   手指触动图片，也可以是往左滑动，滑到-1时 也就是如果索引号小于0 说明是倒着走，索引号要等于2

2. 手指可以拖动播放轮播图

classList属性

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

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

添加类：

element.classList.add('类名');

focus.classList.add('current');

移除类：

element.classList.remove('类名');

切换类：

element.classList.toggle('类名');

继续上面轮播图案例分析

• 把小圆点跟随变化效果

• 把ol 里面il 带有current类名的选出来去掉类名remove

• 再让当前索引号li 加上current add

• 但是，是等着过渡结束之后变化，所以这样写到transitionend 事件里面

1.手指滑动轮播图

• 本质就是ul跟随手指移动，简单说就是移动端拖动元素

• 触摸元素touchstart：获取手指初始坐标

• 移动手指touchmove：计算手指的滑动距离，并且移动盒子

• 离开手指touchend：根据滑动的距离分不同的情况 当距离小于某长度时 图片并不会翻页，当滑动距离大于某一段长度时才会翻页到下一张图片

• 如果移动距离小于某个像素，就回弹原来位置

• 如果移动距离大于某个像素就上一张下一张滑动

案例：返回顶部

当页面滚动某个地方，就显示，否则隐藏

分析：

• 滚动某个地方显示

• 事件：scroll 页面滚动事件

• 移动端大胆使用pageYOffset

• 如果被卷去的头部（window.pageYOffset）大于某个数值 就显示返回顶部的图标

• 点击，window.scroll(0,0) 返回顶部

click 延时解决方案

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

解决方案：

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

<meta name = 'viewport'content="user-scalable=no"> 不允许用户缩放功能

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

原理就是：

• 当手指触摸屏幕，记录当前触摸时间

• 当手指离开屏幕，用离开的时间减去触摸的时间

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

什么是插件

移动端要求的是快速开发，所以经常会借助于一些插件来帮我们完成操作，什么是插件呢？

JS插件是js文件，它循序一个规范编写，方便程序展示效果，拥有特定功能并且方便调用，轮播图和瀑布流插件

特点：他一般视为了解决某个问题而专门存在，其功能单一，并且比较小

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

fastclick插件解决300ms延迟，使用延迟

GitHub 官网

插件的使用

1. 引入js插件文件

Swiper 插件的使用

中文官网地址 马柯施迈_生活小助手CON.CN - 电脑手机都能用的上网导航

1. 引入插件相关文件

2. 按照规定语法使用

依次复制结构HTML、CSS、JS代码

其他移动端常见插件

• superlide：http://www.superlide2.con/

• iscroll： http://github.com/cuiq/iscroll

视频插件的使用

 

插件的使用总结

1. 确认插件实现的功能

2. 去官网查看使用说明

3. 下载插件

4. 打开demo实例文件，查看需要引入的相关文件，并且引入

5. 复制demo实例文件中的结构html 样式css以及js代码

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

H5给我们提供了video标签，但是浏览器的支持情况不同

不同的视频格式文件，可以通过source解决 各自浏览器识别各自视频格式

但是外观样式吗，还有暂停，播放，全屏等功能只能自己写代码解决

这个使用可以使用插件方式来制作

移动端常用开发框架

框架概述

框架，顾名思义就是一套架构，他会基于自身的特点向用户提供一套较为完整的解决方案，框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发

插件一般为了解决某个问题而专门存在，其功能单一，并且比较小

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

前端常用的移动端插件有swiper superslide iscroll等

框架：大而全，一整套解决方案

插件：小而专一，某个功能的解决方案