代码简介:这个滑动门真的太好了,在雅虎网站扒下来的,会动画展开的滑动门,你见过没?过一段时间会自动合上,在yahoo首页的邮箱登录处有这种效果,有兴趣可以比较一下。
代码内容:
<!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>鼠标滑动带动画下拉展开的滑动门代码_网页代码站(www.webdm.cn)</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; 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; 500px; height:500px; margin:0px auto; padding:0px; padding-top:50px;} #container{ display:block; 300px; height:117px; margin:0px; padding:0px; background-color:#E8F3FF; border:1px solid #95CAFF; text-align:center; overflow:hidden;} #nav{ display:block; 300px; height:30px; margin:0px; margin-top:85px; padding:0px;} .navB{ display:block; float:left; 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; 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; 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 id="b"> <div id="container"> <div id="nav"> <span id="newsBtn" class="navB" onmouseover="changeTab ('newsBtn','homeBtn','circleBtn','news','home','circle');" onmouseout="delay();"><a href="#" target="_self">网 页代码站</a></span> <span id="homeBtn" class="navB" onmouseover="changeTab ('homeBtn','newsBtn','circleBtn','home','news','circle');" onmouseout="delay();"><a href="#" target="_self">最 新更新</a></span> <span id="circleBtn" class="navB" onmouseover="changeTab ('circleBtn','homeBtn','newsBtn','circle','home','news');" onmouseout="delay();"><a href="#" target="_self">下 载排行</a></span> </div> <div id="news" class="content" onmouseout="delay();" onmouseover="removeDelay();">网页代码站提供高质量的代 码下载供学习,希望记住我们的域名:WebDn.CN</div> <div id="home" class="content" onmouseout="delay();" onmouseover="removeDelay();">网页代码站最新更新的代码 </div> <div id="circle" class="content" onmouseout="delay();" onmouseover="removeDelay();">下载排行,睢一瞧…… </div> </div> <div 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> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/f256cdfc-d818-4d48-ad46-f791ffe8b71e.html