鼠标滑过带过渡效果的选项卡

时间:2008-12-06 17:06:25 ｜来源:网络｜作者:未知｜点击:次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过带过渡渐变效果的选项卡效果-测试页面-ACCP教程网</title>
<style>
ul, li { margin: 0; padding: 0; list-style-type: none; white-space:nowrap; overflow: hidden;}
ul.ultrig li { line-height:22px; padding-left: 12px; }
.ultrig li a { color: #993333; }
.tlfix { table-layout: fixed; overflow: hidden;}
#itg1 { width: 97px; height: 31px; background-image: url(http://www.accptech.com/demo/img/v8_dt0.gif); }
#itg1.select { width: 97px; height: 31px; background-image: url(http://www.accptech.com/demo/img/v8_dt1.gif); }
#itg1 a{ width: 97px; height: 31px; display: block; }
#itg2 { width: 103px; height: 31px; background-image: url(http://www.accptech.com/demo/img/v8_tf0.gif); }
#itg2.select { width: 97px; height: 31px; background-image: url(http://www.accptech.com/demo/img/v8_tf1.gif); }
#itg2 a{ width: 103px; height: 31px; display: block; }
#iatab1 , #iatab2 {  border-top-width: 0px; border-color:#E7D9BF; border-style:solid; background-color: #FFFFFF; }
h5 { font-size: 14px; margin-top: 6px; margin-bottom: 6px; white-space:nowrap;}
h5 a { color: #663333; }
body,td,th {
font-size: 12px;
}
</style>
<script type="text/javascript">
var nxtgn = 1;
function GetObj(objName){
	if(document.getElementById){
		return eval('document.getElementById("' + objName + '")');
	}else{
		return eval('document.all.' + objName);
	}
}
function sswth(t,num){ //
	if(num == -1) num = nxtgn;
	for(var i = 1;i <= 2;i++){
		if(GetObj(t+"tg" + i)) GetObj(t+"tg" + i).className = "";
		if(GetObj(t+"atab" + i)) {
			GetObj(t+"atab" + i).style.display = "none";

}
	}
	if(GetObj(t+"tg" + num)) GetObj(t+"tg" + num).className = "select";
	if(GetObj(t+"atab" + num)) {
		p = GetObj(t+"atab" + num);
		try {
		p.style.filter = "revealTrans(transition=12,duration=0.5) ";
		p.filters.revealTrans.apply(); 
		} catch(e) {}
		p.style.display = "";
		try { p.filters.revealTrans.play();  } catch(e) {}
	}
	nxtgn = num%2 + 1;
}
function addfvt(p1,p2){
	try
    {
        window.external.addFavorite(p1, p2);
    }
    catch (e) {
        try
        {
            window.sidebar.addPanel(p2, p1, "");
		}
		catch (e){
			return false;
		}
	}
}
</script>
</head>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="210" valign="top"><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="97" id="itg1" class="select"><a href="javascript:;" _fcksavedurl="javascript:;" target="_self" onmouseover="sswth('i',1)"><span style="display:none">DAILY TRENDS</span></a></td>
<td id="itg2"><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com" onmouseover="sswth('i',2)"><span style="display:none">时尚论坛</span></a></td>
</tr>
</table>
<table width="200" height="178" border="1" cellpadding="8" cellspacing="0" class="tlfix" id="iatab1">
<tr>
<td style="border-width: 0px;"><h5><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com">儿童房大变身</a></h5>
<a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com" class="text8">　　最成功的儿童房，是能伴随孩子不断成长，只需简单改造就能适应孩子需求的设计。....</a><br />
<div style="font-size: 8px; line-height:8px;"> </div>
<ul class="ultrig">
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com">时尚圈刮起漆皮旋风</a></li>
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com">“拉链”时尚设计新元素</a></li>
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com">章子怡登《时尚先生》封面</a></li>
</ul></td>
</tr>
</table>
<table width="200" height="178" border="1" cellpadding="8" cellspacing="0" class="tlfix" id="iatab2" style="display: none;">
<tr>
<td style="border-width: 0px;"><ul class="ultrig">
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com" >改编自真事的悬疑恐怖片《驱魔》</a></li>
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com" ><font color="#FF0066">我秀我家——爱的小窝</font></a></li>
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com" >一个我还想继续驻足的地方</a></li>
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com" ><font color="#FF0066">圣诞前奏香港购物第一战</font></a></li>
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com" >秀秀我家宝贝的衣服</a></li>
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com" >努力做饭 努力上班</a></li>
<li><a href="http://www.accptech.com" _fcksavedurl="http://www.accptech.com" >Babyhood</a></li>
</ul></td>
</tr>
</table></td>
</tr>
</table>

上面是鼠标滑过带过渡效果的选项卡的代码，部分代码已经自动清除了，要完整的代码，请在演示地址查看源代码方式索取。

演示地址：http://www.accptech.com/demo/7.html

顶一下

(1)

100%

踩一下

(0)

上一篇：JS特效：仿flash的向上弹起的导航菜单下一篇：一款酷的3D旋转图片导航

文章收藏 | 文章挑错 | 文章推荐 | 标签：鼠标

评论加载中....

鼠标滑过带过渡效果的选项卡

相关内容

热门内容