写文章
  1. 码农之家首页
  2. 前端教程

等一下，我的柜子好像动了-鼠标跟踪事件教学

我心飞翔 • • 前端教程 • 阅读 9

鼠标跟踪事件测试

不知道你们知不知道这个梗。等一下，我的柜子好像动了。或者换个内容，这个摄像头Moses好像一直在看着我们！

先看效果

现在让我来详细分析一下这个代码

首先整个页面采用了grid布局，可以看到我们这里有7*7 49个小东西，这种布局怎么最快实现呢？最简单的方法肯定就是网格布局Grid了！

我们设置了一个容器，采取网格布局，7行7列，然后每个格子的大小和间距，格子利用给边框加粗快捷的实现一种美观的效果。当然大家也可以自己再次利用布局，设置盒子。

 /* 布局设置，定义一个 7x7 的网格，每个网格之间有 1.5 像素的间距 */
    .grid {
      display: grid;
      grid-template-columns: repeat(7, 40px);
      grid-template-rows: repeat(7, 40px);
      grid-gap: 1.5rem;
    }

    /* 对每个方格进行样式设置，包括边框、背景颜色和圆角等 */
    .item {
      background-color: rgb(40, 40, 40);
      border-radius: 5px;
      border-left: solid 10px #fff;
    }

然后接着我们就要看这个看这个跟眼睛或者摄像头的东西，其实，也很简单，我们就是采用before，after,伪类给盒子他们加上样式。然后给他们设置好相应的位置。

.item::after,
    .item::before {
      content: '';
      width: 5px;
      height: 5px;
      display: block;
      position: absolute;
      border-radius: 50%;
      left: 20px;
      /* 设置小圆点颜色为红色 */
      background-color: rgb(212, 25, 50);
      /* 设置小圆点阴影 */
      box-shadow: 10px 0 10px rgb(212, 25, 50);
    }

    /* 调整红色小圆点位置 */
    .item::after {
      top: 25px;
    }

    .item::before {
      bottom: 25px;
    }

最重要的js部分来了，接下来我们就要让这些盒子跟着鼠标各自转起来。

要让这些盒子转起来，首先他们肯定要给一个旋转角度，那么这个角度又怎么得到呢？

我们先看一个属性Math.atan2。
Math.atan2 方法是 JavaScript 提供的一个计算弧度的数学函数，它可以根据两个参数的正负情况得到正确的弧度值。它的语法如下所示：

Math.atan2(y, x)

其中 y 参数表示点的纵坐标，x 参数表示点的横坐标。这个方法的返回值是从 X 轴正向起始，到指定点与 X 轴正方向之间的弧度值，返回值范围是从 -π 到 π。对于点 (x, y)，该方法的返回值为 Math.atan(y/x)。不过，在使用 Math.atan(y/x) 计算弧度时，无法处理点位于第二、三象限的情况，导致计算结果不准确，这时候就需要使用Math.atan2。

下面是一些例子：

Math.atan2(1, 1) //等价于 Math.PI/4，约等于 0.7853981633974483
Math.atan2(-1, -1) //等价于 -3*Math.PI/4，约等于 -2.356194490192345
Math.atan2(0, -1) //等价于 Math.PI，约等于 3.141592653589793

我们使用 Math.atan2 方法计算鼠标指针与小方格中心之间的弧度，然后将其转换成角度，用于实现小方格的旋转效果。

具体实现步骤

首先，我们使用 document.querySelector 方法获取所有具有 .item 类的小方格。接下来在鼠标移动事件的回调函数中，我们获取当前鼠标指针的 x 和 y 坐标。然后，我们对所有的小方格进行遍历，针对每个小方格都计算它与鼠标指针之间的距离和角度，并将计算出的角度应用到小方格的 transform 样式中，从而使其得到旋转的效果。

具体来说：

  • 针对每个小方格，我们首先获取它的 x 和 y 坐标。
  • 然后，我们利用当前鼠标指针的位置和小方格的位置计算它们之间的距离和角度。其中，diffX 表示当前鼠标指针与小方格中心的 x 轴距离，diffY 则表示 y 轴距离。我们使用 Math.atan2 方法计算出弧度，然后将其转换为角度并保存在 angle 变量中。
  • 最后，我们将计算得到的旋转角度应用到小方格的 transform 样式中，使其得到旋转的效果。

整个过程比较简单和有趣，让我们一起动手试试吧！

/* 添加鼠标移动事件监听器 */
    document.addEventListener('mousemove', function (e) {
      /* 获取所有的小方格 */
      const item = document.querySelectorAll(".item")

      /* 获取当前鼠标指针的 x、y 坐标 */
      const mouseX = e.clientX
      const mouseY = e.clientY

      /* 对所有小方格应用旋转变换（根据鼠标指针的位置和小方格的位置计算旋转角度） */
      item.forEach(function (sqr) {
        /* 获取当前小方格 x、y 坐标 */
        const sqrX = sqr.offsetLeft
        const sqrY = sqr.offsetTop

        /* 计算当前鼠标指针与小方格中心之间的距离和角度 */
        const diffX = mouseX - sqrX
        const diffY = mouseY - sqrY
        const radians = Math.atan2(diffY, diffX)
        const angle = radians * 180 / Math.PI

        /* 对小方格应用旋转变换 */
        sqr.style.transform = `rotate(${angle}deg)`
      })
    })

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标跟踪</title>
  <style>
    /* 重置所有的 CSS 样式 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 设置 body 元素为 Flexbox 容器，显示在页面中央 */
    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 设置页面背景颜色 */
      background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.f72ebc03612025e1666bcf4cfb7794bc?rik=%2fG74O%2bGxpgNvVA&riu=http%3a%2f%2fimage.qianye88.com%2fpic%2f0d9dbd3e0ee0298de8ba8fdcd0ab1622&ehk=dJOIpVyAXOvVy0xV8e35jpxDECDI5OyMEaQwJm%2fLncM%3d&risl=&pid=ImgRaw&r=0);
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    /* 布局设置，定义一个 7x7 的网格，每个网格之间有 1.5 像素的间距 */
    .grid {
      display: grid;
      grid-template-columns: repeat(7, 40px);
      grid-template-rows: repeat(7, 40px);
      grid-gap: 1.5rem;
    }

    /* 对每个方格进行样式设置，包括边框、背景颜色和圆角等 */
    .item {
      background-color: rgb(40, 40, 40);
      border-radius: 5px;
      border-left: solid 10px #fff;
    }

    /* 在每个方格的四周添加红色小圆点，用于增加美观度 */
    .item::after,
    .item::before {
      content: '';
      width: 5px;
      height: 5px;
      display: block;
      position: absolute;
      border-radius: 50%;
      left: 20px;
      /* 设置小圆点颜色为红色 */
      background-color: rgb(212, 25, 50);
      /* 设置小圆点阴影 */
      box-shadow: 10px 0 10px rgb(212, 25, 50);
    }

    /* 调整红色小圆点位置 */
    .item::after {
      top: 25px;
    }

    .item::before {
      bottom: 25px;
    }
  </style>
</head>

<!-- Body 部分，包含一个网格容器和 JavaScript 代码 -->
<body>
  <!-- 网格容器，包含 49 个小方格，用作鼠标移动跟踪的表现 -->
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <!-- JavaScript 代码，监听鼠标移动事件并实现动态效果 -->
  <script>
    /* 添加鼠标移动事件监听器 */
    document.addEventListener('mousemove', function (e) {
      /* 获取所有的小方格 */
      const item = document.querySelectorAll(".item")

      /* 获取当前鼠标指针的 x、y 坐标 */
      const mouseX = e.clientX
      const mouseY = e.clientY

      /* 对所有小方格应用旋转变换（根据鼠标指针的位置和小方格的位置计算旋转角度） */
      item.forEach(function (sqr) {
        /* 获取当前小方格 x、y 坐标 */
        const sqrX = sqr.offsetLeft
        const sqrY = sqr.offsetTop

        /* 计算当前鼠标指针与小方格中心之间的距离和角度 */
        const diffX = mouseX - sqrX
        const diffY = mouseY - sqrY
        const radians = Math.atan2(diffY, diffX)
        const angle = radians * 180 / Math.PI

        /* 对小方格应用旋转变换 */
        sqr.style.transform = `rotate(${angle}deg)`
      })
    })
  </script>

原文链接：https://juejin.cn/post/7230078756625711164 作者：Mr-Wang-Y-P

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2023年5月7日 上午10:05
下一篇 2023年5月7日 上午10:15

相关推荐

发表回复

登录后才能评论