仿苹果导航菜单js问题

时间:2021-07-27 19:52:15
通过鼠标与不同图片的间距比对图片做相应的放大缩小。


<div id="box">
<img src="data:images/1.png" class="img1" alt=""/>
<img src="data:images/2.png" class="img1" alt=""/>
<img src="data:images/3.png" class="img1" alt=""/>
<img src="data:images/4.png" class="img1" alt=""/>
<img src="data:images/5.png" class="img1" alt=""/>
</div>

#box{
position: fixed;
bottom: ;
width: %;
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=;
var disNum = ;//间距阀值 for(i=;i<aImg.length;i++)
{
var x=aImg[i].offsetLeft+aImg[i].offsetWidth/; //取得img的x点
var y=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/; // img->Y var a=x-oEvent.clientX; //鼠标的间距离图片x间距
var b=y-oEvent.clientY; //鼠标离离图片Y间距 var dis=Math.sqrt(a*a+b*b); //三角形就长边算两点间距 var scale=-dis/disNum; //反数 大的小 小的变大 if(scale<0.5)
{
scale=0.5;
} aImg[i].style.width=scale*120+'px'; }
};
}