課程目的:

這次的內容是，捕捉滑鼠的滑動，使陰影跟著文字滑動的效果

本次功能實作重點：

• 選取元素以及監聽
• shadowHandle(e)程式邏輯

選取元素以及監聽

let hero = document.querySelector(".hero"); 
let text = hero.querySelector("h1");
let walk = 200; //設定偏移的量
      
hero.addEventListener("mousemove", shadowHandle);

shadowHandle(e)程式邏輯

function shadowHandle(e) {
        let { offsetX, offsetY } = e; //取得e.offsetX,e.offsetY
        
        if (e.target !== this) {
          offsetX += e.target.offsetLeft;
          offsetY += e.target.offsetTop;
        }

        let walkX = Math.floor((offsetX / this.offsetWidth) * walk) * 2 - walk;
        let walkY = Math.floor((offsetY / this.offsetHeight) * walk) * 2 - walk;

        text.style.textShadow = `${walkX}px ${walkY}px 2px rgba(255,0,255,0.7),
        ${walkX * -1}px ${walkY * -1}px 2px rgba(0,255,0,0.7),
        ${walkY * -1}px ${walkX}px  2px rgba(0,255,255,0.7),
        ${walkY}px ${walkX * -1}px 2px rgba(0,0,255,0.7)`;
      }

if (e.target !== this) 如果滑鼠位於 .hero 元素的子元素（如 h1 標籤）上，而不是直接在 .hero 元素上，則需要調整 offsetX 和 offsetY。為了讓計算基於 .hero 元素的相對位置，它加上了子元素相對於 .hero 的偏移量，即 e.target.offsetLeft 和 e.target.offsetTop。

let walkX :

(offsetX / this.offsetWidth)*walk 計算鼠標在元素寬度上的相對位置，是一個介於0到1之間的小數，再乘以一個定義的範圍值 walk（ 200），用來擴大滑鼠位置的影響範圍，將相對位置轉換成陰影移動的像素距離。

Math.floor(...)* 2 去掉值的浮點數，以保證陰影偏移量是整數，*2是因為陰影會向兩個方向移動，將其擴大兩倍以增強效果。
- walk 確保陰影偏移量可以是正或負數，從而讓陰影既能往左移動也能往右移動，使移動的範圍為-walk到+walk。

text.style.textShadow 設定文字的陰影

最後重點整理 ：

• 雖然監聽hero元素，但是當點擊時e.target會子元素不同而對應當下子元素
• walk： 讓陰影偏移量既能向正方向移動，也能向負方向移動。