首页 > 代码库 > 鼠标跟随效果(杀马特风格)(非主流勿黑我)
鼠标跟随效果(杀马特风格)(非主流勿黑我)
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 （窃喜....不多说）
鼠标跟随效果(杀马特风格)(非主流勿黑我)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。