仿sohu频道切换效果

最新推荐文章于 2019-10-24 21:43:08 发布

Bird

最新推荐文章于 2019-10-24 21:43:08 发布

阅读量1.9k

点赞数 1

分类专栏： HTML JavaScript 文章标签： stylesheet div class html function float

本文链接：https://blog.csdn.net/a352193394/article/details/7526330

版权

JavaScript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

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

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

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;
}

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

Bird

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿sohu频道切换效果

经常上网的时候我们能注意到一个东西，那就是类似搜狐网易等等门户网站的频道切换效果，这个效果即好看又不占用地方而且动态效果好，是一个很好的东西，所以今天打算模拟一下这个效果。大概用到的东西就是HTML+CSS+JavaScript。好了，废话不多说，直接上代码，首先是HTML代码 souhu.html function change(val,obj
复制链接

扫一扫

专栏目录