<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>苹果导航菜单</title>
<style>
*{
padding: 0;
margin:0;
}
div{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
</style>
<script>
document.onmousemove=function(ev){
var oEvent=ev || event;
var oDiv=document.getElementById("div1");
var oImg=document.getElementsByTagName("img");
var aText=document.getElementsByTagName("input");
for (var i = 0; i < oImg.length; i++) {
var x=oImg[i].offsetLeft+oImg[i].offsetWidth/2;
var y=oDiv.offsetTop+oImg[i].offsetTop+oImg[i].offsetHeight/2;
var a=x-oEvent.clientX;
var b=y-oEvent.clientY;
//求鼠标到图片中心距离
var dis=parseInt(Math.sqrt(a*a+b*b));
//缩放倍数，可以根据需求调节300大小
var scale=1-dis/300;
if (scale<0.5) {
scale=0.5;
}
oImg[i].width=scale*128;
aText[i].value=scale.toFixed(2);
}
}
</script>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<div id="div1">
<img src="images/1.png" alt="" width="64">
<img src="images/2.png" alt="" width="64">
<img src="images/3.png" alt="" width="64">
<img src="images/4.png" alt="" width="64">
<img src="images/5.png" alt="" width="64">
</div>
</body>
</html>成品展示：
