帶動(dòng)畫(huà)下拉展開(kāi)的CSS滑動(dòng)門(mén)

2024-09-05 12:19:27

字體：大中小

供稿：網(wǎng)友

這個(gè)滑動(dòng)門(mén)真的太好了，在雅虎網(wǎng)站扒下來(lái)的，會(huì)動(dòng)畫(huà)展開(kāi)的滑動(dòng)門(mén)，你見(jiàn)過(guò)沒(méi)？過(guò)一段時(shí)間會(huì)自動(dòng)合上，在yahoo首頁(yè)的郵箱登錄處有這種效果，有興趣可以比較一下。

<!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>會(huì)展開(kāi)的滑動(dòng)門(mén)</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body{ margin:0px; padding:0px; font-size:14px; line-height:18px; color:#111111;}a:link,a:visited{ display:block; width:90px; height:25px; margin:0px; padding:0px; text-align:center; line-height:25px; font-size:14px; font-weight:bold; text-decoration:none; color:#111111;}a:hover{ font-size:14px; font-weight:bold; text-decoration:underline; color:#111111;}#b{ display:block; width:500px; height:500px; margin:0px auto; padding:0px; padding-top:50px;}#container{ display:block; width:300px; height:117px; margin:0px; padding:0px; background-color:#E8F3FF; border:1px solid #95CAFF; text-align:center; overflow:hidden;}#nav{ display:block; width:300px; height:30px; margin:0px; margin-top:85px; padding:0px;}.navB{ display:block; float:left; width:90px; height:25px; background-color:#FFFFFF; border:1px solid #95CAFF; margin:0px; margin-left:6px; padding:0px; text-align:center; line-height:25px;}.navB_Cur{display:block; float:left; width:90px; height:30px; background-color:#FFFFFF; border:1px solid #95CAFF; border-bottom:none; margin:0px; margin-left:6px; padding:0px; text-align:center; line-height:25px; position:relative; z-index:1000;}.content{ display:none;}.content_Cur{ display:block; width:266px; height:70px; margin:0px; margin-top:0px; margin-left:6px; *margin-left:0px; padding:10px; background-color:#FFFFFF; border:1px solid #95CAFF;}</style></head><body><div   class="iwvjtn8m0"   id="b">  <div   class="iwvjtn8m0"   id="container">    <div   class="iwvjtn8m0"   id="nav">      <span id="newsBtn" class="navB" onmouseover="changeTab('newsBtn','homeBtn','circleBtn','news','home','circle');" onmouseout="delay();">主導(dǎo)航</span>	  <span id="homeBtn" class="navB" onmouseover="changeTab('homeBtn','newsBtn','circleBtn','home','news','circle');" onmouseout="delay();">最新更新</span>	  <span id="circleBtn" class="navB" onmouseover="changeTab('circleBtn','homeBtn','newsBtn','circle','home','news');" onmouseout="delay();">下載排行</span>    </div>    <div   class="iwvjtn8m0"   id="news" class="content" onmouseout="delay();" onmouseover="removeDelay();">綜合更新，查看</div>    <div   class="iwvjtn8m0"   id="home" class="content" onmouseout="delay();" onmouseover="removeDelay();">最新更新的軟件</div>    <div   class="iwvjtn8m0"   id="circle" class="content" onmouseout="delay();" onmouseover="removeDelay();">下載排行，睢一瞧……</div>  </div>  <div   class="iwvjtn8m0"   id="tt"></div></div><script language="javascript">function $(id){  return document.getElementById(id);}var state="closed";var time=3000;var openH=222;var closeH=108;var activeH=116;var myMar;var myDelay;function openIng(){  if(activeH!=openH-9){	activeH+=parseInt((openH-activeH)*0.1);	$("container").style.height=activeH+"px";	$("tt").innerHTML=activeH+" | "+closeH;  }  else{    clearInterval(myMar);	state="opened";	$("tt").innerHTML=state;  } }function startOpen(){    myMar=setInterval(openIng,5);	state="opening";}function closeTab(){  $("newsBtn").className="navB";  $("homeBtn").className="navB";  $("circleBtn").className="navB";  $("news").className="content";  $("home").className="content";  $("circle").className="content";}function closeIng(){  if(activeH!=closeH+9){	activeH+=parseInt((closeH-activeH)*0.1);	$("container").style.height=activeH+"px";	$("tt").innerHTML=activeH+" | "+closeH;  }  else{    clearInterval(myMar);	closeTab();	state="closed";	$("tt").innerHTML=state;  }}function startClose(){    myMar=setInterval(closeIng,5);	state="closing";}function delay(){  if(state=="opened"){    myDelay=setTimeout(startClose,time);  }}function removeDelay(){  clearTimeout(myDelay);}function changeTab(actBtn,sndBtn,thdBtn,actlay,sndlay,thdlay){  $(actBtn).className="navB_Cur";  $(sndBtn).className="navB";  $(thdBtn).className="navB";  $(actlay).className="content_Cur";  $(sndlay).className="content";  $(thdlay).className="content";  removeDelay();  if(state=="closed"){    startOpen();  }}</script></body></html>

上一篇：標(biāo)簽在底部的簡(jiǎn)潔CSS選項(xiàng)卡

下一篇：JS+CSS另類折疊菜單