js macbook 底部菜单效果

HTML

<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<div class="box">
    <div id="ml0" class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

#ml0 {
    margin-left: 0;
}

.box {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 0;
}

.div1 {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-left: 5px;
    background: red;
}

JavaScript

var box = document.getElementsByClassName('box')[0];
var div1 = document.getElementsByClassName('div1');
var input = document.getElementsByTagName('input');
box.onmouseover = function () {
    box.onmousemove = function (ev) {
        var ev = ev || window.event;
        for (var i = 0; i < div1.length; i++) {
            var x = div1[i].offsetLeft + div1[i].offsetWidth / 2;
            var y = div1[i].offsetTop + div1[i].offsetHeight / 2 + box.offsetTop;
            var a = ev.clientX - x;
            var b = ev.clientY - y;
            var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); // 计算斜线距离
            var scale = 1 - c / 1350; // 缩小斜线距离值
            console.log(c);
            if (scale < 0.5) {
                scale = 0.5;
            }
            input[i].value = 'X轴' + a + '::Y轴' + b;
            div1[i].style.width = scale * 130 + 'px';
            div1[i].style.height = scale * 130 + 'px';
        }
    }
};
box.onmouseout = function () {
    for (var i = 0; i < div1.length; i++) {
        div1[i].style.width = '100px';
        div1[i].style.height = '100px';
    }
}