16 文字阴影的鼠标随动效果

本篇作者：©大史快跑Dashrun——Chinasoft Frontend Web Developer

简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 16 篇。完整指南在 GitHub，喜欢请 Star 哦♪(^∇^*)

创建时间：2017-08-20
最后更新：2017-08-21

挑战任务

初始文件index-start.html中提供了一个包含了h1元素的div元素，h1元素已经设置了text-Shadow的样式。本次编程挑战中需要完成的效果是根据用户当前的鼠标位置来操纵文字阴影的位置。

实现效果

结果展示

基本知识

text-shadow样式为标准CSS3样式，用于添加一个或多个文字阴影，用于其的语法格式为：

  1. text-shadow: h-shadow v-shadow blur color

过程指南

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

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

  1. hero.addEventListener('mousemove',shadowMove);

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

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

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

  1.     var range = {
  2.       x:hero.offsetWidth,
  3.       y:hero.offsetHeight
  4.     }
  5.     var pos = {
  6.       x:e.target.offsetLeft+e.offsetX,
  7.       y:e.target.offsetTop+e.offsetY
  8.     }

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

  1.     text.style.textShadow = `
  2.       ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
  3.       ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
  4.       ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
  5.       ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
  6.     `;