最近给学院网站添了个分栏,表面上很简单,却还含了不少技术成分。当然这东西是通过js+css实现的。首先是js的编写,不过算是简单的,重头戏是css的编写。
先附上js: 这里是是显示信息的两栏,class为activecontent表示层可见,hidedencontent反之,写在css中。
<
script type
=
"
text/javascript
"
>
tabCount = 2 ;
function changeTab(tabIndex)
... {
for (i = 1; i <= tabCount; i++)
...{
tab = document.getElementById("FenceTab" + i);
content = document.getElementById("TopTenContent" + i);
marquee = document.getElementById("marquee" + i);
marquee.start();
if (i == tabIndex)
...{
tab.className = "active";
content.className = "activecontent";
}
else
...{
tab.className = "";
content.className = "hiddencontent";
marquee.stop();
}
}
}
</ script >
tabCount = 2 ;
function changeTab(tabIndex)
... {
for (i = 1; i <= tabCount; i++)
...{
tab = document.getElementById("FenceTab" + i);
content = document.getElementById("TopTenContent" + i);
marquee = document.getElementById("marquee" + i);
marquee.start();
if (i == tabIndex)
...{
tab.className = "active";
content.className = "activecontent";
}
else
...{
tab.className = "";
content.className = "hiddencontent";
marquee.stop();
}
}
}
</ script >
<%
...
--begin 分栏 Author: Jawf--
%>
< div id ="TopTenContent1" class ="activecontent" >
< marquee direction ="up" scrollamount ="1" scrolldelay ="15" id =marquee1 onmouseover =marquee1.stop() onmouseout =marquee1.start() >
<% ... //里面是从数据库中取公告的代码 %>
</ marquee >
</ div >
< div id ="TopTenContent2" class ="hiddencontent" >
< marquee direction ="up" scrollamount ="1" scrolldelay ="15" id =marquee2 onmouseover =marquee2.stop() onmouseout =marquee2.start() >
<% ... //里面是从数据库中取通知的代码 %>
</ marquee >
</ div >
< div id ="TopTenContent1" class ="activecontent" >
< marquee direction ="up" scrollamount ="1" scrolldelay ="15" id =marquee1 onmouseover =marquee1.stop() onmouseout =marquee1.start() >
<% ... //里面是从数据库中取公告的代码 %>
</ marquee >
</ div >
< div id ="TopTenContent2" class ="hiddencontent" >
< marquee direction ="up" scrollamount ="1" scrolldelay ="15" id =marquee2 onmouseover =marquee2.stop() onmouseout =marquee2.start() >
<% ... //里面是从数据库中取通知的代码 %>
</ marquee >
</ div >
这里是选择哪一栏的标记,我采用的是图片,在css中可以看得出来是切换图片
<
div
id
="fence"
>
< li id ="fence1" >< a id ="FenceTab1" onmouseover ="changeTab(1);" onclick ="return false;" class ="active" href ="#" >< img src ="common/images/spacer.gif" alt ="学院公告" width ="81" height ="20" /></ a > </ li >
< li id ="fence2" >< a id ="FenceTab2" onmouseover ="changeTab(2);" onclick ="return false;" href ="#" >< img src ="common/images/spacer.gif" alt ="教学通知" width ="81" height ="20" /></ a ></ li >
</ div >
<% ... --end 分栏-- %>
< li id ="fence1" >< a id ="FenceTab1" onmouseover ="changeTab(1);" onclick ="return false;" class ="active" href ="#" >< img src ="common/images/spacer.gif" alt ="学院公告" width ="81" height ="20" /></ a > </ li >
< li id ="fence2" >< a id ="FenceTab2" onmouseover ="changeTab(2);" onclick ="return false;" href ="#" >< img src ="common/images/spacer.gif" alt ="教学通知" width ="81" height ="20" /></ a ></ li >
</ div >
<% ... --end 分栏-- %>
附css:
/**/
/*begin 分栏 Author: Jawf*/
ul {...} {
margin: 0;
padding: 0;
}
#rightbottom #fence {...} {
height: 20px;
width: auto;
line-height: 20px;
background-position: left;
text-align: left;
}
#rightbottom li {...} {
display: inline;
overflow: hidden;
list-style-type: none;
margin: 0px; }
#rightbottom #fence1 {...} {
margin:2px 0px 0px 0px;
padding:0px;
border:0px;
width:81px;
height:20px;
text-align:left;
}
#rightbottom #fence1 a {...} {background: url(../images/fence11.gif) no-repeat left bottom;}
#rightbottom #fence1 a.active {...} {background: url(../images/fence12.gif) no-repeat left bottom;}
#rightbottom #fence1 a.active:hover {...} {background: url(../images/fence12.gif) no-repeat left bottom;}
#rightbottom #fence2 {...} {
margin:2px 0px 0px 0px;
padding:0px;
border:0px;
width:81px;
height:20px;
text-align:left;
}
#rightbottom #fence2 a {...} {background: url(../images/fence21.gif) no-repeat left bottom;}
#rightbottom #fence2 a.active {...} {background: url(../images/fence22.gif) no-repeat left bottom;}
#rightbottom #fence2 a.active:hover {...} {background: url(../images/fence22.gif) no-repeat left bottom;}
.activecontent
{...} {
text-align: justify;
padding: 2px;
z-index: 2;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.activecontent a {...} {
text-decoration: none;
color: #00f; }
.activecontent a:hover
{...} {
text-decoration: underline;
}
.activecontent ol
{...} {
margin: 5px 5px 5px 25px !important;
margin: 5px 5px 5px 30px;
padding: 0px;
}
.activecontent li
{...} {
margin: 0px;
padding: 0px;
}
.hiddencontent
{...} {
display: none;
}
/**/ /*end 分栏*/
ul {...} {
margin: 0;
padding: 0;
}
#rightbottom #fence {...} {
height: 20px;
width: auto;
line-height: 20px;
background-position: left;
text-align: left;
}
#rightbottom li {...} {
display: inline;
overflow: hidden;
list-style-type: none;
margin: 0px; }
#rightbottom #fence1 {...} {
margin:2px 0px 0px 0px;
padding:0px;
border:0px;
width:81px;
height:20px;
text-align:left;
}
#rightbottom #fence1 a {...} {background: url(../images/fence11.gif) no-repeat left bottom;}
#rightbottom #fence1 a.active {...} {background: url(../images/fence12.gif) no-repeat left bottom;}
#rightbottom #fence1 a.active:hover {...} {background: url(../images/fence12.gif) no-repeat left bottom;}
#rightbottom #fence2 {...} {
margin:2px 0px 0px 0px;
padding:0px;
border:0px;
width:81px;
height:20px;
text-align:left;
}
#rightbottom #fence2 a {...} {background: url(../images/fence21.gif) no-repeat left bottom;}
#rightbottom #fence2 a.active {...} {background: url(../images/fence22.gif) no-repeat left bottom;}
#rightbottom #fence2 a.active:hover {...} {background: url(../images/fence22.gif) no-repeat left bottom;}
.activecontent
{...} {
text-align: justify;
padding: 2px;
z-index: 2;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.activecontent a {...} {
text-decoration: none;
color: #00f; }
.activecontent a:hover
{...} {
text-decoration: underline;
}
.activecontent ol
{...} {
margin: 5px 5px 5px 25px !important;
margin: 5px 5px 5px 30px;
padding: 0px;
}
.activecontent li
{...} {
margin: 0px;
padding: 0px;
}
.hiddencontent
{...} {
display: none;
}
/**/ /*end 分栏*/