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

更新时间：2007年10月21日 21:03:46 作者：

<!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 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

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

js仿土豆视频滚动菜单
比较漂亮的仿土豆视频导航菜单，漂亮大方
2008-05-05
js实现的XP风格的右键菜单
js实现的XP风格的右键菜单...
2007-03-03
基于jquery的淡入淡出选项卡效果代码
经典的Tab选项卡代码,淡入淡出,jquery插件版,希望大家能够喜欢,简洁未过多美化.
2010-06-06
javascript实现的又一个不错的滑动导航效果
javascript实现的又一个不错的滑动导航效果...
2007-04-04
超酷的鼠标拖拽翻页(分页)效果实现javascript代码
超酷的鼠标拖拽翻页(分页)效果实现javascript代码,非常的不错。
2009-09-09
javascript仿qq界面的折叠菜单实现代码
最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,需要的朋友可以参下
2012-12-12
js无限级折叠菜单精简版
一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。
2011-03-03
css实现会折叠、展开的菜单导航栏效果
基于css实现的会折叠、展开的树形菜单导航栏，很早以前写的，也没有过多美化，但是比较实用，如果想用的朋友就自己美化吧
2012-12-12
通用的二级菜单代码(css+javascript)
前几天做网站使用到二级菜单，想也没想就在网上当了几个，不过大多都不太满意，只有《CSS二级菜单》看上去似乎好一点，就使用了那个。
2009-07-07
麦鸡的TAB切换功能结合了javascript和css
麦鸡的TAB切换功能结合了javascript和css...
2007-12-12

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具