js实现鼠标悬浮框效果

JavaScript 实现鼠标悬浮框效果的过程主要分为以下几步：

1. 创建 HTML 结构

首先需要在 HTML 中定义框架，例如容器、容器内的内容、触发事件的 DOM 元素等。其中包含一个容器作为悬浮框，在鼠标触发事件后自动显示，同时鼠标移出事件后自动隐藏。

例如：

<div class="parent">
  <button class="trigger">点击出现悬浮框</button>
  <div class="hover-box">这是悬浮框的内容</div>
</div>

2. 使用 CSS 控制样式

接下来，需要使用 CSS 在页面上调整样式，也就是让悬浮框隐藏，当需要时才会动态的显示出来。

例如：

.parent {
  position: relative;
}

.hover-box {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}

3. 使用 JavaScript 添加事件监听

事件监听是 JavaScript 实现悬浮框效果的核心。在页面加载时，需要获取相应的 DOM 元素，然后添加事件监听器。可以添加监听器的事件包括鼠标移入、鼠标移出、点击、双击等事件。在这里我们使用鼠标移入和鼠标移出事件。

例如：

const parent = document.querySelector('.parent');
const trigger = document.querySelector('.trigger');
const hoverBox = document.querySelector('.hover-box');

trigger.addEventListener('mouseenter', () => {
  hoverBox.style.display = 'block';
});

parent.addEventListener('mouseleave', () => {
  hoverBox.style.display = 'none';
});

在这个示例中，我们获取了三个 DOM 元素，分别是 .parent 容器、.trigger 触发器和 .hover-box 悬浮框。然后添加了鼠标移入和鼠标移出事件后，对应的设置了悬浮框的样式属性。移入时将hoverBox.style.display的值改为 block 显示悬浮框,移出时将hoverBox.style.display的值改为 none 隐藏悬浮框。

示例1 - 点击触发悬浮框

例如，在下面这个示例中通过添加点击事件，来显示和隐藏悬浮框：

<div class="parent">
  <button class="trigger">点击出现悬浮框</button>
  <div class="hover-box">这是悬浮框的内容</div>
</div>

.parent {
  position: relative;
}

.hover-box {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}

const parent = document.querySelector('.parent');
const trigger = document.querySelector('.trigger');
const hoverBox = document.querySelector('.hover-box');

function toggleHoverBox() {
  hoverBox.style.display = hoverBox.style.display === 'none' ? 'block' : 'none';
}

trigger.addEventListener('click', toggleHoverBox);

在这个示例中，我们添加了一个名为 toggleHoverBox 的函数，来切换悬浮框的状态。当点击触发器按钮时，将调用此函数，并且判断悬浮框当前是否是显示状态，如果是，则隐藏悬浮框，如果不是，则显示悬浮框。

示例2 - 滑动鼠标触发悬浮框

例如，在下面这个示例中通过监听鼠标滑动事件，来显示和隐藏悬浮框：

<div class="parent">
  <div class="box">鼠标移到这里出现悬浮框</div>
  <div class="hover-box">这是悬浮框的内容</div>
</div>

.parent {
  position: relative;
  width: 400px;
  height: 400px;
}

.box {
  width: 100%;
  height: 100%;
}

.hover-box {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
}

const parent = document.querySelector('.parent');
const hoverBox = document.querySelector('.hover-box');
const box = document.querySelector('.box');

function moveHandler(event) {
  const boxRect = box.getBoundingClientRect();
  const mouseX = event.pageX - window.scrollX;
  const mouseY = event.pageY - window.scrollY;

  if (
    mouseX >= boxRect.left &&
    mouseX <= boxRect.right &&
    mouseY >= boxRect.top &&
    mouseY <= boxRect.bottom
  ) {
    hoverBox.style.display = 'block';
  } else {
    hoverBox.style.display = 'none';
  }
}

parent.addEventListener('mousemove', moveHandler);

在这个示例中，我们使用 mousemove 事件监听鼠标的滑动，然后获取当前鼠标的坐标，并判断鼠标当前是否在 .box 元素内。如果是，则显示悬浮框，否则隐藏悬浮框。