苹果菜单放大效果

苹果放大菜单效果主要是运用了三角函数的知识,其实三角函数在编程中应用的还是非常广泛的,而且个人觉得也非常的实用,之前我写的css旋转真实坐标的转换(点击这里穿越)也是运用了三角函数,那么如果利用三角函数的知识来实现苹果放大菜单效果呢?

在写效果之前,你可以猛戳这里查看最终效果。

接下来,我们先看一张图:

要实现这个效果,首先我们需要知道鼠标释放点和每个菜单项中心点之间的距离d,根据上图,通过三角函数我们可以轻松的计算出距离d,然后我们将每个菜单项中心点距离鼠标释放点的距离除以一个阈值,可以得到每个菜单项和鼠标释放点之前的一个相对比例,而且我们可以发现离鼠标距离越近的菜单项比例越小,但是最终的效果是离鼠标距离越近的菜单项更大一些,所以我们用1分别减去距离比例,剩下的工作就很简单了,用图片的高宽分别乘以这个比例就是我们最终需要的结果。

最终代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Apple Menu</title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }
    #main {
      width: 288px;
      position: fixed;
      bottom: 10px;
      width: 100%;
      text-align: center;
    }
    #main img {
      margin: 0 8px;
    }
  </style>
</head>
<body>
  <div id="main">
    <img src="b3.png" width="72px">
    <img src="b4.png" width="72px">
    <img src="b8.png" width="72px">
    <img src="b9.png" width="72px">
  </div>
  <script type="text/javascript">
    var imgs = document.querySelectorAll('img'),
        main = document.querySelector('#main');
    window.addEventListener('mousemove', function(e) {
      var ex = e.pageX, ey = e.pageY;
      imgs.forEach(function(img) {
        var cx = img.offsetLeft + img.offsetWidth / 2,
            cy = img.offsetTop + img.offsetHeight / 2 + main.offsetTop,
            deltaX = ex - cx,
            deltaY = ey - cy;
          var distance = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)),
              scale = 1 - distance / 300;
          if (scale<0.5) {
            scale = 0.5;
          }
          img.style.width = 144 * scale + 'px';
          img.style.height = 144 * scale + 'px';
      });
    }, false);
  </script>
</body>
</html>
  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章