SoFunction
Updated on 2025-04-14

My cabinet seems to be moving and the mouse tracking event tutorial

Mouse tracking event testing

I don't know if you know this meme. Wait for a moment, my cabinet seems to have moved. Or change the content, this camera Moses seems to be watching us all the time!

Code Analysis

First of all, the entire page adopts a grid layout. You can see that we have 7*7 49 small things here. How can this layout be implemented as quickly as possible? The easiest way is to layout the grid!

We set up a container, adopt a grid layout, 7 rows and 7 columns, and then the size and spacing of each grid are used to thicken the border and achieve a beautiful effect. Of course, you can also use the layout and set up the box again.

 /* Layout setting, define a 7x7 grid with 1.5 pixel spacing between each grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(7, 40px);
      grid-template-rows: repeat(7, 40px);
      grid-gap: 1.5rem;
    }
    /* Style each square, including borders, background colors, rounded corners, etc. */
    .item {
      background-color: rgb(40, 40, 40);
      border-radius: 5px;
      border-left: solid 10px #fff;
    }

Then we have to look at this and the eyes or camera. In fact, it is also very simple. We use before, after, pseudo-types to add styles to the boxes. Then set the corresponding position for them.

.item::after,
    .item::before {
      content: '';
      width: 5px;
      height: 5px;
      display: block;
      position: absolute;
      border-radius: 50%;
      left: 20px;
      /* Set the color of the dot to red */
      background-color: rgb(212, 25, 50);
      /* Set small dot shadow */
      box-shadow: 10px 0 10px rgb(212, 25, 50);
    }
    /* Adjust the position of the small red dot */
    .item::after {
      top: 25px;
    }
    .item::before {
      bottom: 25px;
    }

The box rotates with the mouse

The most important part of js is here, and next we need to make these boxes rotate with the mouse.

To make these boxes rotate, they must first give a rotation angle, so how can they get this angle?

Let's first look at a property Math.atan2.Math.atan2The method is a mathematical function that calculates radians provided by JavaScript, which can obtain the correct radian values ​​based on the positive and negative cases of two parameters. Its syntax looks like this:

Math.atan2(y, x)

inyThe parameters represent the vertical coordinate of the point.xParameters represent the horizontal coordinates of the point. The return value of this method starts from the X-axis forward direction to the radian value between the specified point and the X-axis forward direction. The return value range is from-πarriveπ. For point (x, y), the return value of this method is(y/x). However, in use(y/x)When calculating radians, the situation where the points are in the second and third quadrants cannot be processed, resulting in inaccurate calculation results. You need to use them at this time.Math.atan2。

Here are some examples:

Math.atan2(1, 1) //Equivalent to /4, approximately equal to 0.7853981633974483Math.atan2(-1, -1) //Equivalent to -3*/4, approximately equal to -2.356194490192345Math.atan2(0, -1) //Equivalent to , approximately equal to 3.141592653589793

We useMath.atan2Method calculates the radian between the mouse pointer and the center of the small square, and then converts it into an angle to achieve the rotation effect of the small square.

Specific implementation steps

First, we useMethods to get all with.itemSmall squares of the class. Next in the callback function of the mouse movement event, we get the x and y coordinates of the current mouse pointer. We then traverse all the small squares, calculate the distance and angle between it and the mouse pointer for each small square, and apply the calculated angle to the small squaretransformIn the style, so that it can get the effect of rotation.

Specifically:

  • For each small square, we first get its x and y coordinates.
  • Then, we use the position of the current mouse pointer and the position of the small square to calculate the distance and angle between them. in,diffXIndicates the x-axis distance between the current mouse pointer and the center of the small square,diffYIt means the y-axis distance. We useMath.atan2Method calculates the radians, then converts them to angles and saves them inanglein variable.
  • Finally, we apply the calculated rotation angle to the small squaretransformIn the style, make it rotate.

The whole process is relatively simple and interesting, let's try it out together!

/* Add a mouse movement event listener */
    ('mousemove', function (e) {
      /* Get all small squares */
      const item = (".item")
      /* Get the x and y coordinates of the current mouse pointer */
      const mouseX = 
      const mouseY = 
      /* Apply rotation transformation to all small squares (calculate the rotation angle based on the position of the mouse pointer and the position of the small square) */
      (function (sqr) {
        /* Get the x and y coordinates of the current small square */
        const sqrX = 
        const sqrY = 
        /* Calculate the distance and angle between the current mouse pointer and the center of the small square */
        const diffX = mouseX - sqrX
        const diffY = mouseY - sqrY
        const radians = Math.atan2(diffY, diffX)
        const angle = radians * 180 / 
        /* Apply rotation transformation to small squares */
         = `rotate(${angle}deg)`
      })
    })

Source code

<!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>Mouse tracking</title>
  <style>
    /* Reset all CSS styles */
    * {
      margin: 0;
      padding: 0;
    }
    /* Set the body element to a Flexbox container, displayed in the center of the page */
    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Set page background color */
      background-image: url(/th/id/R-C.f72ebc03612025e1666bcf4cfb7794bc?rik=%2fG74O%2bGxpgNvVA&riu=http%3a%2f%2fimage.%2fpic%2f0d9dbd3e0ee0298de8ba8fdcd0ab1622&ehk=dJOIpVyAXOvVy0xV8e35jpxDECDI5OyMEaQwJm%2fLncM%3d&risl=&pid=ImgRaw&r=0);
      background-repeat: no-repeat;
      background-size: cover;
    }
    /* Layout setting, define a 7x7 grid with 1.5 pixel spacing between each grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(7, 40px);
      grid-template-rows: repeat(7, 40px);
      grid-gap: 1.5rem;
    }
    /* Style each square, including borders, background colors, rounded corners, etc. */
    .item {
      background-color: rgb(40, 40, 40);
      border-radius: 5px;
      border-left: solid 10px #fff;
    }
    /* Add small red dots around each square to increase aesthetics */
    .item::after,
    .item::before {
      content: '';
      width: 5px;
      height: 5px;
      display: block;
      position: absolute;
      border-radius: 50%;
      left: 20px;
      /* Set the color of the dot to red */
      background-color: rgb(212, 25, 50);
      /* Set small dot shadow */
      box-shadow: 10px 0 10px rgb(212, 25, 50);
    }
    /* Adjust the position of the small red dot */
    .item::after {
      top: 25px;
    }
    .item::before {
      bottom: 25px;
    }
  </style>
</head>
<!-- Body part，Contains a grid container and JavaScript Code -->
<body>
  <!-- Grid container，Include 49 A small square，Used as performance for mouse movement tracking -->
  <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 Code，Listen to mouse movement events and achieve dynamic effects -->
  <script>
    /* Add a mouse movement event listener */
    ('mousemove', function (e) {
      /* Get all small squares */
      const item = (".item")
      /* Get the x and y coordinates of the current mouse pointer */
      const mouseX = 
      const mouseY = 
      /* Apply rotation transformation to all small squares (calculate the rotation angle based on the position of the mouse pointer and the position of the small square) */
      (function (sqr) {
        /* Get the x and y coordinates of the current small square */
        const sqrX = 
        const sqrY = 
        /* Calculate the distance and angle between the current mouse pointer and the center of the small square */
        const diffX = mouseX - sqrX
        const diffY = mouseY - sqrY
        const radians = Math.atan2(diffY, diffX)
        const angle = radians * 180 / 
        /* Apply rotation transformation to small squares */
         = `rotate(${angle}deg)`
      })
    })
  </script>

The above is the detailed content of the mouse tracking event tutorial for my cabinet. For more information about the mouse tracking event when the cabinet is moving, please pay attention to my other related articles!