課程目的:

這次的內容是，當我們滑鼠滑動到灰色的區塊，白色滑塊會移動到我們的指定位置
作品實做

本次功能實作重點：

• 選取DOM元素
• 當滑鼠滑動到相對應的區塊時，白色滑塊移動到那個元素
• 當監聽到畫面尺寸改變，重新定義白色滑塊的位置

選取DOM元素

 let target = document.querySelectorAll("a");
 let highlight = document.createElement("span");

當滑鼠滑動到相對應的區塊時，白色滑塊移動到那個元素

 let now = null;
 highlight.classList.add("highlight");
 document.body.appendChild(highlight); //把 highlight(白色滑塊)元素添加到網頁的內容中

      function highlightHandler() {
        now = this; //now儲存點擊到的a標籤
        setPosition();
      }

      function setPosition() {
        if (!now) return; //如果now是假值，則return
        let { top, left, width, height } = now.getBoundingClientRect();
        //解構賦值取出屬性
        highlight.style.display = "";
        highlight.style.width = `${width}px`;　//定義滑快的寬
        highlight.style.height = `${height}px`; //定義滑快的高
        highlight.style.top = `${top + window.scrollY}px`; //定義在網頁中的Y座標
        highlight.style.left = `${left + window.scrollX}px`;//定義在網頁中的X座標
      }

      target.forEach((a) => a.addEventListener("mouseenter", highlightHandler)); //碰到頁面中的A標籤時

a.addEventListener("mouseenter", highlightHandler)) 監聽滑鼠滑動到a標籤時，執行highlightHandler

elem.getBoundingClientRect() 提供了元素的大小及其相對於視窗的位置。並回傳一個 DOMRect 物件，其中包含了 left/top/right/bottom/x/y/widthheigh/twidthheight等屬性。
highlight.style.display = "block"這一行的意思是將 highlight 元素的 display 屬性設置為block，讓白色滑塊可以顯示出來

當監聽到畫面尺寸改變，重新定義白色滑塊的位置

window.addEventListener("resize", setPosition);

導讀文件以及學習資源

[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 22：Follow Along Link Highliter
JS30