windows选项卡效果(背景层切换)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>层切换</title>
<style>
#red{
  display:block;
  float:left;
  position:absolute;
  width:400px;
  height:400px;
  background-color:#ff0000;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=deeppink);
}
#green{
  display:none;
  float:left;
  position:absolute;
  width:400px;
  height:400px;
  background-color:#00ff00;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=green);
}
#blue{
  display:none;
  float:left;
  position:absolute;
  width:400px;
  height:400px;
  background-color:#0000ff;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue);
}
#switch{
  position:absolute;
  top:400px;
  width:400px;
  height:30px;
  background-color:#000000;
}
#switch a.tabs{
  float:left;
  color:#ffffff;
  height:28px;
  width:133px;
  margin:0;
  padding:8px 0 0 14px;
  font-size:12px;
  cursor:pointer;
  text-decoration:none;text-align:center;  
}
#switch a.tabs:hover{
  color:#ffff00;
  background-color:#666666;
  text-decoration:none;
}
body{filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=orange);}
</style>
<script language="javascript">
function switchbox(i)
{
 selectbox(i);
}
function selectbox(i)
{
 switch(i)
 {
 case 1:
 document.getElementById("red").style.display="block";
 document.getElementById("green").style.display="none";
 document.getElementById("blue").style.display="none";
 break;
 case 2:
 document.getElementById("red").style.display="none";
 document.getElementById("green").style.display="block";
 document.getElementById("blue").style.display="none";
 break;
 case 3:
 document.getElementById("red").style.display="none";
 document.getElementById("green").style.display="none";
 document.getElementById("blue").style.display="block";
 break;
 }
}
</script>
</head>

<body><div style="position:absolute;top:19px;left:320px;">
<div id="content">
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</div>
<div id="switch"><a class="tabs" id="red-tab" href="javascript:switchbox(1);">红色</a><a class="tabs" id="green-tab" href="javascript:switchbox(2);">绿色</a><a class="tabs" id="blue-tab" href="javascript:switchbox(3);">蓝色</a></div></div>

Asp教程

通过asp实例结合结合ACCESS,MSSQL来更好的深入Asp学习 - 爬坡者

导航

2007-8-3 23:46:21

Tags: Windows选项卡 javascript菜单 javascript特效

发布:asp教程 | 分类:javascript应用 | 评论:0 | 引用:0 | 浏览:

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Spirit Build 80710

Copyright 2007-2008 papozhe.com [asp教程] All Rights Reserved.
浙ICP备07030537号
免责申明：所有文章除特别声明，均来自网上，主要为学习用！内容仅供参考，版权归原作者。如侵犯您利益，请来信告知.
Email:papozhe$Gmail.com QQ:76336503

Asp教程

通过asp实例结合结合ACCESS,MSSQL来更好的深入Asp学习 - 爬坡者

导航

2007-8-3 23:46:21

windows选项卡效果(背景层切换)

Tags: Windows选项卡 javascript菜单 javascript特效

发布:asp教程 | 分类:javascript应用 | 评论:0 | 引用:0 | 浏览: strBatchCount+="spn116=116,"

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Spirit Build 80710

发布:asp教程 | 分类:javascript应用 | 评论:0 | 引用:0 | 浏览: