javascript 的 *

时间:2022-12-22 05:59:37

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
      div{
          width: 10px;
          height: 10px;
          background-color: red;
          position: absolute;
      }
    </style>
</head>
<body >
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div');
        document.onmousemove=function(ev){
            oEvent=ev||event;
            for(var i=oDiv.length-1;i>0;i--){    //倒序的好处。。
                oDiv[i].style.top=oDiv[i-1].style.top;
                oDiv[i].style.left=oDiv[i-1].style.left;
            }
            oDiv[0].style.top=oEvent.clientX+'px';
            oDiv[0].style.left=oEvent.clientY+'px';
        }
    }
</script>

</body>
</html>