点滴积累【JS】---JS小功能(onmousemove鼠标移动坐标接龙DIV)

效果:

点滴积累【JS】---JS小功能(onmousemove鼠标移动坐标接龙DIV)_第1张图片

思路:

利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV。

代码:

 1 <head runat="server">
 2     <title></title>
 3     <style type="text/css">
 4         div
 5         {
 6             width: 20px;
 7             height: 20px;
 8             background: #00FFFF;
 9             position: absolute;
10         }
11     </style>
12     <script type="text/javascript">
13         document.onmousemove = function (ev) {
14             var div = document.getElementsByTagName('div');
15 
16             var oEvent = ev || event;       //判断兼容性
17             var pos = GetMouse(oEvent);     //确定兼容性后,利用鼠标移动坐标的函数来取得横纵坐标
18             for (var i = div.length - 1; i > 0; i--) {      //遍历DIV,从最后一个开始。
19                 div[i].style.left = div[i - 1].offsetLeft + 'px';       //将前一个的offsetLeft给后一个
20                 div[i].style.top = div[i - 1].offsetTop + 'px';     //将前一个的offsetTop给后一个
21             }
22             div[0].style.left = pos.x + 'px';       //将鼠标的横坐标给第一个
23             div[0].style.top = pos.y + 'px';        //将鼠标的纵坐标给第一个
24         }
25         function GetMouse(ev) {     //获取鼠标移动的坐标
26             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
27             var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
28             return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
29         }
30     </script>
31 </head>
32 <body>
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 </body>

 

你可能感兴趣的:(move)