CSS+JavaScript实现页面不同布局的切换
2013-03-13 11:05
706 查看
一、关于显示方式的切换
显示方式的切换很常见,最常见的莫过于在文件夹中查看文件的时候,我们可以选择“平铺”、“图标”、“列表”、“详细信息”等,如下图所示:这是一个不错的功能,可以让用户自定义一些自己喜欢的偏好的显示方式,我们再web页面上,同样可以做。这可能说是一种提高用户体验的方法。
获取您见过看某篇文章时,在某个地方会有“大 – 中 – 小”的文字大小切换按钮,我们这里的布局切换与此类似,不过改变的内容或许有差异,复杂度也不一样,布局切换显然要复杂的多。
二、平铺显示与列表显示布局的切换
所谓“平铺显示”,就像地面砖一样,一块一块排列的。“列表显示”就是一列一列的显示。
上面两张图截自demo。
您可以狠狠地点击这里:平铺显示与列表显示布局的切换demo
demo测试方法就是点击类似于下面标示的图标按钮(下同):
原理简述:
实现的原理说穿了,很简单,就是使用CSS切换列表元素父标签的class,不同的class对应不同的布局方式。举个简单的例子吧:
如下样式代码:
ul.repeat li{width:45%; float:left;}
则
<ul><li>第一段</li><li>第二段</li></ul>
就是列表显示,而
<ul class="repeat"><li>第一段</li><li>第二段</li></ul>
就是平铺,两者的差别仅仅在于ul的class不同而已。
本文下面两个显示的切换也是同样的原理,至于细节,您可以参见demo页面显示的代码,相信不难理解。
三、列表布局与详细信息布局的切换
这里的切换指的是信息透露多少的切换,举个例子,一张照片会有照片本身,照片标题,照片描述,拍摄时间,拍摄相机等等信息,我们就可以通过切换显示那些类别的信息。您可以对比下面两种demo截图:
与
您可以狠狠地点击这里:详细信息与列表显示demo
demo使用方法以及原理与上面一致,不赘述。
四、综合:信息显示及布局的同时切换
此段我使用了图片做了个demo,您可以狠狠地点击这里:信息显示及布局的同时切换demo点击下图所示位置进行切换:
于是您会看到类似下面的切换效果:
与
本文地址: http://www.zhangxinxu.com/wordpress/?p=688
五、最后的小小总结
现在快两点了,已经很晚,明早还有面试,我就长话短说。布局切换是提高用户体验的方法之一,但是,具体还要看实际的情况,是否适合及有必要使用布局切换的效果。对于效果的实现,js部分的难度应该不到,即使是js新人也能应付,毕竟仅仅是切换一个class而已,JavaScript的className属性可以轻松搞定。关键还在CSS的消耗上,切换class,页面重新渲染(reflow)实现布局变换效果。
总之,布局切换是个简单实用的效果,值得一试。
如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=688
相关文章推荐
- 页面瀑布流布局的实现 javascript+css
- JavaScript实现同一页面不同div的切换及颜色改变
- 【前端】纯html+css+javascript实现楼层跳跃式的页面布局
- 纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
- js实现单一html页面两套css切换代码
- CSS在页面布局中实现div水平居中的方法总结(转)
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- ASP.NET动态加载不同CSS,实现切换皮肤效果
- 使用html5+css3来实现slider切换效果告别javascript+css
- 实现三行布局页面自适应不同分辨率下的屏幕高度
- 通过使页面动态加载不同CSS实现多界面
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- [JavaScript]使用JavaScript+CSS实现注册页面中检验两次密码输入是否相同
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- 问题:关于贴友的一个书本页面简单布局(html+css)的实现
- [前端] html+css+javascript 实现选项卡切换效果
- 如何利用CSS+DIV 实现三列自适应高和宽的布局(不用javascript)
- CSS实现避免页面布局被大尺寸图片和长字符串破坏
- css判断不同分辨率显示不同宽度布局实现自适应宽度
- Hexo博客实现首页和子页面不同layout布局