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

<!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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0Avar%20waitInterval%3B%20%0D%0Avar%20mouseDelayTime%20%3D%20200%3B%20%0D%0A%2F*%E9%80%89%E9%A1%B9%E7%AA%97*%2F%20%0D%0Afunction%20tabWinMouseOver(tabWinObj%2CtabWinTotal%2Cobj)%20%0D%0A%7B%20%0D%0A%20%20%20%20%20%20window.clearTimeout(waitInterval)%3B%20%0D%0A%20%20%20%20waitInterval%3Dwindow.setTimeout(%22ChangeDiv3('%22%2BtabWinObj%2B%22'%2C%22%2BtabWinTotal%2B%22%2C%22%2Bobj.id%2B%22)%22%2CmouseDelayTime)%20%0D%0A%7D%20%0D%0Afunction%20ChangeDiv3(tabWinObj%2CtabWinTotal%2Cobj)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20n%2CitemNum%3B%20%0D%0A%20%20%20%20for(var%20i%3D1%3Bi%3CtabWinTotal%2B1%3Bi%2B%2B)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(tabWinObj%2B%22_Title%22%2Bi%20%3D%3D%20obj.id)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20itemNum%20%3D%20i%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fdocument.getElementById(tabWinObj%2B%22_Content%22%2Bi).className%20%3D%20%22block%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20TransitionEffect(tabWinObj%2B%22_Content%22%2Bi%2C'x'%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fdocument.getElementById(tabWinObj%2B%22_Content%22%2Bi).className%20%3D%20%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20TransitionEffect(tabWinObj%2B%22_Content%22%2Bi%2C'x'%2C0)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20var%20tabPatabs1%20%3D%20document.getElementById(%22patabs1%22)%3B%20%20%0D%0A%20%20%20%20var%20tabPatabs2%20%3D%20document.getElementById(%22patabs2%22)%3B%20%20%0D%0A%20%20%20%20if(tabPatabs1!%3Dnull%20%26%26%20tabPatabs2!%3Dnull)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(itemNum%20%3E%3D%204)%7Bn%20%3D%20itemNum%20-%203%3B%7Delse%7Bn%20%3D%20itemNum%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20if(itemNum%20%3C%204)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabPatabs1.className%20%3D%20%22TabTitle%20tabWinAtive%22%2Bn%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabPatabs2.className%20%3D%20%22TabTitle%20tabWinNormal%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabPatabs1.className%20%3D%20%22TabTitle%20tabWinNormal%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabPatabs2.className%20%3D%20%22TabTitle%20tabWinAtive%22%2Bn%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20tabMouseOut()%7B%20%0D%0A%20%20%20%20window.clearTimeout(waitInterval)%3B%20%0D%0A%7D%20%0D%0A%2F*%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C*%2F%20%0D%0Afunction%20TransitionEffect(DivID%2CCur%2CDoType)%20%20%0D%0A%7B%20%20%0D%0A%20%20%20%20var%20display%20%3D%20(DoType%20%3D%3D%201)%3F%22block%22%3A%22none%22%3B%20%0D%0A%20%20%20%20if%20((%24(DivID)%20!%3D%20null))%7Bif%20(Cur%20!%3D%20'x')%7B%24(DivID).filters.revealTrans.Transition%20%3D%20Cur%3B%24(DivID).filters.revealTrans.apply()%3B%24(DivID).style.display%20%3D%20display%3B%20%24(DivID).filters.revealTrans.play()%3B%7Delse%7B%24(DivID).filters.blendTrans.apply()%3B%24(DivID).style.display%20%3D%20display%3B%20%24(DivID).filters.blendTrans.play()%3B%7D%3B%7D%3B%20%0D%0A%7D%20%0D%0Afunction%20%24()%7Bvar%20elements%20%3D%20new%20Array()%3Bfor%20(var%20i%20%3D%200%3B%20i%20%3C%20arguments.length%3B%20i%2B%2B)%20%7Bvar%20element%20%3D%20arguments%5Bi%5D%3Bif%20(typeof%20element%20%3D%3D%20'string')%7Bif(document.getElementById(element))%7Belement%20%3D%20document.getElementById(element)%3B%7Delse%7Belement%20%3D%20document.getElementsByName(element)%3B%7Dif%20(arguments.length%20%3D%3D%201)%7Breturn%20element%3B%7D%7Delements.push(element)%3B%7Dreturn%20elements%3B%7D%3B%20%0D%0A%0D%0A%3C%2Fscript%3E"> 
</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);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" class="icomus"> <strong>电影</strong></a></li> 
        <li id="tabWin_Title2" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" class="icoalb"> <strong>电视剧</strong></a></li> 
        <li id="tabWin_Title3" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" 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);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" class="icoalqq"> <strong>网络游戏</strong></a></li> 
        <li id="tabWin_Title5" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" class="icofin"> <strong>单机游戏</strong></a></li> 
        <li id="tabWin_Title6" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" 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 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程