仿蘋果菜單的圖片放大特效實現

我想用過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是比例係數，是我根據實際情況定義的，到時候大家也可以根據自己的具體需求來改變這個值。