实现鼠标滑动遮罩层移动的炫酷效果

前端

2023-11-23 16:10:15

遮罩层随鼠标移动的魔法

欢迎来到令人惊叹的网页视觉效果的世界，在这里，我们将深入探寻如何创建遮罩层，它将跟随你鼠标的每一次移动！

什么是遮罩层？

想象一下，在你网页上有一层半透明的覆盖层，当鼠标悬停在其上时，它就会随着鼠标移动而移动。这就是遮罩层，它是一个超酷的视觉元素，可以为你的网站增添趣味和互动性。

如何实现它？

创造遮罩层的魔法分为三个简单的步骤：

1. 打造你的遮罩层

创建一个 div 元素并为其指定一个 ID 或 class，以便用 JavaScript 控制它。

2. 美化遮罩层

使用 CSS 样式为你的遮罩层添加颜色、透明度和位置等风格。

3. 监听鼠标位置

用 JavaScript 监听鼠标移动，获取它的 x 和 y 坐标。

4. 移动你的遮罩层

根据鼠标位置，使用 JavaScript 调整遮罩层的 left 和 top 属性，使其追随鼠标。

增添炫酷效果

除了基本的移动功能，我们还可以为遮罩层添加一些额外的效果：

1. 鼠标移入/移出

使用 JavaScript 监听鼠标进入和离开遮罩层的事件，并在鼠标进入时显示遮罩层，在鼠标离开时隐藏遮罩层。

代码示例

为了帮助你快速上手，这里有一个代码示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    #mask {
      width: 100px;
      height: 100px;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      display: none;
    }
  </style>
</head>
<body>
  <div id="mask"></div>
  <script>
    const mask = document.getElementById("mask");

    mask.addEventListener("mouseover", () => {
      mask.style.display = "block";
    });

    mask.addEventListener("mouseout", () => {
      mask.style.display = "none";
    });

    document.addEventListener("mousemove", (e) => {
      mask.style.left = e.clientX + "px";
      mask.style.top = e.clientY + "px";
    });
  </script>
</body>
</html>