关于页面布局切换的实现
今天看一个网站的页面布局可以切换，觉得挺好玩儿的，就查资料自己简单的实现了一个。下面是我的代码，给新手们参考一下：
我的CSS代码：
<style type="text/css">
.page-head{
float: left;
clear: both;
background-color: #e8eb2e;
width: 100%;
height: 20%;
}
.page-meddle{
float: left;
clear:both;
background-color: #74fff3;
width: 100%;
height: 80%;
}
.page-head2{
float: left;
background-color: #e8eb2e;
width: 20%;
height: 100%;
}
.page-meddle2{
float: right;
clear:right;
background-color: #74fff3;
width: 80%;
height: 100%;
}
</style>
上面的东西都是css里面基础的东西，不说了：
我的html代码： [url=#]切换布局[/url]
<div class="page-head">
<h1>头部</h1>
</div>
<div class="page-meddle">
<h1>底部</h1>
</div>
<script type="text/javascript">
$(function(){
$("#switch")._toggle(function(){
$(".page-head").fadeOut("flow",function(){
$(this).fadeIn("fast").addClass("page-head2");
});
$(".page-meddle").fadeOut("flow",function(){
$(this).fadeIn("fast").addClass("page-meddle2");
});
},function(){
$(".page-head").fadeOut("flow",function(){
$(this).fadeIn("fast").removeClass("page-head2");
});
$(".page-meddle").fadeOut("flow",function(){
$(this).fadeIn("fast").removeClass("page-meddle2");
});
});
});
</script>
有一点要注意，在这个文件中我用的是jquery语言，要导入jquery文件。在附件里有，你可以把html文件跟jquery文件放在一起，通过：<script type="text/javascript" src="jquery.js"></script>调用就ok了！
补充：web前端 , HTML/CSS ,
