search

Home >Web Front-end >JS Tutorial >javascript DIV follows mouse movement_javascript skills

javascript DIV follows mouse movement_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:16:261178browse

The first thing to introduce is the effect of a div following the movement of the mouse. The specific code is as follows

javascript div follows mouse movement

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script type="text/javascript">
    window.onload = function () {
      var div1 = document.getElementById('div1');
      document.onmousemove = function (ev) {
        //IE支持event，firefox不支持
        var oEvent = ev || event;
        //
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        div1.style.top = oEvent.clientY + scrollTop + 'px'; //Y
        div1.style.left = oEvent.clientX + scrollLeft + 'px';//X
      };
    };

  </script>
</head>
<body>
  <div id="div1" style="width: 10px; height: 10px; background-color: blue; position: absolute;"></div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</body>
</html>

What I am sharing with you now is a string of DIVs that follow the mouse movement in javascript

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title></title>
  <style type="text/css">
    div {
      width: 2px;
      height: 2px;
      background-color: red;
      position: absolute;
    }
  </style>
  <script type="text/javascript">
    window.onload = function () {
      var oDivs = document.getElementsByTagName('div');
      document.onmousemove = function (ev) {
        var oEvent = ev || event;
        document.getElementsByTagName('span')[0].innerHTML = oEvent.clientY + '|' + oEvent.clientX;
        for (var i = oDivs.length-1; i > 0; i--) {
            oDivs[i].style.top = oDivs[i - 1].style.top;
            oDivs[i].style.left = oDivs[i - 1].style.left;
        }
        oDivs[0].style.top = oEvent.clientY+'px';
        oDivs[0].style.left = oEvent.clientX + 'px';
      };

    };
  </script>
</head>
<body>
  <span></span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</body>
</html>

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript method to run local programs in web pages_javascript skillsNext article：JavaScript method to run local programs in web pages_javascript skills

Related articles

See more