简单鼠标跟随代码

效果图：

html code:

               <div id="div1" class="div"></div>
        <div id="div2" class="div"></div>
        <div id="div3" class="div"></div>
        <div id="div4" class="div"></div>
        <div id="div5" class="div"></div>
        <div id="div6" class="div"></div>
        <div id="div7" class="div"></div>
        <div id="div8" class="div"></div>
        <div id="div9" class="div"></div>
        <div id="div10" class="div"></div>

css code:

body {
                position: relative;
            }
            
            div {
                width: 20px;
                height: 20px;
                position: absolute;
            }
            
            #div1 {
                background: red;
            }
            
            #div2 {
                background: blue;
            }
            
            #div3 {
                background: pink;
            }
            
            #div4 {
                background: hotpink;
            }
            
            #div5 {
                background: yellow;
            }
            
            #div6 {
                background: black;
            }
            
            #div7 {
                background: gray;
            }
            
            #div8 {
                background: deeppink;
            }
            
            #div9 {
                background: lightskyblue;
            }
            
            #div10 {
                background: green;
            }

js code

var divs = document.getElementsByClassName("div");

        document.onmousemove = function(e) {
            var even = e || event;
            for(var i = divs.length - 1; i > 0; i--) {
                divs[i].style.left = divs[i - 1].style.left;
                divs[i].style.top = divs[i - 1].style.top;
            }
            divs[0].style.left = even.clientX + "px";
            divs[0].style.top = even.clientY + "px";
        }