经过鼠标与不一样图片的间距比对图片作相应的放大缩小。
<div id="box">
<img src="images/1.png" class="img1" alt=""/>
<img src="images/2.png" class="img1" alt=""/>
<img src="images/3.png" class="img1" alt=""/>
<img src="images/4.png" class="img1" alt=""/>
<img src="images/5.png" class="img1" alt=""/>
</div>
#box{
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
//zoom: 1; ------------>这个属性在这里不能用
}
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('box');
var aImg=document.getElementsByTagName('img');
var i=0;
var disNum = 400;//间距阀值
for(i=0;i<aImg.length;i++)
{
var x=aImg[i].offsetLeft+aImg[i].offsetWidth/2; //取得img的x点
var y=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2; // img->Y
var a=x-oEvent.clientX; //鼠标的间距离图片x间距
var b=y-oEvent.clientY; //鼠标离离图片Y间距
var dis=Math.sqrt(a*a+b*b); //三角形就长边算两点间距
var scale=1-dis/disNum; //反数 大的小 小的变大
if(scale<0.5)
{
scale=0.5;
}
aImg[i].style.width=scale*120+'px';
}
};
}