<DCUTYPE HTML>
<html lang="ch-zn">
<head>
<meta charset='utf-8'>
<title>苹果菜单</title>
<style>
html,body{margin: 0px;padding: 0px;}
#listImg{width: 100%; text-align: center; position: fixed; bottom: 0px;}
</style>
</head>
<body>
<section>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</section>
<section id='listImg'>
<img src="image/1.png" width="64" alt="">
<img src="image/2.png" width="64" alt="">
<img src="image/3.png" width="64" alt="">
<img src="image/4.png" width="64" alt="">
<img src="image/5.png" width="64" alt="">
</section>
<script>
window.onload = function(){
var obj = document.getElementById('listImg');
var oImg = obj.getElementsByTagName('img');
var oText = document.getElementsByTagName('input');
document.onmousemove = function(ev){
var ev = ev||event;
for(var i = 0;i<oImg.length;i++){
var PageX = ev.clientX;
var PageY = ev.clientY;
var X = oImg[i].offsetLeft + oImg[i].offsetWidth/2;
var Y = getPos(oImg[i])+oImg[i].offsetHeight/2;
var a = PageX - X;
var b = PageY - Y;
var C = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));
var scale =1 - C/300;
if(scale<0.5){
scale = 0.5;
}
oImg[i].style.width = scale * 128 +'px';
oImg[i].style.height = scale * 128 +'px';
oText[i].value = scale.toFixed(2);
}
}
}
function getPos(obj){
var iH = 0;
while(obj){
iH += obj.offsetTop;
obj = obj.offsetParent;
}
return iH;
}
</script>
</body>
</html>
