雅虎中国选项卡效果

<!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>

提示：您可以先修改部分代码再运行，对于jquery等代码需要运行后刷新一次

上一篇：新浪的图片新闻效果

下一篇：如何读取文本文件

留下脚印压缩包密码:sosuo8

全部评论:

alexd980	2009-10-22 9:18:00
Very nice site!

alexc964	2009-9-15 19:00:00
Very nice site!

shouhs	2009-9-4 16:25:00
太好了，找到良师了。
^-^
Pharmg811	2009-7-31 17:16:00
Very nice site!
Thanks you!
chb908	2009-6-3 1:00:00
birthday gift
what?
maxx0101	2009-5-25 23:46:00
red sea

Rimma	2009-4-9 2:42:00
Extraordinarity: ,

Alex	2009-3-31 2:57:00
Good site, admin.

二	2009-2-23 14:39:00
恩恩
^-^
iohgx	2008-12-6 23:10:00
hello, good site.

fbl0317	2008-2-18 10:13:00
非常棒
^-^
chunqiu	2008-2-1 17:34:00
xiandfawrfa
?
DoeMike	2007-12-20 14:36:00
Hello! I'm MikeDoe! Check out my site!
?
久久乡情	2007-12-2 20:07:00
怎么通不过 ff 啊，郁闷的，找找原因看看
FF和IE，想起就痛苦！
酷	2007-11-14 21:00:00
找了很久酷啊 ^_^
哈哈
Gautam Asaf	2007-10-22 8:05:00
cuz we both thought,that love last foreve. Gautam Asaf.

test	2007-10-15 8:56:00
tester aposter

entoebzazt	2007-8-30 11:12:00
Hello! Good Site! Thanks you! xwdhxrndlneod
^-^
Rae Halvdan	2007-8-26 16:33:00
Leave it till tomorrow to unpack my cas. Rae Halvdan.
OK^-^

申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“ 雅虎中国选项卡效果 ”的原作者，若侵犯您的版权,请与我联系!在此请您原谅我的幼稚和无知!联系方法：email:ahuinan@21cn.com QQ:106494262

感谢以下网友对网站提出的建议：
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)

文章档案

作者：佚名
来源：转载
日期：2007-2-14 9:24:00
点击：12678

网友投票(您觉得这篇文章怎样？)

请稍侯......

实用文章总结

文章阅读排行

随便看看

最新评论