JavaScript滑动门
1 JavaScript滑动门：
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head>
7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
8 <title>js中国滑动门技术</title>
9 <style media="screen" type="text/css">
10 <!--
11 *{
12 font-size:12px;
13 }
14 html,body{
15 margin:0;
16 text-align:center;
17 over-flow:hidden;
18 height:100%;
19 width:100%;
20 }
21 UL{
22 list-style-type:none;
23 margin:0;
24 }
25
26 /* 标准盒模型 */
27 .ttl{height:18px;}
28 .ctt{
29 height:auto;
30 padding:6px;
31 clear:both;
32 border:1px solid #064ca1;
33 border-top:0;
34 text-align:left;
35 }
36 .w936{
37 margin:20px 100px;
38 clear:both;
39 width:936px;/*这里调整整个滑动门的宽度*/
40 }
41
42 /* TAB 切换效果 */
43 .tb_{
44 background-image: url('images/barbg_tab.gif');
45 background-repeat: repeat-x;
46 background-color: #E6F2FF;
47 }
48 .tb_ ul{
49 height:24px;
50 padding-left:0px;
51 }
52 .tb_ li{
53 float:left;
54 height: 24px;
55 line-height:1.9;
56 width: 94px;
57 cursor:pointer;
58 }
59
60 /* 用于控制显示与隐藏的css类 */
61 .normaltab {
62 background-image:url('images/normal_tab.gif');
63 background-repeat: no-repeat;
64 color:#1F3A87 ;
65 }
66 .hovertab {
67 background-image: url('images/hover_tab.gif');
68 background-repeat: no-repeat;
69 color:#1F3A87;
70 font-weight:bold
71 }
72 .dis{display:block;}
73 .undis{display:none;}
74 -->
75 </style>
76 <script type="text/javascript" language="javascript">
77 //<!CDATA[
78 function g(o){return document.getElementById(o);}
79 //参数说明:n为标签编号,m为标签数量,q为标签名称的前缀，
80 //如id=tb_1中的"tb_",p为内容层的前缀,如id=tbc_01的"tbc_0"
81 function HoverLi(n,m,q,p){
82 //m为标签数量 m=6
83 //q为前缀 q=tb_
84 //如果有N个标签,就将i<=N;
85 //兼容IE7,FF,IE6
86
87 for(var i=1;i<=m;i++)
88 {
89 g(q +i).className='normaltab';
90 g(p+i).className='undis';
91 }
92 g(p+n).className='dis';
93 g(q+n).className='hovertab';
94 }
95 //如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
96 //]]>
97 </script>
98 </head>
99 <body>
100 单个标签宽度为:94px;
101 总宽度为:标签数*94px
102 <div class="w936">
103 <div id="tb_" class="tb_">
104 <ul>
105 <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1,6,'tb_','tbc_0');">
106 流行音乐</li>
107 <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2,6,'tb_','tbc_0');">
108 美女写真</li>
109 <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3,6,'tb_','tbc_0');">
110 平面设计</li>
111 <li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4,6,'tb_','tbc_0');">
112 网络学堂</li>
113 <li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5,6,'tb_','tbc_0');">
114 恋爱宝典</li>
115 <li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6,6,'tb_','tbc_0');">
116 Q小鸽子</li>
117 </ul>
118 </div>
119 <div class="ctt">
120 <div class="dis" id="tbc_01">
121 内容区域1
122 </div>
123 <div class="undis" id="tbc_02">
124 内容区域2
125 </div>
126 <div class="undis" id="tbc_03">
127 内容区域3
128 </div>
129 <div class="undis" id="tbc_04">
130 内容区域4
131 </div>
132 <div class="undis" id="tbc_05">
133 内容区域5
134 </div>
135 <div class="undis" id="tbc_06">
136 内容区域6
137 </div>
138 </div>
139 </div>
140 </body>
141 </html>
效果图：
