javascript渐变显示的雅虎中国选项卡效果代码_导航菜单

来源：海亿美食网

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>y</title> 
<style type="text/css"> 
body { 
 margin: 0; 
 text-align: center; 
 font-size: 12px; 
} 
.papanel, .pabd, .paft, .patop {width: 348px;} 
.papanel { 
 background: #a5d0fd url("/article/upimages/pabg.gif") repeat-x; 
 border-left: 1px solid #7bbdff; 
 border-right: 1px solid #7bbdff; 
 font-family: arial; 
} 
.pabd { 
 clear: both; 
 overflow: hidden; 
 padding-bottom: .35em; 
 background: url("/article/upimages/patbg.gif") no-repeat top left; 
} 
.patop{ 
 height: 25px; 
 line-height: 20px; 
 overflow: hidden; 
} 
/*顶部圆角开始*/ 
.pabdt { 
 background: url("/article/upimages/pabdr.gif") 0 0 no-repeat; 
 width: 350px; 
 height: 4px; 
 overflow: hidden; 
} 
.pabdb { 
 background: url("/article/upimages/pabdr.gif") 0 -4px no-repeat; 
 width: 350px; 
 height: 3px; 
 overflow: hidden; 
} 
/*顶部圆角结束*/ 
.tabWin { 
 width: 340px; 
 margin: 0 auto; 
} 
.tabWin .TabTitle { 
 margin: .25em 0 0 0; 
 padding: 0; 
 list-style: none; 
 height: 40px; 
} 
.tabWin .TabTitle li { 
 float: left; 
 position: relative; 
 width: 112px; 
 height: 40px; 
 line-height: 40px; 
 text-align: center; 
} 
.tabWin .TabTitle li a { 
 display: block; 
 width: 109px; 
 height: 40px; 
} 
/*内置背景开始*/ 
.tabWin .TabContent { 
 position: relative; 
 clear: both; 
 width: 338px; 
 margin: 0 auto; 
 background: #fff; 
 border-left: 1px solid #85c3ff; 
 border-right: 1px solid #5ca3e9; 
 display: block; 
} 
/*外部小图标开始*/ 
.tabWin .icomailn { 
 background: url("/article/upimages/tabicmln.gif") 0 0 no-repeat; 
} 
.tabWin .icomail { 
 background: url("/article/upimages/tabicml.gif") 0 0 no-repeat; 
} 
.tabWin .icoalb { 
 background: url("/article/upimages/tabicalb.gif") 0 0 no-repeat; 
} 
.tabWin .icomus { 
 background: url("/article/upimages/tabicmus.gif") 0 0 no-repeat; 
} 
.tabWin .icofin { 
 background: url("/article/upimages/tabicfin.gif") 0 0 no-repeat; 
} 
.tabWin .icoalqq { 
 background: url("/article/upimages/tabicfin.gif") 0 0 no-repeat; 
} 
/*正常*/ 
.tabWin .tabWinNormal{ 
 background: url("/article/upimages/patabs1.gif") no-repeat; 
} 
/*1*/ 
.tabWin .tabWinAtive1 { 
 background: url("/article/upimages/patabsa.gif") no-repeat; 
} 
/*2*/ 
.tabWin .tabWinAtive2 { 
 background: url("/article/upimages/patabsb.gif") no-repeat; 
} 
/*3*/ 
.tabWin .tabWinAtive3 { 
 background: url("/article/upimages/patabsc.gif") no-repeat; 
} 
#patabs1 strong, #patabs2 strong{ 
 color: #0062c5; 
 font-size: 13px; 
 margin-left: 2em; 
} 
.tabWin .none { 
 height:150px; 
 text-align:center; 
 display:none; 
 filter:revealtrans(transition=22,duration=0.5) blendtrans(duration=0.5) alpha(opacity=97) progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#EBF0F4); 
} 
</style> 
 
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 n,itemNum; 
 for(var i=1;i<tabWinTotal+1;i++) 
 { 
 if (tabWinObj+"_Title"+i == obj.id) 
 { 
 itemNum = i; 
 //document.getElementById(tabWinObj+"_Content"+i).className = "block"; 
 TransitionEffect(tabWinObj+"_Content"+i,'x',1); 
 }else{ 
 //document.getElementById(tabWinObj+"_Content"+i).className = "none"; 
 TransitionEffect(tabWinObj+"_Content"+i,'x',0); 
 } 
 } 
 var tabPatabs1 = document.getElementById("patabs1"); 
 var tabPatabs2 = document.getElementById("patabs2"); 
 if(tabPatabs1!=null && tabPatabs2!=null) 
 { 
 if (itemNum >= 4){n = itemNum - 3;}else{n = itemNum}; 
 if(itemNum < 4) 
 { 
 tabPatabs1.className = "TabTitle tabWinAtive"+n; 
 tabPatabs2.className = "TabTitle tabWinNormal"; 
 }else{ 
 tabPatabs1.className = "TabTitle tabWinNormal"; 
 tabPatabs2.className = "TabTitle tabWinAtive"+n; 
 } 
 } 
} 
function tabMouseOut(){ 
 window.clearTimeout(waitInterval); 
} 
/*过渡效果*/ 
function TransitionEffect(DivID,Cur,DoType) 
{ 
 var display = (DoType == 1)?"block":"none"; 
 if (($(DivID) != null)){if (Cur != 'x'){$(DivID).filters.revealTrans.Transition = Cur;$(DivID).filters.revealTrans.apply();$(DivID).style.display = display; $(DivID).filters.revealTrans.play();}else{$(DivID).filters.blendTrans.apply();$(DivID).style.display = display; $(DivID).filters.blendTrans.play();};}; 
} 
function $(){var elements = new Array();for (var i = 0; i < arguments.length; i++) {var element = arguments[i];if (typeof element == 'string'){if(document.getElementById(element)){element = document.getElementById(element);}else{element = document.getElementsByName(element);}if (arguments.length == 1){return element;}}elements.push(element);}return elements;};

</ script> 
</head> 
<body> 
 
 
 
 乐为 
 
 
 
 <li id="tabWin_Title1" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"> 电影</li> 
 <li id="tabWin_Title2" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"> 电视剧</li> 
 <li id="tabWin_Title3" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"> 体育节目</li> 
 
 
 111 
 222 
 333 
 
 
 
 
 
 
 <li id="tabWin_Title4" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"> 网络游戏</li> 
 <li id="tabWin_Title5" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"> 单机游戏</li> 
 <li id="tabWin_Title6" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"> 手机游戏</li> 
 
 
 ddesse 
 555 
 666 
 
 
 
 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

显示全文

全部频道

javascript渐变显示的雅虎中国选项卡效果代码_导航菜单