来做一个跟屁虫镁光灯

标题听起来很厉害(?)，不过今天只需要认识一个 Web API - Element.getBoundingClientRect()～

getBoundingClientRect

此元素方法会回传一个DOMRect物件，物件中会包含选取元素的尺寸和坐标资讯，除了元素的高度和宽度以外，其他的属性都会依据元素当下相对 viewport 的左上角计算距离

换句话说，当上下滚动页面时，y / top的距离会变动，左右滚动页面时，x / left的距离会变动
可以用codepen连结观察看看

在有滚动页面的情况下，要取得特定元素相对於文件（Document）左上角的位置时就需要加上滚动的距离，计算公式如下：

元素相对於文件的水平距离： x / left + window.scollX
元素相对於文件的垂直距离： y / top + window.scrollY

图片来源：MDN

• width: 选取元素的宽度
• height: 选取元素的高度
• x / left: 元素左上角相对视窗的水平距离
• right: 元素右下角相对视窗的距离
• y / top: 元素左上角相对视窗的垂直距离

实作练习

注：以下练习来自於 JavaScript 30

原理及步骤：

1. 建立一个跟着游标走的镁光灯元素<span>并加入到页面中

const spotlight = document.createElement('span');
document.body.append(spotlight);
spotlight.classList.add('spotlight');

2. • 镁光灯元素必须依照点选的连结大小（宽度＆高度）变换
   • 当页面卷动时，需要校正镁光灯元素位置
   • 当滑鼠进入连结位置，替镁光灯设置一样的座标

function highlightLink() {
  const linkInfo = this.getBoundingClientRect();
  
  // 位置校正
  const coordinate = {
    width: linkInfo.width,
    height: linkInfo.height,
    left: linkInfo.left + scrollX,
    top: linkInfo.top + scrollY,
  }
  
  spotlight.style.width = `${coordinate.width}px`;
  spotlight.style.height = `${coordinate.height}px`;
  spotlight.style.transform = `translate(${coordinate.left}px, ${coordinate.top}px)`;
}

3. 将所有连结绑上事件监听器，并在滑鼠进入元素时触发

const links = document.querySelectorAll('a');

links.forEach(link => {
  link.addEventListener('mouseenter', highlightLink);
})

codepen连结

参考资料：

MDN
JavaScript30