js macbook 底部菜单效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{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;}
</style>
</head>
<body>
<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>
<script>
    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<.5){scale=.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=100+\'px\';
            div1[i].style.height=100+\'px\';
        }
    }
</script>
</body>
</html>