美文网首页
一串div 跟随鼠标移动

一串div 跟随鼠标移动

作者: 发光驴子 | 来源:发表于2017-10-11 00:03 被阅读0次
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <script>
      window.onload=function () {
          var oDiv=document.getElementsByTagName('div');
          document.onmousemove=function (ev) {
              var oEvent=ev||event;
              oDiv[0].style.left=oEvent.clientX+"px";
              oDiv[0].style.top=oEvent.clientY+"px";
              for(var i=oDiv.length-1; i>0;i--){
                  oDiv[i].style.left=oDiv[i-1].style.left;
                  oDiv[i].style.top=oDiv[i-1].style.top;
              }

          }
      }
  </script>
  <style>
div{
    width:100px;
    height:150px;
    background: red;
    position: absolute;
      }
  </style>
  <body >

  <div></div>
  <div></div>
  <div></div>
  <div></div>
   <div></div>
  <div></div>
  <div></div>
  <div></div>
  </body>
  </html>

相关文章

网友评论

      本文标题:一串div 跟随鼠标移动

      本文链接:https://www.haomeiwen.com/subject/etciyxtx.html