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)开始。

        // 所以当我们触碰到其他元素        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);

製作阴影 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)`;