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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript渐变显示的雅虎中国选项卡效果代码

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 55 ::

收藏到网摘: n/a

国外Lightbox v2.03.3 最新版下载用javascript来实现select标签的美化的代码

点击运行可以看到效果:

<!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 全选提示:你可先修改部分代码,再按运行]

国外Lightbox v2.03.3 最新版下载用javascript来实现select标签的美化的代码

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

评论 (0) All