Day22 - 鼠标锚点动画生成指南

摘要：效果图第天的练习是一个动画练习，当鼠标移动到锚点处，会有一个白色的色块移动到当前锚点所在的位置。对所有的标签进行事件监听，当鼠标移动到锚点时，会自动触发方法。

本文出自：春哥个人博客：http://www.liyuechun.org
作者：©黎跃春-追时间的人
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 22 篇。完整中文版指南及视频教程在 从零到壹全栈部落。

第22天的练习是一个动画练习，当鼠标移动到锚点处，会有一个白色的色块移动到当前锚点所在的位置。演示图如下所示：

    
    
    




    

    

        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus
            necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!
        
Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat            cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.
        
Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis            ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.
        
Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur
            eveniet sunt quam provident sapiente dicta neque quod.
        
Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio,
            distinctio magni impedit tempore enim repellendus repudiandae quas!
    

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  margin: 0;
  /* Important! */
  font-family: sans-serif;
  background: linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%), linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%), linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%), linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
}

.wrapper {
  margin: 0 auto;
  max-width: 500px;
  font-size: 20px;
  line-height: 2;
  position: relative;
}

a {
  text-decoration: none;
  color: black;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px
}

.highlight {
  transition: all 0.2s;
  border-bottom: 2px solid white;
  position: absolute;
  top: 0;
  background: white;
  left: 0;
  z-index: -1;
  border-radius: 20px;
  display: block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}

.menu {
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: center;
  margin: 100px 0;
}

.menu a {
  display: inline-block;
  padding: 5px;
  margin: 0 20px;
  color: black;
}

通过HTML源码我们不难发现，所有锚点都是由a标签组成，所以在js代码中我们首先先获取所有的a标签对象，将其存储到triggers变量中。

const triggers = document.querySelectorAll("a");

在效果图中高亮状态的小块其实就是一个span标签，在JS代码中创建了一个span标签，并且为其添加了一个highlight的class。

const highlight = document.createElement("span");
highlight.classList.add("highlight");
document.body.appendChild(highlight);

对所有的a标签进行事件监听，当鼠标移动到锚点时，会自动触发highlightLink方法。

triggers.forEach(a => a.addEventListener("mouseenter", highlightLink));

getBoundingClientRect()

getBoundingClientRect

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

语法：

rectObject = object.getBoundingClientRect();

值：
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。

DOMRect属性表：

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

空边框盒（译者注：没有内容的边框）会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 width、height 值为0，left、top值为第一个css盒子（按内容顺序）的top-left值。

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果不希望属性值随视口变化，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的常量值。

highlightLink方法

function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  // console.log(linkCoords);
  
  const coords = {
      width: linkCoords.width,
      height: linkCoords.height,
      top: linkCoords.top + window.scrollY,
      left: linkCoords.left + window.scrollX
  };


  highlight.style.width = `${coords.width}px`;
  highlight.style.height = `${coords.height}px`;
  highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;

}

完结！

Github Source Code