<DCUTYPE HTML> <html lang="ch-zn"> <head> <meta charset='utf-8'> <title>苹果菜单</title> <style> html,body{margin: 0px;padding: 0px;} #listImg{ 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>