网页设计几种TAB滑动窗口参考

2009-05-12 0 条评论 5,455 次阅读 被赞了 0 次

简洁好用的TAB选项卡滑动门效果

<!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" lang="UTF-8">
<head>
<title>简洁TAB效果</title>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList<span style="text-decoration: line-through;">.className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
} 
}
</script>
<style type="text/css">
<!--
*{margin:0;padding:0;list-style:none;font-size:14px}
.nTab{width:500px;margin:20px auto;background:#aaa;border:1px solid #333;overflow:hidden}
.none {display:none;}
.nTab .TabTitle li{float:left;cursor:pointer;height:30px;line-height:30px;font-weight:bold;text-align:center;width:124px}
.nTab .TabTitle li a{text-decoration:none;}
.nTab .TabTitle .active{background:#ccc;color:#336699}
.nTab .TabTitle .normal{background:#666;color:#fff}
.nTab .TabContent{clear:both;overflow:hidden;background:#fff;padding:5px;display:block}
-->
</style>
</head>
<body>
<div class="nTab">
		<!-- 标题开始 -->
		<div class="TabTitle">
		<ul id="myTab">
		<li class="active" onmouseover="nTabs(this,0);">选项一</li>
		<li class="normal" onmouseover="nTabs(this,1);">选项二</li> 			      
		</ul>
		</div>
	　  <!-- 内容开始 -->
	    <div class="TabContent">
			 <div id="myTab_Content0">简洁TAB效果，滑动门，选项卡</div>
			 <div id="myTab_Content1" class="none">好用而兼容的TAB</div>				      
	    </div>	

</div>

<!--22222-->
<div class="nTab">
		<!-- 标题开始 -->
		<div class="TabTitle">
		<ul id="myTab1">
		<li class="active" onclick="nTabs(this,0);">选项一</li>
		<li class="normal" onclick="nTabs(this,1);">选项二</li> 			      
		</ul>
		</div>
	　  <!-- 内容开始 -->
	    <div class="TabContent">
			 <div id="myTab1_Content0">简洁TAB效果，滑动门，选项卡</div>
			 <div id="myTab1_Content1" class="none">好用而兼容的TAB</div>				      
	    </div>	

</div>
</body>
</html>

雅虎的滑动切换效果

默认都关闭的状态：

<!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" lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿雅虎首页的特色服务切换效果</title>
<style type="text/css">
<!--
* { margin:0; padding:0 }
div, dl, dt, dd { display:inline-block; }
div, dl, dt, dd { display:block }
h2{ font: 800 12px/20px "宋体"; }
#tabs { border:1px solid #ccc; margin:40px; width:382px; padding:4px 0 }
#tabs div { padding:69px 4px 0px; position:relative; }
#tabs dt { text-align:center; font: 12px/60px "宋体"; }
#tabs dd { font: 12px/20px "宋体"; padding:10px; }
#tab1 dt { left: 4px; top: 4px }
#tab2 dt { left:130px; top:4px }
#tab3 dt { left:256px; top:4px }
#tab4 dt { left: 4px; top: 4px }
#tab5 dt { left:130px; top:4px }
#tab6 dt { left:256px; top:4px }
.close dt { height:60px; width:120px; background:#FAFAFA; position:absolute; border:1px solid #ccc }
.close dd { display:none }
.open dt { height:65px; width:120px; background:#EBEBEB; position:absolute; border:1px solid #ccc; border-bottom:none; }
.open dd { background:#EBEBEB; border:1px solid #ccc; }
-->
</style>
<script type="text/javascript">
window.onload = 
function(){
	alltabs = document.getElementById('tabs').getElementsByTagName('dl')
	for(i = 0; i < alltabs.length; i++){
		alltabs<span style="text-decoration: line-through;">.className = "close"
		alltabs<span style="text-decoration: line-through;">.onmouseover = function(){
			for(j = 0; j < alltabs.length; j++){
				alltabs[j].className = "close"
			}
			this.className = "open"
		}
	}
}
</script>
</head>
<body>
<div id="tabs">
<h2>·仿雅虎首页的特色服务切换效果</h2>
 <div>
  <dl id="tab1">
   <dt>天气预报</dt>
   <dd>1</dd>
  </dl>
  <dl id="tab2">
   <dt>股市行情</dt>
   <dd>2</dd>
  </dl>
  <dl id="tab3">
   <dt>娱乐新闻</dt>
   <dd>3</dd>
  </dl>
 </div>
 <div>
  <dl id="tab4">
   <dt>星座运势</dt>
   <dd>4</dd>
  </dl>
  <dl id="tab5">
   <dt>免费邮箱</dt>
   <dd>5</dd>
  </dl>
  <dl id="tab6">
   <dt>个人中心</dt>
   <dd>6</dd>
  </dl>
 </div>
</div>
</body>
</html>

WY纵向循环切换焦点区域
自动纵向顺序切换TAB内容，当然鼠标经过任何一个右边的标题，左边会跳到与之相关联的焦点区域

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纵向循环播放焦点图</title>
<style>
*{margin:0;padding:0;border:0;list-style:none}
.focusPic{width:500px; margin:0 auto; clear:both; text-align:center; border:1px solid #ccc;}
.focusPic .focusTitle{width:240px;float:right; font-size:14px; text-align:left;}
.focusPic .focusTitle li{height:28px; line-height:28px; cursor:pointer; font-size:12px; padding-left:10px; }
.focusPic .focusTitle li a ,.focusPic .focusTitle li a:visited { color:#000;}
.focusPic .focusTitle li a:hover {color:#bc2931;}
.focusPic .focusTitle .current a ,.focusPic .focusTitle .current a:visited { color:#bc2931;}
.focusPic .focusTitle .current a:hover {color:#bc2931;}
.focusPic #focusMenu li.current{background:#efefef;font-weight:bold;color:#bc2931;}
.focusPic #focusLeft{width:250px;overflow:hidden; float:left;background:#efefef;font-size:14px;line-height:100px;font-weight:bold;height:168px;}
.focusPic #focusLeft li{display:none;}
.focusPic #focusLeft li.current{display:block;}
</style>
</head>

<body>
<div class="focusPic">
<ul id="focusLeft">
<li class="current">内容区1</li>
<li>内容区2</li>
<li>内容区3</li>
<li>内容区4</li>
<li>内容区5</li>
<li>内容区6</li>
</ul>
<div class="focusTitle">
<ul id="focusMenu">
<li class="current"><a href="#">猪流感“撼”动全球金融市场</a></li>
<li ><a href="#">直播金融企业社会责任论坛</a></li>
<li ><a href="#">独家发布08特许连锁经营百强榜</a></li>
<li ><a href="#">世行、IMF开启代表权改革时代</a></li>
<li><a href="#">放心变频 美的空调</a></li>
<li><a href="#">飞度领衔经济车型五星安全</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<script language="javascript" type="text/javascript">
//<![CDATA[
var $ = function(id) {
	return document.getElementById(id);
};
Function.prototype.bind = function() {
	if (arguments.length < 2 && arguments[0] == null) {
		return this;
	}
    var __method = this, args = $A(arguments), object = args.shift();
    return function() {
		return __method.apply(object, args.concat($A(arguments)));
    };
};
var isArray = function(testVar) {
	return Array == testVar.constructor ? 1 : String != testVar.constructor && null != testVar.length && !testVar.alert && !testVar.nodeType ? 2 : 0;
};
var $A = function(variable) {
	switch (isArray(variable)) {
		case 1:
			return variable;
		case 2:
			var arr = [], i = -1, len = variable.length;
			while (++i < len) {
				arr<span style="text-decoration: line-through;"> = variable<span style="text-decoration: line-through;">;
			}
			return arr;
		default:
			return [variable];
	}
};
var addClass = function(elem, className) {
	if ((" " + elem.className + " ").indexOf(" " + className + " ") == -1) {
		if (elem.className == "") {
			elem.className = className;
		} else {
			elem.className += (" " + className);
		}
	}
};
var removeClass = function(elem, className) {
	var newClass = (" " + elem.className + " ").replace(" " + className + " ", " ");
	elem.className = newClass.substr(1, newClass.length - 2);
};
var addEvent = function(elem, eventName, handler) {
	if (elem.addEventListener) {
		elem.addEventListener(eventName, handler, false);
	} else if (elem.attachEvent) {
		elem.attachEvent("on" + eventName, handler);
	}
};
function Slide(menus, contents, css, eventName, interval) {
	var curSeq = 0, length = contents.length, timerIds = [], isStopped;
	if (menus && length != menus.length) {
		throw new Error("the amount of menus and contents is not equal");
	}
	
	var hide = function(seq) {
		removeClass(contents[seq], css);
		if (menus) {
			removeClass(menus[seq], css);
		}
	};
	
	var show = function(seq) {
		addClass(contents[seq], css);
		if (menus) {
			addClass(menus[seq], css);
		}
		curSeq = seq;
	};
	
	this.showNext = function() {
		var next = curSeq + 1;
		if (next >= length) {
			next = 0;
		}
		var i = length;
		while (--i >= 0) {
			if (i != next) {
				hide(i);
			} else {
				show(i);
			}
		}
	};
	
	this.change = function(event) {
		if (this != menus[curSeq]) {
			var i = length;
			while (--i >= 0) {
				if (menus<span style="text-decoration: line-through;"> != this) {
					hide(i);
				} else {
					show(i);
				}
			}
		}
		e = window.event || event;
		e.cancelBubble = true;
	};
	
	this.play = function(speed) {
		isStopped = false;
		timerIds.push(setInterval(this.showNext.bind(this), speed));
	};
	
	this.pause = function() {
		isStopped = true;
		var i = length;
		while (--i >= 0) {
			clearInterval(timerIds<span style="text-decoration: line-through;">);
			timerIds.splice(i, 1);
		}
	};
	
	var i = length;
	while (--i >= 0) {
		addEvent(menus<span style="text-decoration: line-through;">, eventName, this.change.bind(menus<span style="text-decoration: line-through;">));
		if (interval > 0) {
			addEvent(menus<span style="text-decoration: line-through;">, "mouseover", this.pause);
			addEvent(menus<span style="text-decoration: line-through;">, "mouseout", this.play.bind(this, interval));
		}
	}
	if (interval > 0) {
		this.play(interval);
	}
}
var focusImg = new Slide($("focusMenu").getElementsByTagName("li"), $("focusLeft").getElementsByTagName("li"), "current", "mouseover", 3000);
//]]>
</script>
</body>
</html>

126邮箱TAB切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<!--
引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程
Editor:weasle
http://www.hxcgw.com
Email:weasle@163.com
QQ:112011531
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
 padding:0;
 text-align:center;
}
body{
 font:12px "宋体";
 text-align:center;
}
a:link{
 color:#00F;
 text-decoration:none;
}
a:visited {
 color: #00F;
 text-decoration:none;
}
a:hover {
 color: #c00;
 text-decoration:underline;
}
ul{ list-style:none;}
/*选项卡1*/
#Tab1{
width:460px;
margin:0px;
padding:0px;
margin:0 auto;}
/*选项卡2*/
#Tab2{
width:576px;
margin:0px;
padding:0px;
margin:0 auto;}
/*菜单class*/
.Menubox {
width:100%;
background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
 float:left;
 display:block;
 cursor:pointer;
 width:114px;
 text-align:center;
 color:#949694;
 font-weight:bold;
 }
.Menubox li.hover{
 padding:0px;
 background:#fff;
 width:116px;
 border-left:1px solid #A8C29F;
 border-top:1px solid #A8C29F;
 border-right:1px solid #A8C29F;
background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);
 color:#739242;
 font-weight:bold;
 height:27px;
line-height:27px;
}
.Contentbox{
 clear:both;
 margin-top:0px;
 border:1px solid #A8C29F;
 border-top:none;
 height:181px;
 text-align:center;
 padding-top:8px;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
</head>
<body>
<br /><br />
<div id="Tab1">
<div class="Menubox">
<ul>
   <li id="one1" onclick="setTab('one',1,4)"  class="hover">新闻1</li>
   <li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
   <li id="one3" onclick="setTab('one',3,4)">新闻3</li>   
   <li id="one4" onclick="setTab('one',4,4)">新闻4</li>
</ul>
</div>
 <div class="Contentbox">  
   <div id="con_one_1" class="hover">新闻列表1</div>
   <div id="con_one_2" style="display:none">新闻列表2</div>
   <div id="con_one_3" style="display:none">新闻列表3</div>
   <div id="con_one_4" style="display:none">新闻列表4</div> 
 </div>
</div>
<br />
<div id="Tab2">
<div class="Menubox">
<ul>
   <li id="two1" onclick="setTab('two',1,4)"  class="hover">新闻1</li>
   <li id="two2" onclick="setTab('two',2,4)" >新闻2</li>
   <li id="two3" onclick="setTab('two',3,4)">新闻3</li>   
   <li id="two4" onclick="setTab('two',4,4)">新闻4</li>
</ul>
</div>
 <div class="Contentbox">  
   <div id="con_two_1" >新闻列表1</div>
   <div id="con_two_2" style="display:none">新闻列表2</div>
   <div id="con_two_3" style="display:none">新闻列表3</div>
   <div id="con_two_4" style="display:none">新闻列表4</div> 
 </div>
</div>
</body>
</html>

相关文章:

No related posts.

点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code