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

简单鼠标跟随代码[通俗易懂]效果图:htmlcode:csscode:jscode

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

效果图:

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

 

 

 

 

 

 

 

 

 

 

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         }

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155295.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号