JavaScript提高班笔记(四)，万字解析

| scroll系列属性 | 作用 |

| — | — |

| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |

| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |

| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |

| element.scrollHeight | 返回自身实际的高度，不含边框，返回数值不带单位 |

• 页面被卷去的头部：如果浏览器的高/宽度不足以显示整个页面时，会自动出现滚动条

• 档滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被全局的头部

• 滚动条在滚动时会触发onscroll事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fEVZuYfU-1618802081195)(D:\学习学习学习\JavaScript\JavaScript(四)].assets\image-20210418101124796.png)

4.总结

======================================================================

| 三大系列大小对比 | 作用 |

| — | — |

| element.offsetWidth | 返回自身包括padding，border，内容区的宽度，返回数值不带单位 |

| element.clientWidth | 返回自身包括padding，内容区的宽度，不含border，返回数值不带单位 |

| element.scrollWidth | 返回自身实际的宽度，不含看睹，返回值不带单位 |

• offset系列 经常用于获取元素位置 offsetLeft offsetTop

• client 经常用于获取元素大小 clientWidth clientHeight

• scroll 经常用于获取滚动元素距离 scrollTop scrollLeft

• ==注意：==页面滚动的距离 通过windwo.pageXOffset获得

5.鼠标事件

========================================================================

mouseenter鼠标事件和mouseover鼠标事件的区别：

1. 当鼠标移动到元素上时就会触发mouseenter事件

2. 类似 mouseover，它们两者之间的差别是

• mouseover鼠标经过自身盒子会触发，经过子盒子还会触发

• mousennter只会经过自身盒子触发

3. 之所以这样，就是因为mouseenter不会冒泡

4. 通常mouseenter鼠标移动和mouseleave鼠标离开搭配使用，同样mouseleave也不会冒泡

6.动画函数封装

==========================================================================

6.1动画实现原理

---

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

实现步骤：

1. 获得盒子当前位置

2. 让盒子在当前位置加上1个移动距离

3. 利用定时器不断重复这个操作

4. 加一个结束定时器的条件

5. 注意此元素需要添加定位，因为我们是使用element.style.left让其加上1个移动距离

• 只有定位，才能使用element.style.left

6.2函数封装

---

– 注意函数需要传递2个参数

1. 动画对象

2. 移动到的距离

夏雨荷

6.3给不同元素记录不同定时器

---

• 如果多个元素都使用这个动画函数，每次都要var 声明定时器，我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)

• 核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性

点击夏雨荷才走

夏雨荷

6.4缓动动画

---

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

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

2. 核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离 步长

3. 停止的条件：让当前盒子位置等于目标位置就停止定时器

4. 注意步长值需要取整

点击夏雨荷才走

夏雨荷

• 匀速动画 就是 盒子是当前的位置 + 固定的值 10

• 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

6.5缓存动画多个目标值之间移动

---

点击夏雨荷到500

点击夏雨荷到800

夏雨荷

6.6缓存动画添加回调函数

---

回调函数原理：

• 函数可以作为一个参数，将这个函数作为参数传到另一个函数里面

• 当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调

• 回调函数写的位置：定时器结束的位置

点击夏雨荷到500

点击夏雨荷到800

夏雨荷