蘋果底部選單效果實現
阿新 • • 發佈：2018-11-03
原理:
1.確認事件源:對應的選單按鈕,為img實現
2.確認事件屬性:onmousemove,這裡會出現誤區,因為很多人認為是當滑鼠懸浮在對應選單項上時,該選單才會發生變化,其實不然,仔細觀察可以發現,當我們的滑鼠還沒有移動上去時或者說當滑鼠距離某些選單項足夠近的時候,對應的選單項會逐步出現放大效果.因為我們選定事件屬性為滑鼠移動事件
3.確認事件變化屬性:這個很簡單,就是對應的選單項放大.但是這裡有個坑需要跳過去,當滑鼠距離多個選單項都比較近時,那麼這幾個選單項都會出現放大效果,而且放大的倍數都不相同,要想實現這個效果,其實得運用到勾股定理.就是曾經的直角三角形a*a+b*b=c*c,我們可以設想a值為滑鼠位置,b值為選單項中心位置,那麼我們需要求出滑鼠距離選單項中心的直線距離c,c值越小,說明滑鼠位置距離b越近.然後我們可以通過c值計算一個比例與選單的寬度相乘,最終就實現了蘋果底部選單效果
1：
document.onmousemove = function (e) { var e = e || event; var oDiv = document.getElementById('div1'); var aImg = oDiv.getElementsByTagName('img'); var d = 0; var iMax = 200; var i = 0; function getDistance(obj) { return Math.sqrt ( Math.pow(obj.offsetLeft + oDiv.offsetLeft - e.clientX + obj.offsetWidth / 2, 2) + Math.pow(obj.offsetTop + oDiv.offsetTop - e.clientY + obj.offsetHeight / 2, 2) ); } for (i = 0; i < aImg.length; i++) { d = getDistance(aImg[i]); d = Math.min(d, iMax); aImg[i].width = ((iMax - d) / iMax) * 64 + 64; } }; 2： window.onload = function () { var oMenu = document.getElementById("div1"); var aImg = oMenu.getElementsByTagName("img"); var aWidth = []; var i = 0; //儲存原寬度, 並設定當前寬度 for (i = 0; i < aImg.length; i++) { aWidth.push(aImg[i].offsetWidth); aImg[i].width = parseInt(aImg[i].offsetWidth / 2); } //滑鼠移動事件 document.onmousemove = function (event) { var event = event || window.event; for (i = 0; i < aImg.length; i++) { var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2; var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2; var iScale = 1 - Math.sqrt(a * a + b * b) / 300; if (iScale < 0.5) iScale = 0.5; aImg[i].width = aWidth[i] * iScale } }; };