JavaScript implements a box that follows the mouse movement

This article shares the specific code of JavaScript to follow the mouse movement for your reference. The specific content is as follows

A box that follows the mouse (including detecting boundary values)

Effect picture:

Code:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
 
<body>
  <div>111111111</div>
  <script>
    var div = document.getElementsByTagName('div')[0];
    div.onmousedown = function(e) {
      e = window.event || e;
      // Press the mouse to get the distance from the mouse to the left side of the page var x = e.clientX;
      // Get the distance between the mouse and the top of the page var y = e.clientY;
      // The distance between the element and the left side of the page var elex = div.offsetLeft;
      // The distance between the element and the top of the page var eley = div.offsetTop;
      // Subtract to get the distance between the mouse and the element var X = x - elex;
      var Y = y - eley;
      console.log(X, Y);
      document.onmousemove = function(e) {
          e = window.event || e;
          // Get the distance between the mouse and the page during mouse movement var movex = e.clientX;
          var movey = e.clientY;
          // 1. Left boundary value // The distance from the left side of the page during the element movement var leftx = movex - X;
          var lefty = movey - Y;
          // 1. Left boundary valueif (leftx <= 0) {
            leftx = 0;
          }
          // 2. Upper boundary valueif (lefty <= 0) {
            lefty = 0
          }
          // 3. Right border value // Page visible area width - element width var rightx = document.documentElement.clientWidth - div.offsetWidth;
          if (leftx >= rightx) {
            leftx = rightx
          }
          // 4. Bottom side boundary value // Page visible area height - element height var righty = document.documentElement.clientHeight - div.offsetHeight;
          if (lefty >= righty) {
            lefty = righty;
          }
          // Get the distance between the mouse and the page during mouse movement - the distance between the mouse and the element = the left top value of the element div.style.left = leftx + 'px';
          div.style.top = lefty + 'px';
 
 
 
        }
        //Lift up to clear the mobile event document.onmouseup = function() {
          document.onmousemove = null;
        }
        // Prevent default event return false;
 
    }
  </script>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

How to use javascript to achieve the effect of image following mouse movement
js+html+css to realize mouse moving div example
js method to realize the text moving with the mouse
js picture follows the mouse movement code
JavaScript DIV follows the mouse movement
js realizes the effect of picture following mouse movement
js realizes a small ball that follows the mouse movement
js realizes the special effects of image enlargement and following the mouse movement
Example of multiple colored balls following the mouse movement animation effect implemented by native JS
Javascript mouse moves up and the slider follows the effect code sharing

<<: What to do if you forget your mysql password

>>: How to Run a Command at a Specific Time in Linux