一、学习内容
mouseenter 事件在定点设备（通常指鼠标）首次移动到[color=var(--text-link)]元素的激活区域内时，在该元素上触发。
[color=var(--code-token-punctuation)]mouseleave 事件在定点设备（通常是鼠标）的指针移出某个[color=var(--text-link)]元素时被触发。
[color=var(--code-token-punctuation)]区别：
mouseover 和 mouseout存在事件冒泡
mouseenter 和 mouseleave不存在事件冒泡
只读属性 Element.clientHeight 对于没有定义 CSS 或者内联布局盒子的元素为 0；否则，它是元素内部的高度（以像素为单位），包含内边距，但不包括边框、外边距和水平滚动条（如果存在）。clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度（如果存在）来计算。
只读属性 Element.clientWidth 对于内联元素以及没有 CSS 样式的元素为 0；否则，它是元素内部的宽度（以像素为单位）。该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在）。在根元素（<html> 元素）或怪异模式下的 <body> 元素上使用 clientWidth 时，该属性将返回视口宽度（不包含任何滚动条）。
Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于 overflow 溢出而在屏幕上不可见的内容。
scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与[color=var(--text-link)]clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如[color=var(--text-link)]::before或[color=var(--text-link)]::after。如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于[color=var(--text-link)]clientWidth
Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight 值与元素视图填充所有内容所需要的最小值[color=var(--text-link)]clientHeight相同。包括元素的 padding，但不包括元素的 border 和 margin。scrollHeight 也包括 [color=var(--text-link)]::before 和 [color=var(--text-link)]::after这样的伪元素。 如果元素的内容不需要垂直滚动条就可以容纳，则其 scrollHeight 等于{{domref("Element.clientHeight", "clientHeight")}}
动画的实现思路：
动画库的封装
原理：元素本身的偏移量的基础上加1。
|
