JavaScript 4.21

JS

---

1.缓动动画

1.1原理

• 盒子移动的距离慢慢变短
• 核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的步长，步长需向上取整，Math.ceil
• 停止条件：当前盒子位置等于目标位置就停止定时器

var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);

1.2动画函数添加回调函数

function animate （target ，obj，callback）{}

1.3动画函数封装

动画函数写在js文件中，需要时引用

1.4轮播图

滑动距离：索引号*图片宽度
图片无缝滚动原理：把ul第一个li复制一份，放到最后，滚动到复制的最后一张图片时，让ul快速，不做动画的跳到最左侧，left为0，同时索引号设置为0
复制第一张图片：cloneNode（true） + appendChild

2.节流阀

上一个函数动画执行完毕后再执行下一个动画，让事件无法连续触发
使用回调函数：添加变量来锁住和解锁函数

3.返回顶部

滚动窗口到文档的特定位置：window.scroll（x，y）里面x，y没有单位

4.移动端特效

4.1触屏事件

touchstart 触摸触发事件
touchmove 滑动触发事件
touchend 移开时触发事件

触摸事件对象（TouchEvent）

touches：正在触摸屏幕所有手指的列表
targetTouches：正在触摸当前DOM元素上的手指的一个列表
changedTouches：手指状态发生了改变的列表，从无到有或从有到无
手指离开屏幕时，没有touches和targetTouches，但是有changedTouches

4.2拖动事件

touchstart，touchmove，touchend实现
盒子原来的位置 + 手指移动的距离
手指移动的距离 ： 手指滑动中的位置 - 手指刚开始触摸的位置
阻止屏幕滚动：e.preventDefault（）

4.3click延时解决方案

移动端click会有300ms延时，因为移动端屏幕双击会缩放页面，等待第二次点击

• 禁止缩放 < meta name=“viewport” content=“user-scalable=no”>
• 利用touch事件封装
• fastclick插件

4.4轮播图插件

Swiper

• 引入相关文件
• 按照规定语法使用

4.5其他插件

superslide
isscroll

5.本地存储

5.1特性

• 数据存储在浏览器中
• 设置、读取方便，刷新不丢失数据
• 容量较大
• 只能存储字符串

5.2window.sessionStorage

• 生命周期为关闭浏览器窗口
• 同一窗口下数据可以共享
• 以键值对的形式存储使用
  存储数据：sessionStorage.setItem（‘key’，value）
  获取数据：sessionStorage.getItem（‘key’）
  删除数据：sessionStorage.removeItem（‘key’）
  清空数据：sessionStorage.clear

5.2window.localStorage

• 生命周期永久，除非手动删除
• 同一浏览器多窗口共享
• 以键值对的形式存储使用
  存储数据：localStorage.setItem（‘key’，value）
  获取数据：localStorage.getItem（‘key’）
  删除数据：localStorage.removeItem（‘key’）
  清空数据：localStorage.clear