青训营 X 码上掘金 - 我的名片

Hor1zon
37 阅读3分钟

当青训营遇上码上掘金

创作背景

青训营报名时看到了这个活动，当时还很菜的我一直感觉这个东西很难搞的样子，就一直拖到现在（当然现在依然很菜……）。学习很久之后再回来看这个活动时突然有了灵感，于是打开码上掘金就开搞。

目标

我想做的是一种类似悬停qq头像时出现的小名片的一个东西，鼠标悬停头像时弹出名片，移开时关掉它。有时候需要复制其中内容时我们希望它一直显示，所以理想的情况是点击头像后名片会一直被展示出来。

在大多数情况下，头像都是圆形的，因此这里的头像也要设置成圆形的。为了让弹出的卡片好看一点，我们希望它圆润而又简约，最好有一些好看的背景。

实现

首先是要画出两个主要的元素，圆圆的头像框和方方的卡片。css中的border-radius参数是个非常好用的东西，能够让世界变得圆润起来。它能够使用px作为单位，也能使用百分比，对于圆形和圆角矩形来说很好控制弧度大小。卡片的背景板我使用了渐变色，偶然间发现原来渐变色用起来还是相当好看的。

当然，卡片上的字也要好看一点，选一个不错的字体和大小。哦对，头像框和卡片大小也要搞一下～

<div class='box'>
  <img class='circle'/>
  <div class='card'>
    <div class='content'>
      <div>姓名：Hor1zon</div>
      <div>工作：在校大学生</div>
      <div>学习方向：前端开发</div>
    </div>
  </div>
</div>

.box {
  display: flex;
  justify-content: center;
}

.circle {
  margin: 10px;
  width: 60px;
  height: 60px;
  background-image: url('https://p3-passport.byteimg.com/img/user-avatar/93a347809f35498104ad483ec60ce1be~100x100.awebp');
  border-radius: 50%;
}

.card {
  width: 300px;
  height: 150px;
  background-image: linear-gradient(45deg,  rgb(0, 157, 255), rgb(255, 255, 255));
  border-radius: 30px;
  visibility: hidden;
}

.content {
  padding: 30px;
  font-family:"Times New Roman", Times, serif;
  font-size: 20px;
}

接下来是逻辑部分，我们需要实现鼠标悬停头像时触发一个改变卡片属性的事件。选择dom中的头像与卡片元素，对他们处理改变属性的操作。

const circle = document.querySelector('.circle');
const card = document.querySelector('.card');

circle.addEventListener('mouseover', () => {
  card.style.visibility = 'visible';
});

circle.addEventListener('mouseout', () => {
  card.style.visibility = 'hidden';
});

要想实现点击后卡片一直显示，我们还需要用一个flag去记录是否点击过头像。如果点击过，要让移开头像时的事件失效，这里可以让flag去记录卡片是否被点击而一直显示。修改一下原来的两个函数，这部分逻辑并不算很复杂。

const circle = document.querySelector('.circle');
const card = document.querySelector('.card');

let flag = true;

circle.addEventListener('mouseover', () => {
  if (flag) card.style.visibility = 'visible';
});

circle.addEventListener('mouseout', () => {
  if (flag) card.style.visibility = 'hidden';
});

circle.addEventListener('click', () => {
  if (flag) {
    card.style.visibility = 'visible';
    flag = false;
  } else {
    card.style.visibility = 'hidden';
    flag = true;
  }
})

最后

我们最终实现了一个简单的具有悬停展示功能的名片。它很简陋……但其实还好，我已经尽力让它好看一些了，当然还能填充更复杂也更漂亮的样式，也能写更多代码去让这个名片有更多有意思的功能。

之前一直在用各种现成的组件去堆页面，已经不记得如何去使用原生js之类的去写一些底层的东西。这个活动让我也认识到了那些很基础的东西其实是很重要的，有了这些内容同样也能让我在使用现成组件写东西时能够理解其底层逻辑，减少一些可能的bug。

成果：

avatar
文章
阅读
粉丝