# 【JS30】Day16 - Mouse Move Shadow
本次範例要做的功能是陰影跟著滑鼠游標移動而移動。
老樣子，先把DOM選起來。

 const hero = document.querySelector('.hero');
  const text = hero.querySelector('h1');
  const walk = 100; // 100px 這個數字影響陰影移動的幅度

監聽DOM，mousemove事件時，觸發shadow函式。

hero.addEventListener('mousemove', shadow);

開始定義函式：

function shadow(e) {
    const { offsetWidth: width, offsetHeight: height } = hero;
    let { offsetX: x, offsetY: y } = e;

      // 如果在目標區域外，則在加上目標座標值
      if (this !== e.target) {
        x = x + e.target.offsetLeft;
        y = y + e.target.offsetTop;
      }

    const xWalk = Math.round((x / width * walk) - (walk / 2));
    const yWalk = Math.round((y / height * walk) - (walk / 2));

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

  }

從這邊開始有很多容易混淆的地方...
## this 和 e.target
* this 是**被監聽的對象本身**。也就是 ```element.addEventListener(<eventHandler>) ```的 element。
* e.target 則是指**事件被觸發時的對象**，有可能不是 element 本身。

## 瀏覽器座標
瀏覽器座標真的是很費工夫搞懂的東西，page、offset、client、innerheight等等的。
至少要理解的座標系統有3個。
1. page
2. offset
3. client
但我會另外打成一篇：[一次搞懂瀏覽器座標](https://)

## ES6的解構賦值

const {offsetWidth: heroWidth, offsetHeight: heroHeight} = hero;
let {offsetX: offsetXAfterAdjust, offsetY: offsetYAfterAdjust} = e;

等於下方寫法：

  const heroWidth = hero.offsetWidth
  const heroHeight = hero.offsetHeight
  let e.offsetX = x
  let e.offsetY = y

## 決定陰影移動位置
Math.round()是js中，可以把數字轉換成整數的方法。(Math還有很多方法可用。)

const xWalk = Math.round((x / width * walk) - (walk / 2));
const yWalk = Math.round((y / height * walk) - (walk / 2));

這邊的寫法讓我納悶已久。總之，要先搞懂瀏覽器座標就會懂囉。
把程式轉換成：

const xWalk = Math.round((e.offsetX / width * 100) - (100 / 2));
const yWalk = Math.round((e.offsetY / height * 100) - (100 / 2));

因為 offsetX, offsetY 是 event 的屬性，所以當它進入到``` <h1>``` 時，offsetX 指的是該滑鼠游標（e）到容器（h1）外層的距離（滑鼠游標 <-> h1）。
width跟height是h1的寬、高。

所以，```e.offsetX```、```e.offsetＹ / height```會是比例：**（滑鼠游標到h1的距離／h1寬或高）**
因為是比例所以乘以100，當然不一定是100，變數walk是移動幅度的基準大小。
減掉(walk/2)是要找中心點，從中心點開始讓陰影移動。

## text-shadow
屬性配置：

offset-x | offset-y | blur-radius(羽化) | spread-radius(擴張) | color | inset

用ES6寫法，在js改變text的style

text.style.textShadow = `${xWalk}px ${yWalk}px 10px rgba(130, 130, 130, 0.5)`;