Day28 语法改革！零基础新手也能读懂的JS - JS30-16 Mouse Move Shadow

JS30官网
今天来讲解第十六天吧!这天会学到mousemvoe这个事件以及offset的用法
我们的目标是要让h1这个字体的textshadow可以跟着滑鼠移动，并且中心点在h1这个字体上

我们先来看html

div class="hero">
    <h1 contenteditable>?太神拉</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>

老样子先选择到需要的元素

  const hero = document.querySelector('.hero');
  const text = hero.querySelector('h1');

选取到最外层的div以及h1本身，并且我们要在最外层的区块监听mousemove事件，而mousemove这个事件，是指要滑鼠移动的时候都会监听!

  hero.addEventListener('mousemove', shadow);

function shadow(e) {
    const hash = { w: hero.offsetWidth, h: hero.offsetHeight };
    let move = { x: e.offsetX, y: e.offsetY };
    if (this !== e.target) {
      move.x = move.x + e.target.offsetLeft;
      move.y = move.y + e.target.offsetTop;
    }

    const xWalk = Math.round((move.x / hash.w * walk) - (walk / 2));
    const yWalk = Math.round((move.y / hash.h * 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)
    `;

  }

我们一个一个来看，我们想要先选择到最外层div的offsetWidth以及offsetHeight，也就是这个元素实际的宽与高!

那e就是这个事件，在里面可以看到有offsetX、offsetY其实就是指滑鼠到外层容器的距离!

    if (this !== e.target) {
      move.x = move.x + e.target.offsetLeft;
      move.y = move.y + e.target.offsetTop;
    }

都选择到了之後我们要去判断现在滑鼠是不是在hero这个外层div上，如果不是的话就会是在h1上，那麽我们要加上h1的offsetLeft、offsetTop才会是正确的值，否则滑到h1的时候会有问题。那this就是指绑定监听事件的元素，也就是hero，e.target就是去判断目前滑鼠指在哪一个元素上。

    const xWalk = Math.round((move.x / hash.w * walk) - (walk / 2));
    const yWalk = Math.round((move.y / hash.h * walk) - (walk / 2));

主要是让原本圆点在左上角，改成在h1上才是中心点

    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)
    `;

最後新增textShadow的CSS样式，完成!

今天就讲解到这边，谢谢大家，明天见!