Mac停靠栏效果

实现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>

效果如下：

停靠栏效果

猜你喜欢