仿苹果菜单的图片放大特效实现

我想用过mac的人都应该见过它的菜单特效，就是鼠标移到适当的位置的时候，菜单图片会有一个放大的效果，今天我就模仿这个效果来做一个有关图片的特效，最终的实现效果如下：

它的HTML结构如下：

<div class="wrap">
  <img src="./images/aa.png"/>
  <img src="./images/bb.png"/>
  <img src="./images/cc.png"/>
  <img src="./images/dd.png"/>
  <img src="./images/ee.png"/>
</div>

它的样式也是非常简单的：

* {
  margin: 0;
  padding: 0;
}

.wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center; /* width设置了以后, text-align: center属性才会生效 */
  height: auto;
}

.wrap img {
  width: 64px;
}

它的JS代码如下：

var imgArr = document.getElementsByTagName('img');
var wrapDiv = document.querySelector('.wrap');

document.onmousemove = function () {
  /* 获取鼠标的坐标START */
  var e = event || window.event;
  var x = e.clientX;
  var y = e.clientY;
  /* 获取鼠标的坐标END */
  for (var i = 0; i < imgArr.length; i++) {
    var imgX = imgArr[i].offsetLeft + imgArr[i].offsetWidth / 2;
    /*
    * 因为div.wrap元素绝对定位了, 所以imgArr[i].offsetTop的值为0,
    * 因此还需要加上div.wrap元素的offsetTop值。
    */
    var imgY = imgArr[i].offsetTop + imgArr[i].offsetHeight / 2 + wrapDiv.offsetTop;
    var a = x - imgX;
    var b = y - imgY;
    // 鼠标与图片中心点的距离(勾股定理)
    var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    var proportion = 1 - c / 300; // 图片放大的比例

    if (proportion < 0.5) {
      proportion = 0.5;
    }
    imgArr[i].style.width = proportion * 128 + 'px';
  }
}

其中的300是比例系数，是我根据实际情况定义的，到时候大家也可以根据自己的具体需求来改变这个值。