H5+js仿蘋果導航菜單案例

window.onload=function(){

var oMemu=document.getElementById("memu");

var aImag=document.getElementsByTagName("img");

var aWidth=[];

var i=0;

//保存每張照片原寬度,並設置當前寬度.

for(i=0;i

aWidth.push(aImag[i].offsetWidth);//採用數組的push方法將當前照片寬度保存到數組中

aImag[i].width=parseInt(aImag[i].offsetWidth/2);//重新設置照片寬度

}

//鼠標移動事件

oMemu.onmousemove=function(event){//Event 對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

var Event=event||window.event;//在ie下,事件對象是在全局的,也就 window下,做為window的一個屬性在其他瀏覽器,都做為方法的第一個參數傳入,所以這樣寫是為了兼容

for(i=0;i

var a=Event.clientX-aImag[i].offsetLeft-aImag[i].offsetWidth/2;

var b=Event.clientY-aImag[i].offsetTop-aImag[i].offsetHeight/2-oMemu.offsetTop;

var iScale=1-Math.sqrt(a*a+b*b)/300;

if(iScale<0.5) iScale=0.5

aImag[i].width=aWidth[i]*iScale;

}

};

};

//簡單的一個彈窗.傳入一個參數

function fun(m){

alert("這是第"+m+"張照片");

}

結果如圖:

H5+js仿蘋果導航菜單案例



分享到:


相關文章: