二级动态导航

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> BODY { FONT-SIZE: 12px; MARGIN: 0px;BACKGROUND-COLOR: #131d30 } A:link { COLOR: #7ea9bf; TEXT-DECORATION: none } A:visited { COLOR: #7ea9bf; TEXT-DECORATION: none } A:hover { COLOR: #ffffff; TEXT-DECORATION: underline } A:active { COLOR: #ffffff; TEXT-DECORATION: none } .Defautl-Navigation { FONT-SIZE: 12px; FLOAT: left; COLOR: #7ea9bf; LINE-HEIGHT: 23px; HEIGHT: 23px; TEXT-ALIGN: center } </style> <SCRIPT language=javascript> var f=0; var y=0; var div_obj function over(obj){ div_obj=obj _f=0; y=0; document.getElementById(obj).innerHTML=""; document.getElementById(obj).style.width="0px"; document.getElementById(obj).style.height="1px"; document.getElementById(obj).style.display=""; timerDIV(); } function out(obj){ obj.style.display="none"; } function Tout(){ document.getElementById(div_obj).style.display="none"; } function Tover(){ document.getElementById(div_obj).style.display=""; } function timerDIV(){ if( _f >= 140){/*宽度*/ objy(); return ; } else{ _f=_f+10; document.getElementById(div_obj).style.width=_f+"px"; window.setTimeout(timerDIV,1); } } function objy(){ if(y >= 150){/*高度*/ var str="<div style=\"width:150px;height:auto;float:left;font-size:12px;margin:6px;line-height:20px\"><a href=\"http://www.qpsh.com\">新闻-1</a><br/> <font style=\"color:#7EA9BF;font-size:11px;\">♦</font> <a href=\"http://www.qpsh.com\" style=\"font-size:11px;\">新闻-1-1</a><br/> <font style=\"color:#7EA9BF;font-size:11px;\">♦</font> <a href=\"http://www.qpsh.com\" style=\"font-size:11px\">新闻-1-2</a><br/> <font style=\"color:#7EA9BF;font-size:11px;\">♦</font> <a href=\"http://www.qpsh.com\" style=\"font-size:11px\">新闻-1-3</a><br/><a href=\"http://www.qpsh.com\">新闻-2</a><br /><a href=\"http://www.qpsh.com\">新闻-3</a><br/><\/div>"; document.getElementById(div_obj).innerHTML=str return ; } else{ y+=6; document.getElementById(div_obj).style.height=y+"px"; window.setTimeout(objy,1); } } </SCRIPT> <title>JS导航效果</title> </HEAD> <BODY> <DIV class=Default-top> <DIV style="BORDER: #51789b 1px solid; width:500px;HEIGHT:23px; margin:20px auto; position:relative;"> <DIV class=Defautl-Navigation style="WIDTH: 60px"><A href="#">首页</A></DIV> <DIV class=Defautl-Navigation style="WIDTH: 10px">|</DIV> <DIV class=Defautl-Navigation style="WIDTH: 70px; CURSOR: pointer"><A onMouseOver="over('two')" onmouseout=out(two) href="#">新闻 ∇</A> </DIV> <DIV class=Defautl-Navigation style="WIDTH: 10px">|</DIV> <DIV class=Defautl-Navigation style="WIDTH: 80px"><A href="#"> 联系我们</A></DIV> <DIV class=Defautl-Navigation style="WIDTH: 10px">|</DIV> <DIV class=Defautl-Navigation style="WIDTH: 50px"><A href="#"> 其他</A></DIV> <DIV id=two style="overflow:hidden;BORDER: #51789b 2px solid;DISPLAY: none; FILTER: alpha(Opacity=70); LEFT:300px; FLOAT:left; WIDTH: 1px; POSITION:absolute; TOP: 14px; left:80px; HEIGHT: 1px; BACKGROUND-COLOR: #444; -moz-opacity: 0.7" onmousemove=Tover() onmouseout=Tout()>No Content </DIV> </DIV> </DIV> </BODY> </HTML>
[时间：2008-10-31 16:08:53][点击:]

上下篇文章加载中...

本站关键字：宁波网络公司/宁波网站建设公司/宁波网站制作公司/宁波做网站公司

PHP技术文章

ASP技术文章

seo技术文章

windows技术文章

PHP代码

ASP代码

整站代码

CSS+JS代码

明星娱乐

经典笑话

美女图片

免费ASP空间

免费PHP空间

免费静态空间

免费全能空间

二级动态导航