上下伸展的JS菜單

2024-09-05 12:20:07

字體：大中小

來源：轉載

供稿：網友

上下伸展的JS菜單，和上一個左右伸展的差不多，看看效果就明白了。

<html><head><title>上下伸展的JS菜單</title><style type="text/css">#con div{height:98px; width:50px; margin:0 5px 0 5px;float:left;}</style></head><body><div   class="jznlrlx"   id="con"><div style="background-color:red">CSS特效</div><div style="background-color:green">源碼下載</div><div style="background-color:blue">精品代碼</div><div style="background-color:pink">預留項目</div><div style="background-color:orange">預留項目</div><div style="background-color:black">預留項目</div></div></body></html><script language="javascript">function $(e){return document.getElementById(e);}function roulMenu(e,maxW,minW){    var divs = $(e).getElementsByTagName('div');    for(var i=0;i<divs.length;i++){      (function(){      var tims,timss;      divs[i].onmouseover=function(){          var self = this;              clearInterval(timss);          tims=setInterval(function(){                  if(self.offsetHeight<maxW){                      self.style.height = self.offsetHeight + 5 + 'px';                  }else{                      clearInterval(tims);                  }              },10);           }           divs[i].onmouseout=function(){               var self = this;               clearInterval(tims);               timss=setInterval(function(){                   if(self.offsetHeight>minW){                       self.style.height = self.offsetHeight - 5 + 'px';                   }else{                       clearInterval(timss);                   }                },10);            }        })();    }}//使用方法roulMenu('con',200,100);</script>

上一篇：真正的JavaScript伸展收縮型菜單

下一篇：揭密全兼容的CSS下拉菜單的編寫