mac底部导航效果

css:
}
#wrap img{
width:64px;
}
#wrap{
position: absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}

html:
<div id="wrap">
	<img src="images/1.png"/>
	<img src="images/2.png"/>
	<img src="images/3.png"/>
	<img src="images/4.png"/>
	<img src="images/5.png"/>
</div>

js:
var r = 128;
	var imgNode = document.querySelectorAll("#wrap img");
	window.onmousemove = function(e){
	e = e||event
	var r = 128;
		for(var i=0;i<imgNode.length;i++){
			var a = imgNode[i].getBoundingClientRect().top + imgNode[i].offsetHeight - e.clientY; //getBoundingClientRect().top  ：相对于视口的距离
			var b = imgNode[i].getBoundingClientRect().left + imgNode[i].offsetWidth - e.clientX;
			var c = Math.sqrt(a*a+b*b);  //c值为每个图标到鼠标位置的直线距离
			if(c>r){
				c=r;
			}
			imgNode[i].style.height= r -0.5*c+"px";//c值越小图标越大
			imgNode[i].style.width= r -0.5*c+"px";
		}
	}