Mouse Move Shadow

这个模块内容根据标题就能看出来，就是鼠标移动的阴影，主要效果就是当鼠标光标在页面上任意位置进行移动的时候，页面会产生一些不同于当前图标颜色的阴影进行跟随移动。

一、效果展示

1.index-START.html

这个初始化文档里边，原作者已经写好了静态效果，就是单纯的一个静态页面，控制台也没有任何的内容，后边的内容就是根据。

2.index-FINISHED.html

这就是原作者的最终结果，会发现页面内容会跟着鼠标光标的移动而发生改变。

二、实现

最终代码

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mouse Shadow</title>
</head>
<body>

  <div class="hero">
    <h1 contenteditable>🔥WOAH!</h1>
  </div>

  <style>
  html {
    color: black;
    font-family: sans-serif;
  }

  body {
    margin: 0;
  }

  .hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
  }

  h1 {
    text-shadow: 10px 10px 0 rgba(0,0,0,1);
    font-size: 100px;
  }
  </style>

<script>
  (function(){
      let lenth = 100;
      let text = document.querySelector("h1");
      document.querySelector(".hero").addEventListener("mousemove",function(e){
        console.log(e);

        // No.1 old school
        // let x = e.offsetX;
        // let y = e.offsetY;

        // No.2 new school
        let {offsetX,offsetY} = e;

        //No.3 newnew school
        // let {offsetX:x, offsetY:y} = e;

        if(e.target !== this){
          offsetX += e.target.offsetLeft;
          offsetY += e.target.offsetTop;
        }

        let lengthX = Math.floor((offsetX / this.offsetWidth) *length)*2 - length;
        let lengthY = Math.floor((offsetY / this.offsetHeight) * length)*2 - length;

        text.style.textShadow = `
        ${lengthX}px ${lengthY}px 0 rgba(255,0,255,0.7),
      ${lengthX * -1}px ${lengthY}px 0 rgba(0,255,255,0.7),
      ${lengthY}px ${lengthX * -1}px 0 rgba(0,255,0,0.7),
      ${lengthY * -1}px ${lengthX}px 0 rgba(0,0,255,0.7)
        `;
      });
  })()
</script>
</body>
</html>

三、总结回顾

过程分解

1.获取元素

const hero = document.querySelector(".hero");

2.添加监听事件

hero.addEventListener("mousemove",heroHandler);

在以往这两个步骤都是分开来做的，但是一直这样写就感觉写起来还是有点浪费的，所以可以把这两个合并起来进行去操作，这样看起来比较整齐一些。

document.querySelector(".hero").addEventListener("mousemove",function(){
        
      })

同样的，首先来看一下里边都有什么可以操作的属性，然后再对症下药，做到知其然而知其所以然。

document.querySelector(".hero").addEventListener("mousemove",function(e){
        console.log(e);
      })

在里边找到了众多属性，选择了红色圈出的 offsetX 和 offsetY 。

功能实现

计算坐标

        if(e.target !== this){
          offsetX += e.target.offsetLeft;
          offsetY += e.target.offsetTop;
        }

可能直接看代码不是十分明显，通过一张图来说明一下：上面的这个图大概将这个计算过程进行了说明，里边的红色长方形部分就是图中要操作的图标大小，这个图标的左上角位置就是 offsetX 和 offsetY 的（0,0）坐标点位置，而并不是大家所理解的正常的整个页面的左上角的位置为坐标原点（0,0），但是我们需要的并不是 offsetX 和 offsetY 的坐标点进行计算，我们需要的是真正的真整个页面的坐标原点，所以这个时候就要看一下，（offsetX,offsetY）的坐标位置在不在整个页面的左上角，如果不在就要将距离 X 轴的 0 点的距离和距离 Y 轴 0 点的距离进行计算，所以上边的这一段代码就做了这样一件事情。

添加阴影颜色

        let lengthX = Math.floor((offsetX / this.offsetWidth) *length)*2 - length;
        let lengthY = Math.floor((offsetY / this.offsetHeight) * length)*2 - length;

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

这里的颜色设置，我沿用了原作者的，大家有兴趣的可以进行自己不断尝试，毕竟想要实现类似的效果还是有很多中样式的，这只是其实的一种罢了。

四、重难点

ES6 基础语法

《ES6 标准入门》这本书,完全免费在线观看，内容非常详尽，适合新手阅读。

MouseEvent.offsetX 和 MouseEvent.offsetY

MDN 学习了解地址：

developer.mozilla.org/zh-CN/docs/…

JavaScript 30天编码挑战——第 16 天