Day22 - 鼠标锚点动画生成指南
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果如下
第22天的练习是一个动画练习,当鼠标移动到锚点处,会有一个白色的色块移动到当前锚点所在的位置。演示图如下所示:
HTML源码
1 |
|
CSS源码
1 | html { |
JS源码
1 | <script> |
代码解释
- 通过HTML源码我们不难发现,所有锚点都是由
a
标签组成,所以在js
代码中我们首先先获取所有的a
标签对象,将其存储到triggers
变量中。
1 | const triggers = document.querySelectorAll('a'); |
- 在效果图中高亮状态的小块其实就是一个
span
标签,在JS代码中创建了一个span
标签,并且为其添加了一个highlight
的class
。
1 | const highlight = document.createElement('span'); |
- 对所有的
a
标签进行事件监听,当鼠标移动到锚点时,会自动触发highlightLink
方法。
1 | triggers.forEach(a => a.addEventListener('mouseenter', highlightLink)); |
getBoundingClientRect()
Element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置。
语法:
1 | rectObject = object.getBoundingClientRect(); |
值:
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。
DOMRect属性表:
属性 | 类型 | 描述 |
---|---|---|
bottom | float | Y 轴,相对于视口原点(viewport origin)矩形盒子的底部。只读。 |
height | float | 矩形盒子的高度(等同于 bottom 减 top)。只读。 |
left | float | X 轴,相对于视口原点(viewport origin)矩形盒子的左侧。只读。 |
right | float | X 轴,相对于视口原点(viewport origin)矩形盒子的右侧。只读。 |
top | float | Y 轴,相对于视口原点(viewport origin)矩形盒子的顶部。只读。 |
width | float | 矩形盒子的宽度(等同于 right 减 left)。只读。 |
x | float | X轴横坐标,矩形盒子左边相对于视口原点(viewport origin)的距离。只读。 |
y | float | Y轴纵坐标,矩形盒子顶部相对于视口原点(viewport origin)的距离。只读。 |
DOMRect
对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
空边框盒(译者注:没有内容的边框)会被忽略。如果所有的元素边框都是空边框,那么这个矩形给该元素返回的 width、height 值为0,left、top值为第一个css盒子(按内容顺序)的top-left值。
当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果不希望属性值随视口变化,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的常量值。
highlightLink
方法
1 | function highlightLink() { |
完结!