如影随形、不失风度：原生JS与jQuery实现的延时提醒框

2023-11-06 08:46:45

在现代网页设计中，用户体验是至关重要的。为了让用户在网站上获得更好的体验，我们可以使用各种技巧和技术来增强用户交互。其中，延时提醒框就是一种非常实用的技术。

延时提醒框是一种浮动的提示框，它会在鼠标悬停在某个元素上时显示，当鼠标移开该元素后，提醒框会延迟一段时间后消失。这种效果在展示个人资料信息时非常有用，可以让用户在无需点击的情况下查看相关信息。

在本文中，我们将介绍如何使用原生JavaScript和jQuery来创建一个延时提醒框。该提醒框将鼠标悬停在头像上时显示，当鼠标移开头像后，提醒框会延迟一段时间后消失。此外，当鼠标悬停在提醒框上时，提醒框将不会消失，直到鼠标移出提醒框。

HTML代码

首先，我们需要创建一个id为“head”的标签和一个包含个人资料信息的div标签。div标签的id为“info”。

<div id="head">
  <img src="avatar.png" alt="头像">
</div>

<div id="info">
  <p>姓名：张三</p>
  <p>年龄：20岁</p>
  <p>职业：前端开发工程师</p>
</div>

CSS代码

接下来，我们需要使用CSS来设置提醒框的样式。

#info {
  display: none;
  position: absolute;
  left: 100px;
  top: 100px;
  width: 200px;
  height: 100px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

JavaScript代码

最后，我们需要使用JavaScript来实现提醒框的交互效果。

// 获取头像元素和个人资料元素
const head = document.getElementById('head');
const info = document.getElementById('info');

// 添加鼠标悬停事件监听器到头像元素
head.addEventListener('mouseover', function() {
  // 显示个人资料元素
  info.style.display = 'block';

  // 延迟隐藏个人资料元素
  setTimeout(function() {
    info.style.display = 'none';
  }, 1000);
});

// 添加鼠标悬停事件监听器到个人资料元素
info.addEventListener('mouseover', function() {
  // 阻止个人资料元素消失
  clearTimeout(timeoutId);
});

// 添加鼠标离开事件监听器到个人资料元素
info.addEventListener('mouseout', function() {
  // 延迟隐藏个人资料元素
  timeoutId = setTimeout(function() {
    info.style.display = 'none';
  }, 1000);
});