我的柜子好像动了之鼠标跟踪事件教程-编程学习网

鼠标跟踪事件测试

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

代码分析

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

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

 
    .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")
      
      const mouseX = e.clientX
      const mouseY = e.clientY
      
      item.forEach(function (sqr) {
        
        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>
    
    * {
      margin: 0;
      padding: 0;
    }
    
    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;
    }
    
    .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")
      
      const mouseX = e.clientX
      const mouseY = e.clientY
      
      item.forEach(function (sqr) {
        
        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>

以上就是我的柜子好像动了之鼠标跟踪事件教程的详细内容，更多关于柜子动了鼠标跟踪事件的资料请关注编程网其它相关文章！

文章详情

我的柜子好像动了之鼠标跟踪事件教程

目录

鼠标跟踪事件测试

代码分析

盒子跟着鼠标各自转起来

具体实现步骤

源码

软考中级精品资料免费领

相关文章

猜你喜欢

我的柜子好像动了之鼠标跟踪事件教程