一串东西跟着鼠标走 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div{width: 10px; height: 10px;background-color:red;position: absolute;}
 8         </style>
 9         <script>
10             function getPosition(ev){
11                 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
12                 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
13 
14                 return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
15             }
16             document.onmousemove=function(ev){
17                 var oEvent=ev||event;
18                 var aDiv=document.getElementsByTagName('div');
19                 var position=getPosition(oEvent);
20                 
21                 for(var i=aDiv.length-1;i>0;i--){
22                     aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
23                     aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
24                 }
25 
26                 aDiv[0].style.left=position.x+'px';
27                 aDiv[0].style.top=position.y+'px';
28             }
29         </script>
30     </head>
31     <body>
32         <div>
33         </div>
34         <div>
35         </div>
36         <div>
37         </div>
38         <div>
39         </div>
40         <div>
41         </div>
42         <div>
43         </div>
44         <div>
45         </div>
46         <div>
47         </div>
48         <div>
49         </div>
50         <div>
51         </div>
52         <div>
53         </div>
54         <div>
55         </div>
56         <div>
57         </div>
58         <div>
59         </div>
60         <div>
61         </div>
62         <div>
63         </div>
64         <div>
65         </div>
66         <div>
67         </div>
68         <div>
69         </div>
70         <div>
71         </div>
72         <div>
73         </div>
74         <div>
75         </div>
76         <div>
77         </div>
78         <div>
79         </div>
80         <div>
81         </div>
82         <div>
83         </div>
84         <div>
85         </div>
86         <div>
87         </div>
88         <div>
89         </div>
90         <div>
91         </div>
92         <div>
93         </div>
94         <div>
95         </div>
96         <div>
97         </div>
98     </body>
99 </html>
View Code

 

posted @ 2020-04-28 13:01  孝文  阅读(118)  评论(0)    收藏  举报