經過鼠標與不一樣圖片的間距比對圖片作相應的放大縮小。
<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';
}
};
}