光滑展開合攏的Js菜單效果

2024-09-05 12:20:49

字體：大中小

來源：轉載

供稿：網友

一個光滑展開又合攏的Js菜單效果，無jQuery插件，完全JavaScript代碼實現，沒有過多修飾，有興趣的美化一下，肯定是款不錯的折疊菜單。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="html/txt; charset=utf-8" /><title>光滑展開合攏的Js菜單效果</title><style>*{margin:0;padding:0;}ul,li{list-style:none;}#con{width:164px; margin:50px auto 0;}#con h4.top{ height:4px; width:164px; overflow:hidden;}#con h4.bottom{height:4px; width:164px;overflow:hidden;}#con div{height:0px; overflow:hidden;}#con h3{border-top:2px solid #fff; border-bottom:1px solid #D6EFFF;}</style><script language="javascript">var speed = 30;var oCon = null;	var oH3List = null;var oDivList = null;var oUlList = null;var oldNum = null;var clickNum = null;var hideTimer=null;var showTimer=null;window.onload=function(){	oCon = document.getElementById("con");	oH3List = oCon.getElementsByTagName("h3");	oUlList = oCon.getElementsByTagName("ul");	oDivList = oCon.getElementsByTagName("div");	for(var i=0;i<oUlList.length;i++){		oH3List[i].xuhao=i;		oH3List[i].onclick=function(){			clickNum =this.xuhao;			changeCatalog();		};	}}	function changeCatalog(){	var old_num_2,click_num_2;	old_num_2 = null;	click_num_2= null;	if(oldNum==null){		click_Num_2=clickNum;		showTimer = setInterval("showUl("+click_Num_2+")",speed);	}else if(oldNum == clickNum){		old_num_2=oldNum;		hideTimer = setInterval("hideUl("+old_num_2+")",speed);	}else{		old_num_2=oldNum;		click_num_2=clickNum;		hideTimer = setInterval("hideUl("+old_num_2+")",speed);		showTimer = setInterval("showUl("+click_num_2+")",speed);	}}function showUl(num){		var move_num1 =Math.ceil((oUlList[num].offsetHeight-oDivList[num].offsetHeight)/10);	if(move_num1>=1){		oDivList[num].style.height = oDivList[num].offsetHeight+move_num1+"px";	}else{		oldNum=num;		clearInterval(showTimer);	}}function hideUl(num){	var move_num2=Math.ceil((oDivList[num].offsetHeight)/10);	if(move_num2>0){		oDivList[num].style.height=oDivList[num].offsetHeight -move_num2+"px";	}else{		clearInterval(hideTimer);		if(clickNum==num){			oldNum=null;		}	}}</script></head>	<body><div   class="tqwrbpd"   id="con">	<h4 class="top"></h4>	<h1></h1>	<h3>設計素材</h3>	<div>		<ul>			<li>精品圖標</li>			<li>圖片幻燈</li>			<li>網頁播放器</li>		</ul>	</div>	<h3>模板素材</h3>	<div>		<ul>			<li>企業網站</li>			<li>兒童網站</li>			<li>音樂網站</li>			<li>Discuz模板</li>		</ul>	</div>	<h3>源碼下載</h3>	<div>		<ul>			<li>jQuery</li>			<li>Ajax</li>			<li>PHP</li>		</ul>	</div>	<h3>網頁特效</h3>	<div>		<ul>			<li>菜單</li>			<li>表單</li>			<li>瀏覽器</li>		</ul>	</div>	<h4 class="bottom"></h4></div>	</body></html>

上一篇：自動固定頂部的懸浮菜單欄代碼

下一篇：兩個有動畫功能的jQuery導航菜單