仿蘋果導航菜單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';
            
             
        }
    };
    }
相關文章
相關標籤/搜索