今天看一个网站的页面布局可以切换,觉得挺好玩儿的,就查资料自己简单的实现了一个。下面是我的代码,给新手们参考一下:
我的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了!
分享到:
相关推荐
使用Fragment与RadioGroup实现页面布局切换 适用于新手,代码转自https://blog.csdn.net/warticles/article/details/81047260
Duilib中 ListItem布局切换效果实现,类似QQ好友列表,鼠标点击和经过都有不同的显示效果
基于jQuery的实现切换页面布局.zip
简单的流程可以概括为:第一次进入页面,有个默认的布局(网格布局),点击按钮,由网格布局切换到竖直的线性布局,再次点击切换到网格布局。 分析: 可以看到商品展示的形式都是以列表的方式来展现,我用的是...
使用iframe实现点击导航页面无刷切换,使用bootstrap布局
C++,QT多个窗体切换,widget,QTimer 3个页面切换跳转,使用wdiget的方式
本demo所需技术:jQuery+Bootstrap 本demo所用工具:IDEA 本demo主要实现功能: 1. 左侧菜单栏切换右侧页面内容 2. boostrap弹框内容的显示
实现在同一个activity中通过一个按钮切换两个不同的布局,此处的按钮并非同一个按钮控件,而是在两个不同的布局文件中点击按钮实现布局的切换。参考博客:http://blog.csdn.net/u010963246/article/details/47324229
控制了窗口的大小当拖动窗口缩小的添加的空间大小时,窗口不会再缩小了,实现了formview dialog对话框的布局,还有就是点击菜单项切换界面,
此资源介绍的相关内容有:自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局 通过TabController定义顶部tab切换 介绍生命周期函数。 适合新手学习移动端开发,也适合老司机参考。
主要为大家详细介绍了JavaScript实现tab栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
自定义Android中TabHost组件显示在屏幕底部,并实现滑动切换页面。在此基础上可以实现类似米聊等软件主界面的Tab效果。
winform 防VS窗口布局的框架 可非常灵活的拖拽修改布局
对于一个界面,如果需要设计GridView和ListView两种方式来显示一个列表可以共用一个Adapter和一个布局来实现,这样既可以避免冗余的代码,也使整个处理过程变得更加简单。 4. 通过控制isGridView标签来控制页面的...
ThemeDemo日夜间模式切换,页面切换的时候附带动画特效, 关于多主题实现的,大牛这里的做法是继承AppCompatActivity,置换了AppCompatDelegate中AppCompatViewInflater中的createView 方法.实现了对 xml 控件的控制. ...
查看实例:DEMO 演示打包下载XHTML 代码如下: 切换布局</a> ”demo” class=”showlist”> ”list”> <h3><a>文章标题</a></h3> 文章摘要</p> </div> … </div> XHTML结构中,在#demo中放入了多个.list,用于显示...
后台管理系统示例, 以实验管理系统为例。 使用bootstrap快速搭建布局和样式 实现了左侧菜单切换右侧内容等功能 左侧菜单实现了菜单的弹出和隐藏。 右侧内容可以根据左侧菜单的内容进行切换
当时考虑的时候就是不想在每个 xml 中去写页面切换的布局,那么我们可不可以用 Java 代码去控制?带着下面几个问题一起来看一下。1.自定义一个布局让其作为跟布局2.提供切换加载 loading、空白页 empty、错误页 ...