仿苹果导航菜单js问题

通过鼠标与不同图片的间距比对图片做相应的放大缩小。





<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';

            

             

        }

    };

    }

 

你可能感兴趣的:(导航菜单)