关于页面格局切换的实现

关于页面布局切换的实现
  今天看一个网站的页面布局可以切换，觉得挺好玩儿的，就查资料自己简单的实现了一个。下面是我的代码，给新手们参考一下：
我的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 name="code"><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了！

查看更多 下一篇