Rumah > Artikel > hujung hadapan web > javascript DIV mengikuti kemahiran mouse movement_javascript

javascript DIV mengikuti kemahiran mouse movement_javascript

WBOYasal: 2016-05-16 15:16:261142semak imbas

Perkara pertama yang perlu diperkenalkan ialah kesan div mengikut pergerakan tetikus Kod khusus adalah seperti berikut

javascript div mengikuti pergerakan tetikus

<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>

Apa yang saya kongsikan dengan anda sekarang ialah rentetan DIV yang mengikuti pergerakan tetikus dalam 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>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kaedah JavaScript untuk menjalankan program tempatan dalam kemahiran halaman web_javascriptArtikel seterusnya：Kaedah JavaScript untuk menjalankan program tempatan dalam kemahiran halaman web_javascript

Artikel berkaitan

Lihat lagi