页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 导航菜单 → 正文内容

javascript渐变显示的雅虎中国选项卡效果代码

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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" /> 
<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> 
<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 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> 
<div class="pabdt"> </div> 
<div class="papanel"> 
  <div class="pabd"> 
    <div class="patop"> <strong>乐为</strong> </div> 
     
    <div class="tabWin"> 
      <ul class="TabTitle tabWinNormal" id="patabs1"> 
        <li id="tabWin_Title1" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icomus"> <strong>电影</strong></a></li> 
        <li id="tabWin_Title2" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icoalb"> <strong>电视剧</strong></a></li> 
        <li id="tabWin_Title3" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icomail"> <strong>体育节目</strong></a></li> 
      </ul> 
      <div class="TabContent"> 
        <div id="tabWin_Content1" class="none"> 111 </div> 
        <div id="tabWin_Content2" class="none"> 222 </div> 
        <div id="tabWin_Content3" class="none"> 333 </div> 
      </div> 
    </div> 
     
     
    <div class="tabWin"> 
      <ul class="TabTitle tabWinNormal" id="patabs2"> 
        <li id="tabWin_Title4" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icoalqq"> <strong>网络游戏</strong></a></li> 
        <li id="tabWin_Title5" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icofin"> <strong>单机游戏</strong></a></li> 
        <li id="tabWin_Title6" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icomailn"> <strong>手机游戏</strong></a></li> 
      </ul> 
      <div class="TabContent"> 
        <div id="tabWin_Content4" class="none"> ddesse </div> 
        <div id="tabWin_Content5" class="none"> 555 </div> 
        <div id="tabWin_Content6" class="none"> 666 </div> 
      </div> 
    </div> 
     
  </div> 
</div> 
<div class="pabdb"> </div> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：javascript渐变显示的雅虎中国选项卡效果代码