鼠标跟随效果(杀马特风格)(非主流勿黑我)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>萤火虫阵列</title>
 7 <meta name="description" content="">
 8 <meta name="keywords" content="">
 9 <link href="" rel="stylesheet">
10 <style>
11     div{
12         width: 50px;
13         height: 50px;
14         position: absolute;
15         display: none;
16     }
17 </style>
18 </head>
19 <body style="background:rgb(5,5,0)">
20     <div><img src="11.gif" alt=""></div>
21     <div><img src="11.gif" alt=""></div>
22     <div><img src="11.gif" alt=""></div>
23     <div><img src="11.gif" alt=""></div>
24     <div><img src="11.gif" alt=""></div>
25     <div><img src="11.gif" alt=""></div>
26     <div><img src="11.gif" alt=""></div>
27     <div><img src="11.gif" alt=""></div>
28     <div><img src="11.gif" alt=""></div>
29     <div><img src="11.gif" alt=""></div>
30     <div><img src="11.gif" alt=""></div>
31 </body>
32 <script>
33     var odiv = document.getElementsByTagName("div");
34     document.onmousemove = function () {
35         var event = event || window.event;
36         var sign = 0;
37         setInterval(function () {
38             if(sign<11){
39                 odiv[sign].style.display = "block";
40                 odiv[sign].style.left = (event.clientX - odiv[sign].offsetWidth/2) + "px";
41                 odiv[sign].style.top = (event.clientY - odiv[sign].offsetHeight/2) + "px";
42                 sign++;
43                 /*document.onmousedown = function  () {
44                     odiv[1].style.top = (event.clientY - odiv[1].offsetHeight/2 - 50) + "px";
45                     odiv[2].style.top = (event.clientY - odiv[2].offsetHeight/2 + 50) + "px";
46                     odiv[3].style.left = (event.clientX - odiv[3].offsetWidth/2 - 50) + "px";
47                     odiv[4].style.left = (event.clientX - odiv[4].offsetWidth/2 + 50) + "px";
48                     odiv[5].style.left = (event.clientX - odiv[5].offsetWidth/2 - 25) + "px";
49                     odiv[5].style.top = (event.clientY - odiv[5].offsetHeight/2 - 25) + "px";
50                     odiv[6].style.left = (event.clientX - odiv[6].offsetWidth/2 + 25) + "px";
51                     odiv[6].style.top = (event.clientY - odiv[6].offsetHeight/2 + 25) + "px";
52                     odiv[7].style.left = (event.clientX - odiv[7].offsetWidth/2 - 25) + "px";
53                     odiv[7].style.top = (event.clientY - odiv[7].offsetHeight/2 + 25) + "px";
54                     odiv[8].style.left = (event.clientX - odiv[8].offsetWidth/2 + 25) + "px";
55                     odiv[8].style.top = (event.clientY - odiv[8].offsetHeight/2 - 25) + "px";
56                 }*/            //点击展开效果，有兴趣的同学可以看看，代码书写很坑...
57             }
58         },50)
59     }
60 </script>
61 </html>

先上代码,再上图片。

写一下编程思想吧，大家都知道通过

odiv[sign].style.left = (event.clientX - odiv[sign].offsetWidth/2) + "px";
 odiv[sign].style.top = (event.clientY - odiv[sign].offsetHeight/2) + "px";
这么两句就可以实现一个div的鼠标跟随效果，那么解析一下：
event.clientX/*点击事件后event对象产生的 鼠标X轴坐标*/ -  odiv[sign].offsetWidth/2/*跟随鼠标的div自身的宽度除以2*/（其目的是为了让鼠标指针居中）
ok~  那么我们已经可以做到1个div的鼠标跟随了，那么每隔N毫秒我们去调用这个函数，让下一个div跟随，如此往复，就可以做到这个炫酷的杀马特风格了。。。
SetInterval（）。。。大家都懂的 ，不多说了。。这个效果还是蛮绚丽的
当然这个效果用到了一些投机取巧的方法。。。11.gif （窃喜....不多说）