摘要：效果圖第天的練習(xí)是一個動畫練習(xí)，當(dāng)鼠標(biāo)移動到錨點處，會有一個白色的色塊移動到當(dāng)前錨點所在的位置。對所有的標(biāo)簽進(jìn)行事件監(jiān)聽，當(dāng)鼠標(biāo)移動到錨點時，會自動觸發(fā)方法。

本文出自：春哥個人博客：http://www.liyuechun.org
作者：?黎躍春-追時間的人
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 22 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

第22天的練習(xí)是一個動畫練習(xí)，當(dāng)鼠標(biāo)移動到錨點處，會有一個白色的色塊移動到當(dāng)前錨點所在的位置。演示圖如下所示：

    
    
    




    

    

        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus
            necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!
        
Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat            cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.
        
Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis            ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.
        
Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur
            eveniet sunt quam provident sapiente dicta neque quod.
        
Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio,
            distinctio magni impedit tempore enim repellendus repudiandae quas!
    

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  margin: 0;
  /* Important! */
  font-family: sans-serif;
  background: linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%), linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%), linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%), linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
}

.wrapper {
  margin: 0 auto;
  max-width: 500px;
  font-size: 20px;
  line-height: 2;
  position: relative;
}

a {
  text-decoration: none;
  color: black;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px
}

.highlight {
  transition: all 0.2s;
  border-bottom: 2px solid white;
  position: absolute;
  top: 0;
  background: white;
  left: 0;
  z-index: -1;
  border-radius: 20px;
  display: block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}

.menu {
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: center;
  margin: 100px 0;
}

.menu a {
  display: inline-block;
  padding: 5px;
  margin: 0 20px;
  color: black;
}

通過HTML源碼我們不難發(fā)現(xiàn)，所有錨點都是由a標(biāo)簽組成，所以在js代碼中我們首先先獲取所有的a標(biāo)簽對象，將其存儲到triggers變量中。

const triggers = document.querySelectorAll("a");

在效果圖中高亮狀態(tài)的小塊其實就是一個span標(biāo)簽，在JS代碼中創(chuàng)建了一個span標(biāo)簽，并且為其添加了一個highlight的class。

const highlight = document.createElement("span");
highlight.classList.add("highlight");
document.body.appendChild(highlight);

對所有的a標(biāo)簽進(jìn)行事件監(jiān)聽，當(dāng)鼠標(biāo)移動到錨點時，會自動觸發(fā)highlightLink方法。

triggers.forEach(a => a.addEventListener("mouseenter", highlightLink));

getBoundingClientRect()

getBoundingClientRect

Element.getBoundingClientRect()方法返回元素的大小及其相對于視口的位置。

語法：

rectObject = object.getBoundingClientRect();

值：
返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關(guān)的CSS 邊框集合 。

DOMRect屬性表：

DOMRect 對象包含了一組用于描述邊框的只讀屬性——left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。

空邊框盒（譯者注：沒有內(nèi)容的邊框）會被忽略。如果所有的元素邊框都是空邊框，那么這個矩形給該元素返回的 width、height 值為0，left、top值為第一個css盒子（按內(nèi)容順序）的top-left值。

當(dāng)計算邊界矩形時，會考慮視口區(qū)域（或其他可滾動元素）內(nèi)的滾動操作，也就是說，當(dāng)滾動位置發(fā)生了改變，top和left屬性值就會隨之立即發(fā)生變化（因此，它們的值是相對于視口的，而不是絕對的）。如果不希望屬性值隨視口變化，那么只要給top、left屬性值加上當(dāng)前的滾動位置（通過window.scrollX和window.scrollY），這樣就可以獲取與當(dāng)前的滾動位置無關(guān)的常量值。

highlightLink方法

function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  // console.log(linkCoords);
  
  const coords = {
      width: linkCoords.width,
      height: linkCoords.height,
      top: linkCoords.top + window.scrollY,
      left: linkCoords.left + window.scrollX
  };


  highlight.style.width = `${coords.width}px`;
  highlight.style.height = `${coords.height}px`;
  highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;

}

完結(jié)！

Github Source Code