本文详细介绍了如何使用CSS和JavaScript来创建一个类似搜狐频道切换的效果。通过无序列表和浮动布局，配合鼠标悬停事件改变div的display属性，实现在鼠标移动到特定选项时显示相应内容的动态效果。代码示例中，当鼠标移到'招生'、'热招'、'出国'上时，会显示相应的超链接列表，同时提供背景颜色变化的交互反馈。
仿sohu频道切换效果
鼠标移动到招生，就显示招生的超链接
- 分析：
- 现在美工最喜欢使用无序列表，因为那个控制起来比较简单
- 右面实际上有3个div,但是每次只显示一个，但是这个布局是不会被破坏的，根据用户的需要选择对应的div就好了
- 还要事先约好显示文字的个数
- 代码：
写代码就得一点一点的写，不然有错误，很容易调试个半天，还会怀疑学到的东西是否有用
css文件：
body{
font-size:12px;
}
正式的美工，会给定宽和高的，不可能随便定义
.div1{
width:126px;
height:156px;
调试方便
/* background-color:pink; */
}
导航条
.navi{
width:21px;
height:156px;
/* background-color:yellow; */
右面还有个div
float:left;
}
需要清一下，
一般margin 和padding要一起清
.navi ul{
padding:0px;
margin-left:0px;
margin-top:0px;
float:left;
}
.navi li{
去掉列表左边的项目符号
list-style-type:none;
width:19px;
给个高度，把div给撑满
height:42px;
和上面一个保持一点距离
margin-top:2px;
text-align:center;文字居中，是左右居中
background-color:silver;
padding-top:8px;控制上面的padding
/* padding-bottom:8px; */
/* position:absolute; */
}
.zs,.rz,.cg{
左边稍微留点空间
width:101px;
height:154px;
/* background-color:silver; */
margin-left:3px;
margin-top:2px;
float:left;
}
.zs ul,.rz ul,.cg ul{
padding:0px;
margin-top:0px;
float:left;
}
.zs ul li,.rz ul li,.cg ul li{
list-style-type:none;
line-height:19px;行高
/* width:20px;
height:50px;
margin-top:2px;
text-align:center;
background-color:silver; */
}
.rz{
除了第一个，其他的不可见
display:none;
}
.cg{
/* visibility:hidden; */
display:none;
/* 这里注意：必须使用display，
display就是不显示，visibility是隐藏，但是还占着位置，只是隐藏不显示 */
}
html代码：
<!DOCTYPE html>
<html>
<head>
这句话不需要记忆，不会有人考你这个东西的
<link rel="stylesheet" href="mycss.css" type="text/css">
<script language="javascript">
function change(val,obj){
obj.style.backgroundColor="#ffc12d";
这里注意：必须使用display，
display就是不显示，
visibility是隐藏，但是还占着位置，只是隐藏不显示
if(val=='zs'){
//zs.style.visibility='visible';
//rz.style.visibility="hidden";
//cg.style.visibility="hidden";
zs.style.display='block';显示，这里使用inline应该也没有问题
rz.style.display="none";隐藏
cg.style.display="none";
}else if(val=='rz'){
zs.style.display='none';
rz.style.display="block";
cg.style.display="none";
}else if(val=='cg'){
zs.style.display='none';
rz.style.display="none";
cg.style.display="block";
}
}
function change2(obj){
obj.style.backgroundColor="silver";
}
</script>
</head>
<body>
<div class="div1">
<div class="navi">
搜索引擎，比较喜欢ul和li
具体可以去看搜索引擎的书
<ul>
<li οnmοuseοver="change('zs',this)" οnmοuseοut="change2(this)">招生</li>
<li οnmοuseοver="change('rz',this)" οnmοuseοut="change2(this)">热招</li>
<li οnmοuseοver="change('cg',this)" οnmοuseοut="change2(this)">出国</li>
</ul>
</div>
<!-- 超链接div -->
<div id="zs" class="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 id="rz" class="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 id="cg" class="cg">
<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>
效果图：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
