仿QQ折疊菜單動感效果（JS+css）

2024-09-05 12:20:02

字體：大中小

來源：轉載

供稿：網友

仿QQ下拉折疊菜單（動畫版），多種顏色的完美搭配，和以前QQ版本的說菜單形式有點像，不但看上去很漂亮，而且菜單也很動感，類似jQuery打造的效果，不過這里是純JavaScript技術實現，很不錯哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>仿QQ下拉折疊菜單（帶彈性）</title><style type="text/css">body{margin:10px;padding:10px;}body,td,div,span,li{font-size:9pt;}.title01,.title02{color:#fff;font-weight:bold;}#DoorP{border:12px solid #eee;width:150px;height:300px;padding:4px;background:#fff;}.title01{width:100%;height:25px;background:#00ccff;cursor:pointer;}.title02{width:100%;height:25px;background:#99cc00;cursor:pointer;}.content{background:#eee;border-bottom:2px solid #fff;overflow:hidden;color:#666;padding-left:8px;line-height:18px;}</style></head><body><div   class="70qarhlowxag"   id="DoorP"><table>  <tr>   <td>源碼分類</td>  </tr></table><div   id="70qarhlowxag"   class="content">歡迎您！</div><table>  <tr>   <td>網頁特效</td>  </tr></table><div   id="70qarhlowxag"   class="content">  編程樂園</div><table>  <tr><td>代碼下載</td>  </tr></table><div   id="70qarhlowxag"   class="content">  QQ菜單</div></div><script type="text/javascript">var open = 2;// 設置初始打開的層序號var openState = new Array();var closeState = new Array();var dH = 220;function $(id){  if(document.getElementById(id))  {   return document.getElementById(id);  }  else  {   alert("沒有找到!");  }}function $tag(id,tagName){  return $(id).getElementsByTagName(tagName)}function closeMe(Cid,Oid){      var h = parseInt(Ds[Cid].style.height);  //alert(h);  if(h > 0)  {   h = h - Math.ceil(h/3);       Ds[Cid].style.height = h+"px";  }  else  {       openMe(Oid);   clearTimeout(closeState[Cid]);   return false;  }  closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");}function openMe(Oid){  var h = parseInt(Ds[Oid].style.height);      if(h < dH)  {   h = h + Math.ceil((dH-h)/3);       Ds[Oid].style.height = h+"px";  }  else  {     clearTimeout(openState[Oid]);      return false;  }  openState[Oid] = setTimeout("openMe("+Oid+")");}var Ds = $tag("DoorP","div");var Ts = $tag("DoorP","table");if(Ds.length != Ts.length){  alert("標題和內容數目不相同!");}for(var i = 0 ; i < Ds.length ; i++){    if(i==open)  {   Ds[i].style.height = dH+"px";   Ts[i].className="title01";  }  else  {   Ds[i].style.height = "0px";   Ts[i].className="title02";  }  Ts[i].value = i;  Ts[i].onclick = function(){   if(open==this.value)   {    return false;   }   Ts[open].className="title02";   Ts[this.value].className="title01";   for(var i = 0 ; i < openState.length ; i++)   {    clearTimeout(openState[i]);    clearTimeout(closeState[i]);   }   closeMe(open,this.value);   //openMe(this.value);   open = this.value;  }} //無動畫打開層函數function showDiv(id){    Ds[id].style.height=dH+"px";  Ds[open].style.height="0px";  open = id;}//動畫打開層函數</script></body></html>

上一篇：DIV+js后臺左側專用菜單

下一篇：仿QQ折疊菜單平滑型（JS+css）