JavaScript 30 Day -- 15 文字阴影

实现效果：

文字阴影的鼠标随动效果

关键点：

1.在script标签中，我们使用3个变量，一个指向div元素，一个指向其子元素h1，最后一个变量factor用于标记阴影距离h1中心的距离和鼠标距离h1中心距离的比例，用于计算阴影的具体位置。

2.在hero元素上监听鼠标移动事件mousemove，并添加事件处理的回调函数shadowMove.

hero.addEventListener('mousemove',shadowMove);

3.为获得第一个阴影的瞬时位置，需要通过鼠标位置距离h1中心的距离乘以factor系数来获得，pos表示鼠标当前位置的坐标,range指代hero元素的宽和高：

var disX = parseInt((pos.x-range.x/2)*factor);
var disY = parseInt((pos.y-range.y/2)*factor);

4.从事件发生的event对象中获取需要的值：

var range = {
  x:hero.offsetWidth,
  y:hero.offsetHeight
}
var pos = {
  x:e.target.offsetLeft+e.offsetX,
  y:e.target.offsetTop+e.offsetY
}

5.计算出h1元素第一个阴影位置后，可以以坐标镜像或旋转90°等不同的方式来生成其他阴影，本例中我们采用绕h1元素中心旋转90°的方式共生成4个阴影：

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

javascript

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

  function shadow(e){
    // console.log(e);
    // const width = hero.offsetWidth;
    // const height = hero.offsetHeight;
    const { offsetWidth:width,offsetHeight:height } = hero;
    // console.log(hero);

    let { offsetX:x,offsetY:y } = e;
    // console.log(e); 
    if(this !== e.target){
      // console.log(e);
      x = x + e.target.offsetLeft;
      y = y + e.target.offsetTop;
    }
    // console.log(x,y);
    const xWalk = Math.round(( x / width * walk) - ( walk / 2));
    const yWalk = Math.round(( y / height * walk) - ( walk / 2));
    // console.log(xWalk,yWalk);
    text.style.textShadow = `
      ${xWalk}px ${yWalk}px 0px rgba(255,0,255,0.6),
      ${xWalk * - 1}px ${yWalk}px 0px rgba(0,0,255,0.6),     
      ${yWalk}px ${xWalk * - 1}px 0px rgba(0,0,0,0.6),
      ${yWalk * - 1}px ${xWalk}px 0px rgba(255,0,0,0.6)
    `
   }
  hero.addEventListener('mousemove',shadow);

var hero = document.querySelector('.hero');
var text = hero.querySelector('h1');
var factor = 0.4;//当鼠标移动至显示区域边界时，阴影距离占hero元素宽和高的比例
//在div范围内监听
hero.addEventListener('mousemove',shadowMove);

//文字阴影效果及移动函数
function shadowMove(e){
    var range = {
      x:hero.offsetWidth,
      y:hero.offsetHeight
    }
    var pos = {
      x:e.target.offsetLeft+e.offsetX,
      y:e.target.offsetTop+e.offsetY
    }
    //计算阴影移动距离
    var disX = parseInt((pos.x-range.x/2)*factor);
    var disY = parseInt((pos.y-range.y/2)*factor);
    //修改阴影样式
    text.style.textShadow = disX+'px '+disY+'px 0 #3498db,'+(-disX)+'px '+disY+'px 0 #1abc9c,'+disY+'px '+(-disX)+'px 0 #9b59b6,'+(-disY)+'px '+(-disX)+'px 0 #e74c3c';
}