沒看明白,有哪位大神講講
window.onload=function(){
??? var aLi=document.getElementsByTagName('li');
?? ?for(var i=0; i<aLi.length; i++){
?? ??? ?aLi[i].onmouseover=function(){
??????????? //鼠標(biāo)經(jīng)過一級菜單,二級菜單動(dòng)畫下拉顯示出來
???? oSubNav = this.getElementsByTagName('ul')[0];
??????????? if(oSubNav){
???????????? var This = oSubNav;
???????????? clearInterval(This.time);
???????????? This.time = setInterval(function(){
??????????????? This.style.height = This.offsetHeight+16+"px";
??????????????? if(This.offsetHeight>=120)
??????????????? clearInterval(This.time);
???????????? },30);
?? ???????? }
?? ?
?? ??? ?}
??????? //鼠標(biāo)離開菜單,二級菜單動(dòng)畫收縮起來。?? ??? ?
?? ??? ?aLi[i].onmouseout=function(){
?? ??? ??? ???? oSubNav = this.getElementsByTagName('ul')[0];
??????????? if(oSubNav){
???????????? var This = oSubNav;
???????????? clearInterval(This.time);
???????????? This.time = setInterval(function(){
??????????????? This.style.height = This.offsetHeight-16+"px";
??????????????? if(This.offsetHeight<=0){
??????????????????? This.style.height='0px';
??????????????????? clearInterval(This.time);
??????????????? }
???????????? },30);
?? ???????? } ?
?? ??? ?}
?? ?}
}
2016-07-31
1.首先用一個(gè)aLi變量承載<li>標(biāo)簽(getElementsByTagName('li')就是指li標(biāo)簽)。????????
2. ?for(var i=0; i<aLi.length; i++){};就是從第一個(gè)<li>標(biāo)簽開始遍歷<li>標(biāo)簽
3. ?aLi[i].onmouseover=function(){};查看你是否用鼠標(biāo)覆蓋其中的一級標(biāo)簽
4.?oSubNav = this.getElementsByTagName('ul')[0];用變量?oSubNav承載你選中的<li>標(biāo)簽里的<ul>標(biāo)簽,因?yàn)槊恳粋€(gè)<li>標(biāo)簽里都只有一個(gè)<ul></ul>標(biāo)簽,所以[0]就代表<ul>里所有的二級標(biāo)簽。
5. if(oSubNav){} 如果oSubNav變量的值不為空,則繼續(xù)執(zhí)行。
6.var This = oSubNav; 一個(gè)變量代替另一個(gè)變量
7.clearInterval(This.time);執(zhí)行代碼函數(shù)之前,清除以前的執(zhí)行
8.This.time = setInterval(function(){},30}每0.03秒執(zhí)行一次function,
9.This.style.height = This.offsetHeight+16+"px"; ?從css里看到原先subNav的高度為0,所以不顯示出來,而這里的代碼就是為css代碼里的subNav高度不斷重新賦值(This.style.height),它的值就是每0.03秒+16px執(zhí)行的,This.offsetHeight代表它在網(wǎng)頁中此刻高度
10.if(This.offsetHeight>=120)
??????????????? clearInterval(This.time); 這個(gè)就是高度大于120,不再執(zhí)行。
下面同理;