iT邦幫忙

1

JS30 Day 16 - Mouse Move Shadow學習筆記

今天要做的功能是當滑鼠移動時,字會產生陰影並跟著滑鼠最對應的位移。

由於今天內容較少,就不一一描述程式碼的部分了。

首先我們要先了解以下幾點觀念:

offsetX, offsetY 是 Event 的屬性,指滑鼠到外層容器的距離。

offsetWidth, offsetHeight 是 Element 的屬性,指該 element 的寬高。

offsetLeft, offsetTop 是 Element 的屬性,指該 element 到 offsetParent 的距離。

我們先利用解構獲取offsetX, offsetY。

        let {
          offsetX,
          offsetY
        } = e;

e.target會指向最深層的元素,也就是我們的大字,而this不用說就是指向我們的.hero。


        console.log(e.target); //  <h1 contenteditable="">?WOAH!</h1>
        console.log(this); // <div class="hero">... </div>

offset會由最從左上角座標開始算起,但由於其特性,當我們鼠標觸碰到其他元素,就會以其元素的左上角座標在重新算起,所以當我們觸碰到大字,座標就會變成(0,0)開始。

https://ithelp.ithome.com.tw/upload/images/20200708/20126182RNmfx8MsPc.png

        // 所以當我們觸碰到其他元素
        if (e.target !== this) {
          // 依照其元素座標再加上缺少的寬高(也就是該元素離上方及左方的距離)加回去
          offsetX += e.target.offsetLeft;
          offsetY += e.target.offsetTop;
        }

有了陰影的位移量後,為了讓陰影正負座標都能移動,故我們利用公式 0 ~ 100 * 2 => 0-100 ~ 200-100 => -100 ~ 100

        // 先將位移量百分比化(offsetX / this.offsetWidth),再將其做整數化(Math.floor) 
        let x = Math.floor((offsetX / this.offsetWidth) * length * 2 - length);
        let y = Math.floor((offsetY / this.offsetHeight) * length * 2 - length);

https://ithelp.ithome.com.tw/upload/images/20200708/20126182f4dExvr5iJ.png

製作陰影 textshadow: offset-x | offset-y | blur-radius | color


        text.style.textShadow = ` ${x * -2 }px ${y * -2}px 5px rgba(255,0,0,0.8),
           ${x * -0.5}px ${ y * -0.5}px 5px rgba(0,255,0,0.8),
           ${x * 2}px ${y * 2}px 5px rgba(0,0,255,0.8),
           ${x * 0.5}px ${y * 0.5}px 5px rgba(0,255,255,0.8)`;


尚未有邦友留言

立即登入留言