网页特效

内容是上pink老师的课自行总结的，JS进阶。移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

网页特效

• PC 端网页特效
  • 元素偏移量 offset 系列
    • 1 offset 概述
      • offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
        • 获得元素距离带有定位父元素的位置
        • 获得元素自身的大小（宽度高度）
        • 注意
          • 返回的数值都不带单位
      • offset 系列常用属性
        • • offsetWidth和offsetHeight可以得到元素的大小 宽度和高度 是包含padding + border + width
          • offsetTop和offsetLeft 元素 以带有定位的最近一级的父元素为准 如果没有父元素或者父元素没有定位 则以 body 为准
    • 2 offset 与 style 区别
      • offset
        • offset 可以得到任意样式表中的样式值
        • offset 系列获得的数值是没有单位的
        • offsetWidth 包含padding+border+width
        • offsetWidth 等属性是只读属性，只能获取不能赋值
        • 所以，我们想要获取元素大小位置，用offset更合适
      • style
        • style 只能得到行内样式表中的样式值
        • style.width 获得的是带有单位的字符串
        • style.width 获得不包含padding和border 的值
        • style.width 是可读写属性，可以获取也可以赋值
        • 所以，我们想要给元素更改值，则需要用style改变
  • 元素可视区 client 系列
    • client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。 通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
    • 注意
      • clientWidth 和 offsetWidth 最大的区别就是 不包含边框
    • 立即执行函数
      • 写法
        • 1.(function() {})()；
          • (function(a, b) { console.log(a + b); var num = 10; })(1, 2); // 第二个小括号可以看做是调用函数
        • 2. (function(){}());
          • (function sum(a, b) { console.log(a + b); var num = 10; // 局部变量 }(2, 3));
      • 主要作用
        • 不需要调用，立马能够自己执行的函数
        • 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
  • 元素滚动 scroll 系列
    • 1 元素 scroll 系列属性
      • scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
    • 2 页面被卷去的头部
      • 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。 当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。 滚动条在滚动时会触发 onscroll 事件。
  • 三大系列总结
    • 主要用法
      • offset系列 经常用于获得元素位置 offsetLeft offsetTop
      • client 经常用于获取元素大小 clientWidth clientHeight
      • scroll 经常用于获取滚动距离 scrollTop scrollLeft
      • 注意页面滚动的距离通过 window.pageXOffset 获得
  • 动画函数封装
    • 1 动画实现原理
      • 核心原理：通过定时器 setInterval() 不断移动盒子位置。
      • 实现步骤
        • 1. 获得盒子当前位置
        • 2. 让盒子在当前位置加上1个移动距离
        • 3. 利用定时器不断重复这个操作
        • 4. 加一个结束定时器的条件
        • 5. 注意此元素需要添加定位，才能使用element.style.left
    • 2 动画函数简单封装
      • 注意函数需要传递2个参数，动画对象和移动到的距离。
    • 3 动画函数给不同元素记录不同定时器
      • 如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
      • 核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
    • 4 缓动效果原理
      • 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
      • 思路
        • 1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
        • 2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长
        • 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        • 注意步长值需要取整
    • 5 动画函数多个目标值之间移动
      • 可以让动画函数从 800 移动到 500。
        • var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step);
      • 当我们点击按钮时候，判断步长是正值还是负值
        • 如果是正值，则步长 往大了取整
        • 如果是负值，则步长 向小了取整
    • 6 动画函数添加回调函数
      • 回调函数原理：函数可以作为一个参数。 将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
      • 回调函数写的位置：定时器结束的位置。即在clearInterval()后写入回调函数
    • 7 动画函数封装到单独JS文件里面
      • 因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。
      • 操作步骤
        • 单独新建一个JS文件。
        • HTML文件引入 JS 文件。
  • 节流阀
    • 防止轮播图按钮连续点击造成播放过快。
    • 节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
    • 核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
    • 举例
      • 开始设置一个变量 var flag = true; If(flag) {flag = false; do something} 关闭水龙头 利用回调函数 动画执行完毕， flag = true 打开水龙头
• 移动端网页特效
  • 触屏事件
    • 1 触屏事件概述
      • 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果， 但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
      • touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
    • 2 触摸事件对象（TouchEvent）
      • TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。 这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
      • touchstart、touchmove、touchend 三个事件都会各自有事件对象。
      • 触摸事件对象重点我们看三个常见对象列表
        • 因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes
    • 3 移动端拖动元素
      • 1. touchstart、touchmove、touchend 可以实现拖动元素
      • 2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
      • 3. 移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
      • 4. 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置
      • 拖动元素三步曲
        • （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
        • （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
        • （3） 离开手指 touchend:
        • 注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
  • 移动端常见特效
    • 1 classList 属性
      • classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。
      • 该属性用于在元素中添加，移除及切换 CSS 类。
        • 切换类
          • element.classList.toggle（’类名’）； focus.classList.toggle(‘current’);
        • 添加类
          • element.classList.add（’类名’）； focus.classList.add(‘current’);
        • 移除类
          • element.classList.remove（’类名’）; focus.classList.remove(‘current’);
        • 是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
    • 2 click 延时解决方案
      • 移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
      • 解决方案
        • 1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。
        • 2. 利用touch事件自己封装这个事件解决 300ms 延迟。
          • 原理
            • 1. 当我们手指触摸屏幕，记录当前触摸时间
            • 2. 当我们手指离开屏幕， 用离开的时间减去触摸的时间
            • 3. 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击
  • 移动端常用开发插件
    • 1 什么是插件
      • JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。
      • 特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
      • GitHub官网地址： https://github.com/ftlabs/fastclick
    • 2 插件的使用
      • 1. 引入 js 插件文件。
        • fastclick 插件解决 300ms 延迟。 使用延时
      • 2. 按照规定语法使用。
        • if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { //DOMContentLoaded等页面DOM元素加载完再执行 FastClick.attach(document.body); }, false); }
    • 3 Swiper 插件的使用
      • 中文官网地址： https://www.swiper.com.cn/
    • 4 其他移动端常见插件
      • superslide： http://www.superslide2.com/
      • iscroll： https://github.com/cubiq/iscroll
    • 5 插件的使用总结
      • 确认插件实现的功能
      • 去官网查看使用说明
      • 下载插件
      • 打开demo实例文件，查看需要引入的相关文件，并且引入
      • 复制demo实例文件中的结构html，样式css以及js代码
    • 6 练习-移动端视频插件 zy.media.js
      • H5 给我们提供了 video 标签，但是浏览器的支持情况不同。 不同的视频格式文件，我们可以通过source 解决。
      • 但是外观样式，还有暂停，播放，全屏等功能我们只能自己写代码解决。 这个时候我们可以使用插件方式来制作。
  • 移动端常用开发框架
    • 1 框架概述
      • 框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。 框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
      • 插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
      • 前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端 前端常用的移动端插件有 swiper、superslide、iscroll等。
      • 框架： 大而全，一整套解决方案 插件： 小而专一，某个功能的解决方案
    • 2 Bootstrap
      • Bootstrap 是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单。 它能开发PC端，也能开发移动端
      • Bootstrap JS插件使用步骤
        • 引入相关js 文件
        • 复制HTML 结构
        • 修改对应样式
        • 修改相应JS 参数
• 本地存储
  • 本地存储
    • 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求， 会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
    • 本地存储特性
      • 1、数据存储在用户浏览器中
      • 2、设置、读取方便、甚至页面刷新不丢失数据
      • 3、容量较大，sessionStorage约5M、localStorage约20M
      • 4、只能存储字符串，可以将对象JSON.stringify() 编码后存储
  • window.sessionStorage
    • 概念
      • 1、生命周期为关闭浏览器窗口
      • 2、在同一个窗口(页面)下数据可以共享
      • 3. 以键值对的形式存储使用
    • 操作
      • 存储数据
        • sessionStorage.setItem(key, value)
      • 获取数据
        • sessionStorage.getItem(key)
      • 删除数据
        • sessionStorage.removeItem(key)
      • 删除所有数据（慎用）
        • sessionStorage.clear()
  • window.localStorage
    • 概念
      • 1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
      • 2、可以多窗口（页面）共享（同一浏览器可以共享）
      • 3. 以键值对的形式存储使用
    • 操作
      • 存储数据
        • localStorage.setItem(key, value)
      • 获取数据
        • localStorage.getItem(key)
      • 删除数据
        • localStorage.removeItem(key)
      • 删除所有数据（慎用）
        • localStorage.clear()