码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-11-26 20:28:46      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   os   sp   

 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>

先上代码,再上图片bubuko.com,布布扣

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

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 (窃喜....不多说)

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

标签:des   style   blog   http   io   ar   color   os   sp   

原文地址:http://www.cnblogs.com/pnyh5/p/4123884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!