原生js实现苹果菜单

html代码：

<div class="box">
			<img src="img/11.jpg" alt="" />
			<img src="img/14.jpg" alt="" />
			<img src="img/23.jpg" alt="" />
			<img src="img/25.jpg" alt="" />
			<img src="img/27.jpg" alt="" />
		</div>

简单的样式修饰

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				position: absolute;
				bottom: 0;
				text-align: center;
			}
			img{
				width:88px;
			}
		</style>

js代码：

<script type="text/javascript">
			var oImg = document.querySelectorAll("img");//获取dom元素
			var oBox = document.getElementsByClassName("box")[0];
			document.onmousemove = function(e){//鼠标移动事件
       			var evt = e || event;  //兼容
        		var x = evt.clientX;  //鼠标点
        		var y = evt.clientY;
        		
    			for (var i = 0; i < oImg.length; i++) {
    				var disx = x - oImg[i].offsetLeft -oImg[i].offsetWidth/2;//判断鼠标距离图片(每个)的横向距离
    				var disy = y - oImg[i].offsetTop- oImg[i].offsetHeight/2 - oBox.offsetTop;//判断鼠标距离图片(每个)的纵向距离
    				var dis = Math.sqrt(Math.pow(disx,2)+Math.pow(disy,2));//计算鼠标距离图片的实际距离（与勾股定理同理）
    				
	    				if(dis < 300){//判断鼠标距离图片多远时，让图片产生变化
	    					oImg[i].style.width = 88 + (1-dis/300)*88 + "px";
	    					//88是图片高宽 ，实现鼠标在条件满足时，鼠标离图片越远，则图片越小；反之，同理
	    				}else{
	    					oImg[i].style.width = "88px ";
	    				}
    			}
    		}

运行结果：