126邮箱精美滑动门 - 站长资源库

答案：<!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>网易126滑动门</title>
<style>
body,div,img,a,b,p,form,table,tr,td{text-align: center; margin: 0px;padding: 0px;list-style-type:none;font-size:12px;color:#0c0c0b; line-height:180%}
body{background:url(/jscss/demoimg/200906/line_d.gif) bottom repeat-x; background-color:#FFFFFF}
a{text-decoration:none;}
a:hover{text-decoration:underline; color:#0f9327}
.a1{text-decoration:underline; color:#b7f124}
.a1:hover{text-decoration:underline; color:#f8efae}
.f1{font-size:14px;}
.c1{color:#ff7200}
.c2{color:#FFFFFF}
.c3{color:#f8efae}
.c4{color:#32633b}
.c4{ color:#0F9327}
.ent_l{width:190px; height:325px; background:url(/jscss/demoimg/200906/tu_l.gif) no-repeat; float:left;}
.ent_c{width:342px; height:325px; background-color:#FFFFFF; float:left; overflow:hidden}
 .bq{width:342px; height:71px; background:url(/jscss/demoimg/200906/bq_d.gif) no-repeat;}
.bq ul{padding:0px; margin:0px; list-style-type:none;}
.bq li{width:88px; height:23px; background:url(/jscss/demoimg/200906/bq_2.gif) 0px 1px no-repeat; padding-top:3px; margin-top:43px; text-align:center; float:left; cursor:pointer;}
.bq li a{font-size:12px; font-weight:bold; color:#59814c;}
.bq li a:hover{text-decoration:none;}
.bq li.on{background:url(/jscss/demoimg/200906/bq_1.gif) no-repeat top; color:#fff;}
.bq li.on a{color:#fff;}
.bq_d{width:100%; height:253px; background:url(/jscss/demoimg/200906/line_2.gif) right repeat-y; border-bottom:#0f9327 1px solid; text-align:left}
.bq_n{width:80%; padding-top:15px; text-align:center; margin-left:30px}
.bq_d .c4{ text-align:left}
.clear{ clear:both; font-size:0; height:0}
</style>
<script language="JavaScript">
<!--
var nTime = 3;
var nFocus= 0;
var bFlag = false;
var aLiTab , aDivTab;

/*切换
function fAutoSwitch(){
	var n = nFocus + 1;
	if(n >=3){
		n = 0;
	}
	if(!bFlag){
		aLiTab[n].onmouseover();
		bFlag = false;
	}
}
*/window.onload = function(){
	var $ = function($){
		return document.getElementById($);
	};
	aLiTab = $("oUlTab").getElementsByTagName("li");
	aDivTab = [$("oDivTab1") , $("oDivTab2") , $("oDivTab3")];
	for(var i=0;i<aLiTab.length;i++){
		(function(i){
			var t = aLiTab[i];
			t.onmouseover = function(){
				if(nFocus != i){
					aLiTab[nFocus].className = "";
					aDivTab[nFocus].style.display = "none";
					nFocus = i;
					aLiTab[nFocus].className = "on";
					aDivTab[nFocus].style.display = "";
				}
				bFlag = true;
			};
			t.onmouseout = function(){
				bFlag = false;
			};
		})(i);
	}
};

//-->
</script>
</head>
<body>
<div class="ent_c">
<div class="bq">
	<ul id="oUlTab"><li class="on" ><a href="#">邮箱首页</a></li>
	                          <li ><a href="#">超快速度</a></li>
		     <li ><a href="#">完全免费</a></li>
                          </ul>
                     </div>
<!---多窗口操作--->
 <div class="bq_d" id="oDivTab1">
	<div class="bq_n"><img src="/jscss/demoimg/200906/dbq.gif" /><br /><div class="c4">为广大编程爱好者分享各类开源源代码、JavaScript/CSS特效代码以及常用编程软件下载等。<br />
</div>
</div>						 
</div>
<div class="bq_d" id="oDivTab2" style="display:none">
<div class="bq_n">
<img src="/jscss/demoimg/200906/cksd.gif" /><br /><div class="c4">　　这里放上说明文字吧！<br />
</div></div></div>
<div class="bq_d" id="oDivTab3" style="display:none">
<div class="bq_n">
<img src="/jscss/demoimg/200906/zdbc.gif" /><br />
<div class="c4">　　超级漂亮哦，你可以把滑动门部分扒出来，其它的可以不要。<br />
</div>
</div>				 
</div>
</div>		   
</body>
</html>
上一个：仿QQ折叠菜单动感效果（JS+css）
下一个：CSS+XHTML有立体感的菜单
更多图片编程知识: