经常上网的时候我们能注意到一个东西,那就是类似搜狐网易等等门户网站的频道切换效果,这个效果即好看又不
占用地方而且动态效果好,是一个很好的东西,所以今天打算模拟一下这个效果。大概用到的东西就是
HTML+CSS+JavaScript。
好了,废话不多说,直接上代码,首先是HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>souhu.html</title>
<script type="text/javascript">
function change(val,obj){
obj.style.backgroundColor="#FFC12D";
if(val=='zs'){
zs.style.display='block';
rz.style.display='none';
}else if(val=='rz'){
zs.style.display='none';
rz.style.display='block';
}
}
function change2(obj){
obj.style.backgroundColor="silver";
}
</script>
<link rel="stylesheet" href="../css/souhu.css" type="text/css"></link>
</head>
<body>
<div class="div1">
<div class="navi">
<ul>
<li οnmοusemοve="change('zs',this);" οnmοuseοut="change2(this);">招生</li>
<li οnmοusemοve="change('rz',this);" οnmοuseοut="change2(this);">热招</li>
<li>出国</li>
</ul>
</div>
<!-- 超链接DIV -->
<div class="zs" id="zs" >
<ul>
<li> <a href="#">招生招生招生招生</a></li>
<li> <a href="#">招生招生招生招生</a></li>
<li> <a href="#">招生招生招生招生</a></li>
<li> <a href="#">招生招生招生招生</a></li>
<li> <a href="#">招生招生招生招生</a></li>
<li> <a href="#">招生招生招生招生</a></li>
<li> <a href="#">招生招生招生招生</a></li>
<li> <a href="#">招生招生招生招生</a></li>
</ul>
</div>
<div class="rz" id="rz">
<ul>
<li> <a href="#">热招热招热招热招</a></li>
<li> <a href="#">热招热招热招热招</a></li>
<li> <a href="#">热招热招热招热招</a></li>
<li> <a href="#">热招热招热招热招</a></li>
<li> <a href="#">热招热招热招热招</a></li>
<li> <a href="#">热招热招热招热招</a></li>
<li> <a href="#">热招热招热招热招</a></li>
<li> <a href="#">热招热招热招热招</a></li>
</ul>
</div>
</div>
</body>
</html>
这里就是HTML的代码,然后上CSS的代码
body{
font-size: 12px;
}
.div1{
width: 126px;
height: 156px;
}
.navi{
width: 21px;
height: 156px;
float: left;
}
.navi li{
list-style-type: none;
background-color: silver;
margin-top: 2px;
width: 21px;
height: 50px;
float: left;
text-align: center;
padding-top: 8px;
}
.navi ul{
padding: 0px;
margin-left: 0px;
float: left;
}
.zs{
display: none;
width: 101px;
height: 156px;
background-color: silver;
float: left;
margin-left: 4px;
}
.zs ul{
padding: 0px;
margin-left: 0px;
float: left;
}
.zs ul li{
list-style-type: none;
line-height: 20px;
height: 17px;
float: left;
}
.rz{
display: block;
width: 101px;
height: 156px;
background-color: silver;
float: left;
margin-left: 4px;
position: absolute;
}
.rz ul{
padding: 0px;
margin-left: 0px;
float: left;
}
.rz ul li{
list-style-type: none;
line-height: 20px;
height: 17px;
float: left;
}
这样就实现了频道切换的效果,效果如如下