仿sohu频道切换效果

最新推荐文章于 2025-08-12 14:37:12 发布

最新推荐文章于 2025-08-12 14:37:12 发布 · 61 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML、CSS和JavaScript实现的类似搜狐、网易等门户网站的频道切换效果。通过简单的代码示例展示了如何创建这种既美观又节省空间的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经常上网的时候我们能注意到一个东西，那就是类似搜狐网易等等门户网站的频道切换效果，这个效果即好看又不

占用地方而且动态效果好，是一个很好的东西，所以今天打算模拟一下这个效果。大概用到的东西就是

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 onmousemove="change('zs',this);" onmouseout="change2(this);">招生</li>
   				<li onmousemove="change('rz',this);" onmouseout="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;
}

这样就实现了频道切换的效果，效果如如下