简单鼠标跟随代码[通俗易懂]

全栈程序员-站长 • 2022年7月2日下午1:00 • 未分类 • 阅读 24

大家好，又见面了，我是你们的朋友全栈君。

效果图：

简单鼠标跟随代码[通俗易懂]

html code:

 1                <div id="div1" class="div"></div>
 2         <div id="div2" class="div"></div>
 3         <div id="div3" class="div"></div>
 4         <div id="div4" class="div"></div>
 5         <div id="div5" class="div"></div>
 6         <div id="div6" class="div"></div>
 7         <div id="div7" class="div"></div>
 8         <div id="div8" class="div"></div>
 9         <div id="div9" class="div"></div>
10         <div id="div10" class="div"></div>

css code:

 1 body {
 2                 position: relative;
 3             }
 4             
 5             div {
 6                 width: 20px;
 7                 height: 20px;
 8                 position: absolute;
 9             }
10             
11             #div1 {
12                 background: red;
13             }
14             
15             #div2 {
16                 background: blue;
17             }
18             
19             #div3 {
20                 background: pink;
21             }
22             
23             #div4 {
24                 background: hotpink;
25             }
26             
27             #div5 {
28                 background: yellow;
29             }
30             
31             #div6 {
32                 background: black;
33             }
34             
35             #div7 {
36                 background: gray;
37             }
38             
39             #div8 {
40                 background: deeppink;
41             }
42             
43             #div9 {
44                 background: lightskyblue;
45             }
46             
47             #div10 {
48                 background: green;
49             }

js code

 1 var divs = document.getElementsByClassName("div");
 2 
 3         document.onmousemove = function(e) {
 4             var even = e || event;
 5             for(var i = divs.length - 1; i > 0; i--) {
 6                 divs[i].style.left = divs[i - 1].style.left;
 7                 divs[i].style.top = divs[i - 1].style.top;
 8             }
 9             divs[0].style.left = even.clientX + "px";
10             divs[0].style.top = even.clientY + "px";
11         }