本篇作者：©大史不说话——Chinasoft Frontend Web Developer
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 22 篇。完整指南在 GitHub，喜欢请 Star 哦♪(^∇^*)
创建时间：2017-09-12
最后更新：2017-09-16
初始文档index-start.html提供了一组使用<ul>及<li>标签包裹的导航标签。本次的编程挑战任务是完成如下动画效果：当鼠标移动至某个对应标签上时，为标签添加一个白色的背景框，高亮表示该标签被选中，当鼠标移动至其他标签后，白色背景框不消失，而是直接跟随鼠标平移至新的标签，实现效果见下图展示。
Element.getBoundingClientRect()
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
返回值是一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合, 即：是与该元素相关的CSS边框集合。DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
DOMRect相关属性:
| Attribute | Type | Description |
|---|---|---|
| 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）的距离。只读。 |
1.生成一个绝对定位的块元素，在后续改变其top及left坐标值移动至对应标签处，来呈现不同标签被激活的效果;
2.鼠标移动至<li>标签后，使用Element.getBoundingClientRect()方法获得该标签的位置信息;
3.将获得的<li>的top及left值赋给绝对定位块元素，使其移动至被激活的标签，位于标签文字下方。
1.生成绝对定位块元素
var activeBackground = document.createElement('span');
activeBackground.setAttribute('class','highlight');
document.body.appendChild(activeBackground);
//避免第一次激活时跳动,如果没有此句，可以看到第一次标签被激活时，块元素会从左上角移动至对应标签处。
activeBackground.style.display = 'none';2.使用Element.getBoundingClientRect()方法获得对应标签的位置信息
function lightOn(e){
var activeLink = e.target.getBoundingClientRect();
var coords = {
height:activeLink.height,
width:activeLink.width,
left:window.pageXOffset + activeLink.left,
top: window.pageYOffset + activeLink.top
}
activeBackground.style.height = `${coords.height}px`;
activeBackground.style.width = `${coords.width}px`;
activeBackground.style.left = `${coords.left}px`;
activeBackground.style.top = `${coords.top}px`;
activeBackground.style.display = 'inline';
}3.将点亮函数与标签的鼠标移入事件绑定
//监听鼠标移入事件及鼠标移出事件
for(var i = 0; i < len; i++){
oLi[i].onmouseenter = lightOn;
}