(五)PC端网页特效
[!TIP]
在前面学习了JS基础、DOM 和 BOM 的基本操作后,这部分主要学习这些知识的拓展应用。
1. 元素偏移量 offset 系列
1.1 offset 概述
offset
翻译过来就是偏移量,我们使用 offset
系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小(宽度高度)
- 注意:返回的数值都不带单位
offset
系列常用属性:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gdZdAs3h-1653226864470)(https://cdn.jsdelivr.net/gh/Hacker-C/Picture-Bed@main/JavaScript/offset1.33r96uboi540.jpg)]
1.2 offset 与 style 区别
1.2.1 offset
offset
可以得到任意样式表中的样式值offset
系列获得的数值是没有单位的offsetWidt
h 包含padding+border+width
offsetWidth
等属性是只读属性,只能获取不能赋值- 所以,我们想要获取元素大小位置,用
offset
更合适
1.2.2 style
style
只能得到行内样式表中的样式值style.width
获得的是带有单位的字符串style.width
获得不包含padding
和border
的值style.width
是可读写属性,可以获取也可以赋值- 所以,我们想要给元素更改值,则需要用
style
改变
1.3 案例1:获取鼠标在盒子内部的坐标
1.3.1 分析
- 我们在盒子内点击,想要得到鼠标距离盒子左右的距离。
- 首先得到鼠标在页面中的坐标(e.pageX, e.pageY)
- 其次得到盒子在页面中的距离( box.offsetLeft, box.offsetTop)
- 用鼠标距离页面的坐标减去盒子在页面中的距离,得到鼠标在盒子内的坐标
- 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动事件mousemove
1.3.2 代码
let box = document.querySelector(".box");
box.addEventListener("mousemove", function (e) {
let x = e.pageX - box.offsetLeft;
let y = e.pageY - box.offsetTop;
this.innerHTML = "鼠标距离盒子坐标是:(" +x + ", " + y + ")";
});
1.4 案例2:模态框拖拽
弹出框,我们也称为模态框。
- 点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。
- 点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。
- 鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。
- 鼠标松开,可以停止拖动模态框移动。
1.4.1 分析
- 点击弹出层,模态框和遮挡层就会显示出来 display:block;
- 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;
- 在页面中拖拽的原理:鼠标按下并且移动,之后松开鼠标
- 触发事件是鼠标按下 mousedown,鼠标移动 mousemove 鼠标松开 mouseup
- 拖拽过程: 鼠标移动过程中,获得最新的值赋值给模态框的left和top值,这样模态框可以跟着鼠标走了
- 鼠标按下触发的事件源是最上面一行,就是id 为 title
- 鼠标的坐标减去鼠标在盒子内的坐标,才是模态框真正的位置。
- 鼠标按下,我们要得到鼠标在盒子的坐标。
- 鼠标移动,就让模态框的坐标设置为:鼠标坐标减去盒子坐标即可,注意移动事件写到按下事件里面。
- 鼠标松开,就停止拖拽,就是可以让鼠标移动事件解除
1.4.2 代码
[!TIP]
我用阿里云盘分享了「模态框拖拽案例」,你可以不限速下载,链接:https://www.aliyundrive.com/s/uQHM8DpTh5F
1.5 案例2:京东放大镜
[!TIP]
代码:我用阿里云盘分享了「04-京东放大镜效果」,你可以不限速下载🚀
链接:https://www.aliyundrive.com/s/M9eJn6rAR28
2. 元素可视区 client 系列
2.1 定义
client
翻译过来就是客户端,我们使用 client
系列的相关属性来获取元素可视区的相关信息。通过client
系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性 | 作用 |
---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框大大小 |
element.clientWidth | 返回自身包括 padding 、内容区的宽度,不含边框,返回数值不带单位 |
element.clientHeight | 返回自身包括 padding 、内容区的高度,不含边框,返回数值不带单位 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQSfKzVh-1653226864470)(https://cdn.jsdelivr.net/gh/Hacker-C/Picture-Bed@main/JavaScript/client1.6bor0qa82lk0.png)]
2.2 案例:淘宝 flexible.js 源码分析
flexible 项目地址:https://github.com/amfe/lib-flexible
2.2.1 立即执行函数
立即执行函数是指函数定义好后,不需要调用直接执行。即一引入 JS 文件,则该函数自动执行。
语法:(function() {})()
或者 (function(){}())
主要作用:
- 创建一个独立的作用域
- 避免了命名冲突问题
举例:
(function () {console.log('hello');})(); // hello
可以传参数:
(function (a) {console.log(a);})(10); // 10
2.2.2 pageShow 事件
下面三种情况都会刷新页面都会触发load 事件。
- a标签的超链接
- F5或者刷新按钮(强制刷新)
- 前进后退按钮
但是火狐中,有个特点,有个“往返缓存”,这个缓存中不仅保存着页面数据,还保存了 DOM 和 JavaScript 的状态;实际上是将整个页面都保存在了内存里。
所以此时后退按钮不能刷新页面。
此时可以使用 pageshow
事件来触发。,这个事件在页面显示时触发,无论页面是否来自缓存。在重新加载页
面中,pageshow
会在 load
事件触发后触发;根据事件对象中的 persisted
来判断是否是缓存中的页面触发的pageshow
事件,注意这个事件给 window
添加。
[!warning]
多个立即执行函数间要加分号;
隔开。
3. 元素滚动 scroll 系列
3.1 元素scroll 系列属性
scroll
翻译过来就是滚动的,我们使用 scroll
系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scroll系列属性 | 作用 |
---|---|
element.scrollTop | 返回被卷上去的上侧距离,返回数值不带单位 |
element.scrollLeft | 返回被卷上去的左侧距离,返回数值不带单位 |
element.scrollWidth | 返回自身实际宽度,不含边框,返回数值不带单位 |
element.scrollHeight | 返回自身实际高度,不含边框,返回数值不带单位 |
如下图所示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BHlcXWFo-1653226864470)(https://cdn.jsdelivr.net/gh/Hacker-C/Picture-Bed@main/JavaScript/scroll1.4xrvppmwt800.png)]
3.2 页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏
掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll
事件。
获取页面被卷去的头部:
- 页面 被卷去的头部:可以通过
window.pageYOffset
获得,如果是被卷去的左侧window.pageXOffset
- 注意,元素被卷去的头部是
element.scrollTop
,左侧element.scrollLeft
3.3 案例:仿淘宝固定右侧侧边栏
[!TIP]
我用阿里云盘分享了「05-仿淘宝侧边栏.html」,你可以不限速下载🚀
链接:https://www.aliyundrive.com/s/c1sic4RxuLf
需求(自己动手实践):
- 原先侧边栏是绝对定位
- 当页面滚动到一定位置,侧边栏改为固定定位
- 页面继续滚动,会让返回顶部显示出来
要点:
- 需要用到页面滚动事件
scroll
因为是页面滚动,所以事件源是document
- 滚动到某个位置,就是判断页面被卷去的上部值。
- 页面被卷去的头部:可以通过
window.pageYOffset
获得如果是被卷去的左侧window.pageXOffset
- 注意,元素被卷去的头部是
element.scrollTop
, 如果是页面被卷去的头部则是window.pageYOffset
- 其实这个值可以通过盒子的
offsetTop
可以得到,如果大于等于这个值,就可以让盒子固定定位了
3.4 三大系列总结
3.4.1 对比
三大系列大小对比 | 作用 |
---|---|
element.offsetWidth | 返回自身包括 padding 、边框、内容区的宽度,返回数值不带单位 |
element.clientWidth | 返回自身包括 padding 、内容区的宽度,不含边框,返回数值不带单位 |
element.scrollWidth | 返回自身实际的宽度,不含边框,返回数值不带单位 |
3.4.2 主要用法
offset
系列经常用于获得元素位置offsetLeft
、offsetTop
client
经常用于获取元素大小clientWidth
、clientHeight
scroll
经常用于获取滚动距离scrollTop
、scrollLeft
- 注意页面滚动的距离通过
window.pageXOffset
获得
3.5 mouseenter 和 mouseover 的区别
- 当鼠标移动到元素上时就会触发
mouseenter
事件 - 类似
mouseover
,它们两者之间的差别是 mouseover
鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter
只会经过自身盒子触发- 之所以这样,就是因为
mouseenter
不会冒泡 - 跟
mouseenter
搭配鼠标离开mouseleave
同样不会冒泡
4. 动画函数封装
4.1 动画实现原理
核心原理:通过定时器 setInterval()
不断移动盒子位置。
实现步骤:
- 获得盒子当前位置
- 让盒子在当前位置加上 1 个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位(
position: absolute
),才能使用element.style.left
4.2 动画函数简单封装
注意函数需要传递 2 个参数,动画对象和移动到的距离。
function animate(obj, target) {
// 设置定时器
let timer = setInterval(function () {
if (obj.offsetLeft <= target) {
obj.style.left = obj.offsetLeft + 1 + 'px';
} else {
// 清除定时器
clearInterval(timer);
}
}, 30);
}
4.3 动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数,每次都要 var
声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)。
核心原理:利用 JS 是一门动态语言,可以很方便的给当前对象添加属性。
举例
// 封装动画函数
function animate(obj, target) {
// 给不同节点对象 obj 设置定时器
obj.timer = setInterval(function () {
if (obj.offsetLeft <= target) {
obj.style.left = obj.offsetLeft + 1 + 'px';
} else {
// 清除对象自己的定时器
clearInterval(obj.timer);
}
}, 30);
}
4.4 缓动效果原理
之前讲的是匀速动画: 盒 子 当 前 位 置 = 盒 子 当 前 位 置 + 固 定 值 盒子当前位置 = 盒子当前位置 + 固定值 盒子当前位置=盒子当前位置+固定值
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
思路:
- 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
- 核心算法: 每 次 移 动 的 距 离 步 长 = ( 目 标 值 − 现 在 的 位 置 ) / 10 每次移动的距离步长 = (目标值 - 现在的位置) / 10 每次移动的距离步长=(目标值−现在的位置)/10
- 停止的条件是:让当前盒子位置等于目标位置就停止定时器
- 注意步长值需要取整
举例:
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓冲动画核心算法
let step = Math.ceil((target - obj.offsetLeft) / 10);
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
4.5 动画函数多个目标值之间移动
可以让动画函数从 800
移动到 500
。
当我们点击按钮时候,判断步长是正值还是负值:
- 如果是正值,则步长往大了取整(
Math.ceil()
) - 如果是负值,则步长向小了取整(
Math.floor()
)
举例:
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓冲动画核心算法
let step = target - obj.offsetLeft;
// 左右移动步值正负处理
step = step >= 0 ? Math.ceil(step / 10) : Math.floor(step / 10);
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
4.6 动画函数添加回调函数
-
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,
再执行传进去的这个函数,这个过程就叫做 回调(callback
)。 -
回调函数写的位置:定时器结束的位置。
案例:
// 增加回调函数形参 callback
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓冲动画核心算法
let step = target - obj.offsetLeft;
// 左右移动步值正负处理
step = step >= 0 ? Math.ceil(step / 10) : Math.floor(step / 10);
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
// 判断,回调函数 callback 存在则调用
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
// 回调函数作为实参传入
animate(span, 800, function () {
span.style.backgroundColor = 'pink';
});
4.7 动画函数封装到单独JS文件里面
因为以后经常使用这个动画函数,可以单独封装到一个JS文件里面,使用的时候引用这个JS文件即可。
- 单独新建一个 JS 文件。
- HTML文件引入 JS 文件。
5. 常见网页特效案例
5.1 案例1:轮播图
[!TIP]
轮播图是JS的一个经典案例,建议自己动手实践一遍,项目源码地址:https://hacker-c.github.io/PinYouGou-Shopping/
轮播图也称为焦点图,是网页中比较常见的网页特效。
功能需求:
- 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
- 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。
- 图片播放的同时,下面小圆圈模块跟随一起变化。
- 点击小圆圈,可以播放相应图片。
- 鼠标不经过轮播图,轮播图也会自动播放图片。
- 鼠标经过,轮播图模块,自动播放停止。
5.1.1 总体分析
- 因为 js 较多,我们单独新建 js 文件夹,再新建 js 文件,引入页面中。
- 此时需要添加
load
事件。 - 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
- 显示隐藏
display
按钮。
5.1.2 动态生成小圆圈
- 核心思路:小圆圈的个数要跟图片张数一致
- 所以首先先得到
ul
里面图片的张数(图片放入li
里面,所以就是li
的个数) - 利用循环动态生成小圆圈(这个小圆圈要放入
ol
里面) - 创建节点
createElement('li')
- 插入节点
ol.appendChild(li)
- 第一个小圆圈需要添加
current
类
5.1.3 小圆圈的排他思想
- 点击当前小圆圈,就添加
current
类 - 其余的小圆圈就移除这个
current
类 - 注意:我们在刚才生成小圆圈的同时,就可以直接绑定这个点击事件了。
5.1.4 点击小圆圈滚动图片
- 此时用到
animate
动画函数,将 js 文件引入(注意,因为 index.js 依赖 animate.js 所以,animate.js 要写到index.js 上面) - 使用动画函数的前提,该元素必须有定位
- 注意是
ul
移动而不是小li
- 滚动图片的核心算法:点击某个小圆圈,就让图片滚动小圆圈的索引号乘以图片的宽度做为
ul
移动距离 - 此时需要知道小圆圈的索引号,我们可以在生成小圆圈的时候,给它设置一个自定义属性,点击的时候获取这个自定
义属性即可。
5.1.5 右侧按钮功能
点击右侧按钮一次,就让图片滚动一张。
- 声明一个变量
num
,点击一次,自增 1,让这个变量乘以图片宽度,就是ul 的滚动距离。 - 图片无缝滚动原理
- 把
ul
第一个li
复制一份,放到ul
的最后面 - 当图片滚动到克隆的最后一张图片时,让
ul
快速的、不做动画的跳到最左侧:left
为0 - 同时
num
赋值为0,可以从新开始滚动图片了
5.1.6 克隆第一张图片
- 克隆
ul
第一个li.cloneNode()
加true
深克隆复制里面的子节点(false
:浅克隆) - 添加到
ul
最后面appendChild
5.1.7 点击右侧按钮,小圆圈跟随变化
- 最简单的做法是再声明一个变量
circle
,每次点击自增1,注意,左侧按钮也需要这个变量,因此要声明全局变量。 - 但是图片有5张,我们小圆圈只有4个少一个,必须加一个判断条件
- 如果
circle == 4
就从新复原为 0
5.1.8 自动播放功能
- 添加一个定时器
- 自动播放轮播图,实际就类似于点击了右侧按钮
- 此时我们使用手动调用右侧按钮点击事件
arrow_r.click()
- 鼠标经过
focus
就停止定时器 - 鼠标离开
focus
就开启定时器
5.1.9 节流阀
- 功能:防止轮播图按钮连续点击造成播放过快。
- 原理:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。
- 思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
- 开始设置一个变量:
var flag = true;
if(flag) {flag = false; do something}
:关闭水龙头- 利用回调函数动画执行完毕:
flag = true
打开水龙头
- 开始设置一个变量:
5.2 案例2:返回顶部
5.2.1 window.scroll
滚动窗口至文档中的特定位置:
window.scroll(x, y)
注意:里面的 x
和 y
不跟单位,直接写数字。
5.2.2 带有动画的返回顶部
- 此时可以继续使用我们封装的动画函数
- 只需要把所有的
left
相关的值改为跟页面垂直滚动距离相关就可以了 - 页面滚动了多少,可以通过
window.pageYOffset
得到 - 最后是页面滚动,使用
window.scroll(x, y)
5.2.3 修改后的缓存动画函数
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓冲动画核心算法
let step = target - window.pageYOffset;
step = step >= 0 ? Math.ceil(step / 10) : Math.floor(step / 10);
if (window.pageYOffset === target) {
clearInterval(obj.timer);
callback && callback();
}
window.scroll(0, window.pageYOffset + step);
}, 30);
}
调用:
animate(window, 0);
5.3 案例3:筋斗云
5.3.1 效果
- 鼠标经过某个小
li
,筋斗云跟这到当前小li
位置 - 鼠标离开这个小
li
,筋斗云复原为原来的位置 - 鼠标点击了某个小
li
,筋斗云就会留在点击这个小li
的位置
5.3.2 实现
- 利用动画函数做动画效果
- 原先筋斗云的起始位置是
0
- 鼠标经过某个小
li
,把当前小li
的offsetLeft
位置做为目标值即可 - 鼠标离开某个小
li
,就把目标值设为0
- 如果点击了某个小
li
,就把li
当前的位置存储起来,做为筋斗云的起始位置
核心代码:
var current = 0;
for (var i = 0; i < lis.length; i++) {
// (1) 鼠标经过把当前小li 的位置做为目标值
lis[i].addEventListener('mouseenter', function() {
animate(cloud, this.offsetLeft);
});
// (2) 鼠标离开就回到起始的位置
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current);
});
// (3) 当我们鼠标点击,就把当前位置做为目标值
lis[i].addEventListener('click', function() {
current = this.offsetLeft;
});
}