关于页面布局切换的实现
今天看一个网站的页面布局可以切换，觉得挺好玩儿的，就查资料自己简单的实现了一个。下面是我的代码，给新手们参考一下：我的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代码：
[<a href="#" id="switch">切换布局</a><div class="page-head"> <h1>头部</h1></div><div class="page-meddle"> <h1>底部</h1></div>
我的js代码：
<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了！
页:
[1]