js实现滑动门效果

代码下载: 标准滑动门.rar

 
<! 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 > js中国滑动门技术 </ title >
< style media = " screen "  type = " text/css " >
<!--
* {font - size:12px;}
html,body{margin: 0 ;text - align:center;over - flow:hidden;height: 100 % ;width: 100 % ;}
UL{list - style - type:none; margin: 0 ;}

/*  标准盒模型  */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border - top: 0 ;text - align:left;}
.w936{margin:20px 100px;clear:both;width:936px; /* 这里调整整个滑动门的宽度 */ }





/*  TAB 切换效果  */
.tb_{background - image: url('images / barbg_tab.gif'); background - repeat: repeat - x;background - color: #E6F2FF;}
.tb_ ul{height:24px;padding - left:0px;}
.tb_ li{ float :left;height: 24px;line - height: 1.9 ;width: 94px;cursor:pointer;}

/*  用于控制显示与隐藏的css类  */
.normaltab   { background - image:url('images / normal_tab.gif'); background - repeat: no - repeat; color:#1F3A87 ;}
.hovertab    { background - image: url('images / hover_tab.gif'); background - repeat: no - repeat; color:#1F3A87; font - weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</ style >
< script type = " text/javascript "  language = " javascript " >
// <!CDATA[
function  g(o){ return  document.getElementById(o);}
// 参数说明:n为标签编号,m为标签数量,q为标签名称的前缀，如id=tb_1中的"tb_",p为内容层的前缀,如id=tbc_01的"tbc_0"
function  HoverLi(n,m,q,p){
// m为标签数量 m=6
// q为前缀  q=tb_
// 如果有N个标签,就将i<=N;
// 兼容IE7,FF,IE6

for ( var  i = 1 ;i <= m;i ++ )
{
g(q  + i).className = 'normaltab';
g(p + i).className = 'undis';
}
g(p + n).className = 'dis';
g(q + n).className = 'hovertab';
}
// 如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
// ]]>
</ script >
</ head >
< body >
单个标签宽度为:94px;
总宽度为:标签数 * 94px
< div class = " w936 " >
< div id = " tb_ "  class = " tb_ " >
< ul >
< li id = " tb_1 "  class = " hovertab "  onmouseover = " x:HoverLi(1,6,'tb_','tbc_0'); " >
流行音乐 </ li >
< li id = " tb_2 "  class = " normaltab "  onmouseover = " i:HoverLi(2,6,'tb_','tbc_0'); " >
美女写真 </ li >
< li id = " tb_3 "  class = " normaltab "  onmouseover = " a:HoverLi(3,6,'tb_','tbc_0'); " >
平面设计 </ li >
< li id = " tb_4 "  class = " normaltab "  onmouseover = " o:HoverLi(4,6,'tb_','tbc_0'); " >
网络学堂 </ li >
< li id = " tb_5 "  class = " normaltab "  onmouseover = " g:HoverLi(5,6,'tb_','tbc_0'); " >
恋爱宝典 </ li >
< li id = " tb_6 "  class = " normaltab "  onmouseover = " z:HoverLi(6,6,'tb_','tbc_0'); " >
Q小鸽子 </ li >
</ ul >
</ div >
< div class = " ctt " >
< div class = " dis "  id = " tbc_01 " >
内容区域1
</ div >
< div class = " undis "  id = " tbc_02 " >
内容区域2
</ div >
< div class = " undis "  id = " tbc_03 " >
内容区域3
</ div >
< div class = " undis "  id = " tbc_04 " >
内容区域4
</ div >
< div class = " undis "  id = " tbc_05 " >
内容区域5
</ div >
< div class = " undis "  id = " tbc_06 " >
内容区域6
</ div >

</ div >
</ div >





</ body >
</ html >

到我的个人网站可以找到更多资源:
js中国

转载于:https://www.cnblogs.com/wangxiang/articles/995125.html