简单鼠标跟随代码

最新推荐文章于 2024-07-23 16:20:42 发布

track sun

最新推荐文章于 2024-07-23 16:20:42 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lstory/p/6994019.html

本文介绍了一个简单的鼠标跟随效果实现方案，使用HTML、CSS和JavaScript创建了一系列彩色方块，当鼠标移动时，这些方块会跟随鼠标的移动而移动。通过调整每个元素的位置，实现了连续且平滑的效果。

效果图：

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         }

转载于:https://www.cnblogs.com/lstory/p/6994019.html