实现Mac停靠栏效果,思路:当鼠标移动到图标的一定半径范围内的时候,相应的图标会有放大效果;
1、布局:一个wrap包裹5个Mac图标即可(128px*128px);
2、图标初始化width和height分别为64px和64px;
3、放大效果实现:改变 img的width即可(不用显式改变height,因为img能够高宽自适应);
4、将onmousemove事件绑定给document,计算鼠标到图标的距离,利用勾股定理;
5、判断鼠标是否到达图标的反应范围(r)内;
如果鼠标没有到达反应范围内,即c>r(将c设为r是为了128 * r/(c+r)的值为0.5,从而保持图标大小为64px不变),则图标不改变;
如果鼠标进入反应范围,即c < r,则图标开始变大,且放大倍数最大为两倍,此时img.style.width = 128 * r/(c+r) + "px";
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mac停靠栏</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #wrap{ position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;/*text-align对图片标签有效果*/ } #wrap>img{ width: 64px; } </style> </head> <body> <div id="wrap"> <img src="images/1.png" alt="图标1"> <img src="images/2.png" alt="图标2"> <img src="images/3.png" alt="图标3"> <img src="images/4.png" alt="图标4"> <img src="images/5.png" alt="图标5"> </div> </body> <script type="text/javascript"> /*鼠标在每个图标半径范围内,相应的图标就会有反应*/ window.onload = function () { var r = 300 var imgNodes = document.querySelectorAll("#wrap>img") //将onmousemove事件绑定给document,这样在视口内滑动鼠标就可以触发事件 document.onmousemove = function (ev) { ev = ev || event for (var i = 0; i < imgNodes.length; i++) { var a = imgNodes[i].getBoundingClientRect().left + imgNodes[i].offsetWidth/2 - ev.clientX var b = imgNodes[i].getBoundingClientRect().top + imgNodes[i].offsetHeight/2 - ev.clientY var c = Math.sqrt(a*a+b*b) if(c > r){ c = r } var temp = 128 * r/(c+r) imgNodes[i].style.width = temp +"px" } } } </script> </html>
效果如下: