JavaScript核心知识第四章---PC端、移动端网页特效（含大量代码分析）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

sliderbar.style.top = sliderbarTop + ‘px’;
} else {
sliderbar.style.position = ‘absolute’;
sliderbar.style.top = ‘300px’;
}
// 4. 当我们页面滚动到main盒子，就显示 goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = ‘block’;
} else {
goBack.style.display = ‘none’;
}
})

##### 3.3 页面被卷去的头部兼容性解决方案


需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：


1. 声明了 DTD，使用 document.documentElement.scrollTop；
2. 未声明 DTD，使用 document.body.scrollTop；
3. 新方法 `window.pageYOffset` 和 `window.pageXOffset`，IE9 开始支持；


代码演示如下：

function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候 getScroll().left

##### 3.4 三大系列总结




| 三大系列大小对比 | 作用 |
| --- | --- |
| element.offsetWidth | 返回自身包括padding、边框、内容区的宽度、返回数值不带单位 |
| element.clientWidth | 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |


😆主要用法😆：


1. offset系列 经常用于获得元素位置 `offsetLeft` `offsetTop`；
2. client 经常用于获取元素大小 `clientWidth` `clientHeight`；
3. scroll 经常用于获取滚动距离 `scrollTop` `scrollLeft` ；
4. 注意页面滚动的距离通过 `window.pageXOffset` 获得；


##### 3.5 mouseenter和mouseover的区别


1️⃣ 当鼠标移动到元素上时就会触发 `mouseenter`事件类似 mouseover；


2️⃣ 两者之间的差别是`mouseover` 鼠标经过自身盒子会触发，经过子盒子还会触发。`mouseenter` 只会经过自身盒子触发；




---


#### （4）动画函数封装


##### 4.1 动画实现原理


核心原理：通过定时器 `setInterval()`不断移动盒子位置。


实现步骤：


1. 获得盒子当前位置；
2. 让盒子在当前位置加上1个移动距离；
3. 利用定时器不断重复这个操作；
4. 加一个结束定时器的条件；
5. 注意此元素需要添加定位，才能使用 `element.style.left`；


完整代码演示如下：

##### 4.2 动画函数简单封装


注意函数需要传递2个参数，动画对象和移动到的距离。


完整代码演示如下：

span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}

欢迎来到我的博客哦

##### 4.3 动画函数给不同元素记录不同定时器


1️⃣ 如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。  
 2️⃣ 核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。


完整代码演示如下：

span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}

点击我才能走呢

欢迎来到我的博客哦

##### 4.4 缓动效果原理


缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来；


😆思路😆：


1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来；
2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长；
3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器；
4. 注意步长值需要取整；


完整代码演示如下：

点击我才能走呢 欢迎来到我的博客哦

}, 15);
}
var span = document.querySelector(‘span’);
var btn = document.querySelector(‘button’);
btn.addEventListener(‘click’, function() {
// 调用函数
animate(span, 500);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

##### 4.5 动画函数多个目标值之间移动


可以让动画函数从 800 移动到 500；


当我们点击按钮时候，判断步长是正值还是负值


1. 如果是正值，则步长 往大了取整；
2. 如果是负值，则步长 向小了取整；


完整代码演示如下：

点击我到500啦 点击我到800啦 欢迎来到我的博客哦

}, 15);
}
var span = document.querySelector(‘span’);
var btn500 = document.querySelector(‘.btn500’);
var btn800 = document.querySelector(‘.btn800’);

btn500.addEventListener(‘click’, function() {
// 调用函数
animate(span, 500);
})
btn800.addEventListener(‘click’, function() {
// 调用函数
animate(span, 800);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

##### 4.6 动画函数添加回调函数


1️⃣ 回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。


2️⃣ 回调函数写的位置：定时器结束的位置。


完整代码演示如下：

点击我到500啦 点击我到800啦 欢迎来到我的博客哦

---


### 二、移动端网页特效


#### （1）触屏事件


##### 1.1 触屏事件概述


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


2️⃣ `touch` 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。




| 触屏touch事件 | 说明 |
| --- | --- |
| touchstact | 手指触摸一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指在一个DOM元素上移开时触发 |


完整代码演示如下：

##### 1.2 触摸事件对象（TouchEvent）


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


2️⃣ `touchstart`、`touchmove`、`touchend` 三个事件都会各自有事件对象；


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




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


😆温馨提醒😆：因为平时我们都是给元素注册触摸事件，所以重点记住 `targetTocuhes`；


##### 1.3 移动端拖动元素


1️⃣ `touchstart`、`touchmove`、`touchend` 可以实现拖动元素；


2️⃣ 但是拖动元素需要当前手指的坐标值 我们可以使用 `targetTouches[0]` 里面的`pageX` 和 `pageY`；


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


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


拖动元素三步曲：


1. 触摸元素 `touchstart`：获取手指初始坐标，同时获得盒子原来的位置；
2. 移动手指 `touchmove`：计算手指的滑动距离，并且移动盒子；
3. 离开手指 `touchend`:；


😆温馨提醒😆：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 `e.preventDefault();`


完整代码演示如下：

div.addEventListener(‘touchmove’, function(e) {
// 计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pageY - startY;
// 移动我们的盒子 盒子原来的位置 + 手指移动的距离
this.style.left = x + moveX + ‘px’;
this.style.top = y + moveY + ‘px’;
e.preventDefault(); // 阻止屏幕滚动的默认行为
});

#### （2）补充知识


##### 2.1 classList 属性


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


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


1. 添加类：`element.classList.add('类名');`

focus.classList.add(‘current’);

2. 移除类：`element.classList.remove('类名');`

focus.classList.remove(‘current’);

3. 切换类：`element.classList.toggle('类名');`

focus.classList.toggle(‘current’);

😆温馨提醒😆：以上方法里面，所有类名都不带点；


完整代码演示如下：

开关灯

##### 2.2 click 延时解决方案


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


😆解决方案😆：


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

2. 利用touch事件自己封装这个事件解决 300ms 延迟。原理如下：


1️⃣ 当我们手指触摸屏幕，记录当前触摸时间；  
 2️⃣ 当我们手指离开屏幕， 用离开的时间减去触摸的时间；  
 3️⃣ 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击；

//封装tap，解决click 300ms 延时
function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener(‘touchstart’, function (e) {
startTime = Date.now(); // 记录触摸时间
});
obj.addEventListener(‘touchmove’, function (e) {
isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
});
obj.addEventListener(‘touchend’, function (e) {
if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//调用
tap(div, function(){ // 执行代码 });

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


❗️ ❗️ **GitHub官网地址：<https://github.com/ftlabs/fastclick/blob/main/lib/fastclick.js>**




---


### 三、本地存储


#### （1）本地存储


随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。


本地存储特性：


1. 数据存储在用户浏览器中；
2. 设置、读取方便、甚至页面刷新不丢失数据；
3. 容量较大，`sessionStorage`约5M、`localStorage`约20M；
4. 只能存储字符串，可以将对象`JSON.stringify()`编码后存储；


#### （2）window.sessionStorage


1. 生命周期为关闭浏览器窗口；
2. 在同一个窗口(页面)下数据可以共享；
3. 以键值对的形式存储使用；


1️⃣ 存储数据：`sessionStorage.setItem(key, value)`


2️⃣ 获取数据：`sessionStorage.getItem(key)`


3️⃣ 删除数据：`sessionStorage.removeItem(key)`


4️⃣ 删除所有数据：`sessionStorage.clear()`


完整代码演示如下：

存储数据 获取数据 删除数据 清空所有数据

var ipt = document.querySelector(‘input’);
var set = document.querySelector(‘.set’);
var get = document.querySelector(‘.get’);
var remove = document.querySelector(‘.remove’);
var del = document.querySelector(‘.del’);
set.addEventListener(‘click’, function() {
// 当我们点击了之后，就可以把表单里面的值存储起来
var val = ipt.value;
sessionStorage.setItem(‘uname’, val);
sessionStorage.setItem(‘pwd’, val);
});
get.addEventListener(‘click’, function() {
// 当我们点击了之后，就可以把表单里面的值获取过来
console.log(sessionStorage.getItem(‘uname’));
});
remove.addEventListener(‘click’, function() {
sessionStorage.removeItem(‘uname’);
});
del.addEventListener(‘click’, function() {
// 当我们点击了之后，清除所有的
sessionStorage.clear();
});

#### （3）window.localStorage


1. 声明周期永久生效，除非手动删除 否则关闭页面也会存在；
2. 可以多窗口（页面）共享（同一浏览器可以共享）；
3. 以键值对的形式存储使用；


1️⃣ 存储数据：`localStorage.setItem(key, value)`


2️⃣ 获取数据：`localStorage.getItem(key)`


3️⃣ 删除数据：`localStorage.removeItem(key)`


4️⃣ 删除所有数据：`localStorage.clear()`


完整代码演示如下：

存储数据 获取数据 删除数据 清空所有数据

#### （4）案例：记住用户名


要求：如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名；


案例分析：


1. 把数据存起来，用到本地存储；
2. 关闭页面，也可以显示用户名，所以用到`localStorage`；
3. 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框；
4. 当复选框发生改变的时候 `change`事件；
5. 如果勾选，就存储，否则就移除；


完整代码演示如下：

记住用户名

![img](https://img-blog.csdnimg.cn/img_convert/5705d3b4334cae31b3576523cee3d393.png)
![img](https://img-blog.csdnimg.cn/img_convert/b0b6cef1d9b8b0dd878973af3c818fc1.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.youkuaiyun.com/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
 var username = document.querySelector('#username');
 var remember = document.querySelector('#remember');
 if (localStorage.getItem('username')) {
 username.value = localStorage.getItem('username');
 remember.checked = true;
 }
 remember.addEventListener('change', function() {
 if (this.checked) {
 localStorage.setItem('username', username.value)
 } else {
 localStorage.removeItem('username');
 }
 })
 </script>
</body>

[外链图片转存中…(img-MOzLErmE-1715763254841)]
[外链图片转存中…(img-I1WZ7hdH-1715763254841)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！