鼠标跟随效果(杀马特风格)(非主流勿黑我)
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 （窃喜....不多说）
