苹果底部菜单效果实现

原理:

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

                    }

                };

            };