<html>
<head>
<meta charset="utf-8">
<style>
* {margin:0; padding:0;}
#div1 {position:absolute; bottom:0; width:100%; text-align:center;}
input {font-size:20px; width:160px;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aTxt=document.getElementsByTagName('input');
var aImg=document.getElementsByTagName('img');
document.onmousemove=function (ev)
{
var oEvent=ev||event;
for(var i=0;i<aImg.length;i++)
{
var l=aImg[i].offsetLeft+aImg[i].offsetWidth/2;
var t=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2;
var a=l-oEvent.clientX;
var b=t-oEvent.clientY;
//pow
var dis=Math.sqrt(a*a+b*b);
var scale=1-dis/300;//300可以设置感应区的大小，scale是放大系数，距离和放大宽度成反比
if(scale<0.5)
{
scale=0.5;
}
aImg[i].width=128*scale;
aTxt[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="img/1.png" width="64" />
<img src="img/2.png" width="64" />
<img src="img/3.png" width="64" />
<img src="img/4.png" width="64" />
<img src="img/5.png" width="64" />
</div>
</body>
</html>
?
