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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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>

雅虎的滑动切换效果

默认都关闭的状态：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!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内容，当然鼠标经过任何一个右边的标题，左边会跳到与之相关联的焦点区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<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切换效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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