网页特效代码，仿雅虎右侧的菜单代码特效
<HTML><HEAD><TITLE>仿雅虎菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
MARGIN: 6px 0px; FONT: 12px 宋体; TEXT-ALIGN: center
}
.divArea3 {
WIDTH: 750px
}
.divArea3 .divAreaCol1 {
FLOAT: left; WIDTH: 371px
}
.divArea3 .divAreaCol2 {
FLOAT: right; WIDTH: 280px
}
.divArea3Box {
BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 2px; PADDING-LEFT: 2px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 100%; LINE-HEIGHT: 120px; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 120px; TEXT-ALIGN: center
}
A {
COLOR: #999999; TEXT-DECORATION: none
}
.tabWin {
WIDTH: 371px; HEIGHT: 230px
}
.tabWin {
BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; DISPLAY: inline; FLOAT: left; MARGIN: 0px 3px; OVERFLOW: hidden; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid
}
.crbl {
BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; DISPLAY: inline; FLOAT: left; MARGIN: 0px 3px; OVERFLOW: hidden; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid
}
.tabWinInnerBox {
MARGIN: 5px; OVERFLOW: hidden; WIDTH: 361px; HEIGHT: 220px
}
.tabWinLine1 {
WIDTH: 360px; HEIGHT: 29px
}
.tabWinLine2 {
DISPLAY: block
}
.tabWinLine4 {
DISPLAY: none
}
.tabWinLine2 {
WIDTH: 360px; HEIGHT: 1px
}
.tabWinLine4 {
WIDTH: 360px; HEIGHT: 1px
}
.tabWinLine2 DIV {
FLOAT: left; WIDTH: 118px; HEIGHT: 1px; BACKGROUND-COLOR: #cccccc
}
tabWinLine4 DIV {
FLOAT: left; WIDTH: 118px; HEIGHT: 1px; BACKGROUND-COLOR: #cccccc
}
.tabWinLine1 .sepa {
BACKGROUND-IMAGE: url(images/0.gif); WIDTH: 3px
}
.tabWinLine2 .sepa {
BACKGROUND-IMAGE: url(images/0.gif); WIDTH: 3px
}
.tabWinLine4 .sepa {
BACKGROUND-IMAGE: url(images/0.gif); WIDTH: 3px
}
.tabWinLine2 .tabWinLine3 {
BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #ffffff
}
tabWinLine4 tabWinLine3 {
BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #ffffff
}
.tabWinLine1 DIV {
FONT-WEIGHT: bold; FLOAT: left; BACKGROUND-IMAGE: url(images/c21_1.gif); WIDTH: 118px; CURSOR: pointer; COLOR: #1f3a87; LINE-HEIGHT: 26px; HEIGHT: 26px
}
.tabWinLine1 .tabWinTitle {
BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BACKGROUND-IMAGE: url(images/0.gif); BORDER-LEFT: #cccccc 1px solid; WIDTH: 116px; COLOR: #b10000; HEIGHT: 28px; BACKGROUND-COLOR: white
}
.tabWinInnerBox .showblock {
BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 3px; PADDING-LEFT: 7px; PADDING-BOTTOM: 8px; MARGIN: 0px 0px 3px; OVERFLOW: hidden; BORDER-LEFT: #cccccc 1px solid; WIDTH: 348px; PADDING-TOP: 9px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 143px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left
}
.tabWinInnerBox .hiddenblock {
BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 3px; PADDING-LEFT: 7px; PADDING-BOTTOM: 8px; MARGIN: 0px 0px 3px; OVERFLOW: hidden; BORDER-LEFT: #cccccc 1px solid; WIDTH: 348px; PADDING-TOP: 9px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 143px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left
}
.hiddenblock {
DISPLAY: none
}
.showblock {
DISPLAY: block
}
.divTab2 {
DISPLAY: inline; FLOAT: left; MARGIN: 0px 3px; OVERFLOW: hidden; WIDTH: auto; HEIGHT: 232px
}
.divTab2 .TabTitle {
FONT-SIZE: 12px; WIDTH: 280px; HEIGHT: 24px
}
.divTab2 .normal {
BACKGROUND-IMAGE: url(images/mtitle2.gif); COLOR: #1f3a87
}
.divTab2 .active {
FONT-WEIGHT: bold; BACKGROUND-IMAGE: url(images/mtitle1.gif); COLOR: #1f3a87
}
.divTab2 .TabTitle .sepa {
BACKGROUND-IMAGE: url(images/speabg.gif); WIDTH: 1px
}
.divTab2 .TabTitle .border {
BACKGROUND-IMAGE: url(images/speabg.gif); WIDTH: 1px
}
.divTab2 .TabTitle DIV {
FLOAT: left; WIDTH: 92px; CURSOR: pointer; LINE-HEIGHT: 21px; PADDING-TOP: 3px; HEIGHT: 21px
}
.divTab2 .showblock {
BORDER-RIGHT: #064ca1 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; BORDER-LEFT: #064ca1 1px solid; WIDTH: 278px; PADDING-TOP: 9px; BORDER-BOTTOM: #064ca1 1px solid; HEIGHT: 198px; TEXT-ALIGN: left
}
.divTab2 .hiddenblock {
BORDER-RIGHT: #064ca1 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; BORDER-LEFT: #064ca1 1px solid; WIDTH: 278px; PADDING-TOP: 9px; BORDER-BOTTOM: #064ca1 1px solid; HEIGHT: 198px; TEXT-ALIGN: left
}
</STYLE>
<SCRIPT language=javascript>
var waitInterval;
var mouseDelayTime = 200;
/*选项窗*/
function tabWinMouseOver(tabWinObj,tabWinTotal,obj)
{
window.clearTimeout(waitInterval);
waitInterval=window.setTimeout("ChangeDiv3('"+tabWinObj+"',"+tabWinTotal+","+obj.id+")",mouseDelayTime)
}
function ChangeDiv3(tabWinObj,tabWinTotal,obj)
{
var itemNum;
for(var i=0;i<tabWinTotal;i++)
{
if (tabWinObj+"_Title"+i == obj.id)
{
itemNum = i;
document.getElementById(tabWinObj+"_Title"+i).className = "tabWinTitle";
document.getElementById(tabWinObj+"_Line"+i).className = "tabWinLine3";
document.getElementById(tabWinObj+"_Content"+i).className = "showblock";
}else{
var divID = document.getElementById(tabWinObj+"_Title"+i);
if (divID != null){divID.className = "";}
var ContentDiv = document.getElementById(tabWinObj+"_Content"+i);
if(ContentDiv!=null){ContentDiv.className = "hiddenblock";}
var BDiv = document.getElementById(tabWinObj+"_Line"+i);
if(BDiv!=null){BDiv.className="";}
}
}
var tabWinImg1 = document.getElementById(tabWinObj+"_Img1");
var tabWinImg2 = document.getElementById(tabWinObj+"_Img2");
if(tabWinImg1!=null && tabWinImg2!=null)
{
if(itemNum < 4)
{
tabWinImg1.className = "tabWinLine2";
tabWinImg2.className = "tabWinLine4";
}else{
tabWinImg1.className = "tabWinLine4";
tabWinImg2.className = "tabWinLine2";
}
}
}
/*选项卡*/
function tabMouseOver(tabObj,tabTotal,obj)
{
window.clearTimeout(waitInterval);
waitInterval=window.setTimeout("changeTabDiv('"+tabObj+"',"+tabTotal+","+obj.id+")",mouseDelayTime)
}
function changeTabDiv(tabObj,tabTotal,obj){
for(i=0; i <tabTotal; i++)
{
if (tabObj+"_Title"+i == obj.id)
{
document.getElementById(tabObj+"_Title"+i).className = "active";
document.getElementById(tabObj+"_Content"+i).className = "showblock";
}else{
document.getElementById(tabObj+"_Title"+i).className = "normal";
document.getElementById(tabObj+"_Content"+i).className = "hiddenblock";
}
}
}
function tabMouseOut(){window.clearTimeout(waitInterval);}
</SCRIPT>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<DIV class=divArea3>
<DIV class=divAreaCol1><!-- 选项窗开始 -->
<DIV class=tabWin id=tabWin>
<DIV class=tabWinInnerBox>
<DIV class=tabWinLine1>
<DIV class=tabWinTitle id=tabWin_Title1
onmouseover="tabWinMouseOver('tabWin',7,this);" onmouseout=tabMouseOut();><A
class=a4 href="javascript:void(0);">热点概念股</A></DIV>
<DIV class=sepa></DIV>
<DIV id=tabWin_Title2 onMouseOver="tabWinMouseOver('tabWin',7,this);"
onmouseout=tabMouseOut();><A class=a4 href="javascript:void(0);">数据分析</A></DIV>
<DIV class=sepa></DIV>
<DIV id=tabWin_Title3 onMouseOver="tabWinMouseOver('tabWin',7,this);"
onmouseout=tabMouseOut();><A class=a4 href="javascript:void(0);">权证市场</A>
</DIV></DIV>
<DIV class=tabWinLine2 id=tabWin_Img1>
<DIV class=tabWinLine3 id=tabWin_Line1><IMG height=1 alt="" src=""
width=1></DIV>
<DIV class=sepa><IMG height=1 alt="" src="" width=1></DIV>
<DIV id=tabWin_Line2><IMG height=1 alt="" src="" width=1></DIV>
<DIV class=sepa><IMG height=1 alt="" src="" width=1></DIV>
<DIV id=tabWin_Line3><IMG height=1 alt="" src="" width=1></DIV></DIV>
<DIV class=showblock id=tabWin_Content1>ff </DIV>
<DIV class=hiddenblock id=tabWin_Content2>ff </DIV>
<DIV class=hiddenblock id=tabWin_Content3>ff </DIV>
<DIV class=tabWinLine1>
<DIV id=tabWin_Title4 onMouseOver="tabWinMouseOver('tabWin',7,this);"
onmouseout=tabMouseOut();><A class=a4 href="javascript:void(0);">研究报告</A></DIV>
<DIV class=sepa></DIV>
<DIV id=tabWin_Title5 onMouseOver="tabWinMouseOver('tabWin',7,this);"
onmouseout=tabMouseOut();><A class=a4 href="javascript:void(0);">名家专栏</A></DIV>
<DIV class=sepa></DIV>
<DIV id=tabWin_Title6 onMouseOver="tabWinMouseOver('tabWin',7,this);"
onmouseout=tabMouseOut();><A class=a4
href="javascript:void(0);">机构观点</A></DIV></DIV>
<DIV class=tabWinLine4 id=tabWin_Img2>
<DIV id=tabWin_Line4><IMG height=1 alt="" src="" width=1></DIV>
<DIV class=sepa><IMG height=1 alt="" src="" width=1></DIV>
<DIV id=tabWin_Line5><IMG height=1 alt="" src="" width=1></DIV>
<DIV class=sepa><IMG height=1 alt="" src="" width=1></DIV>
<DIV id=tabWin_Line6><IMG height=1 alt="" src="" width=1></DIV></DIV>
<DIV class=hiddenblock id=tabWin_Content4>fffsdafdsa </DIV>
<DIV class=hiddenblock id=tabWin_Content5>ff safasf</DIV>
<DIV class=hiddenblock id=tabWin_Content6>ggfdsafasdfsdafads
</DIV></DIV></DIV><!-- 选项窗结束 --></DIV>
</DIV>
</BODY></HTML>
