技术前沿 CSS+JavaScript实现页面不同布局的切换(1)


本文向大家描述一下CSS+JavaScript实现页面不同布局的切换,比如CSS平铺显示与列表显示布局的切换,实现的原理说穿了,很简单,就是使用CSS切换列表元素父标签的class,不同的class对应不同的布局方式。


CSS+JavaScript实现页面不同布局的切换


一、关于显示方式的切换


CSS显示方式的切换很常见,最常见的莫过于在文件夹中查看文件的时候,我们可以选择“平铺”、“图标”、“列表”、“详细信息”等,如下图所示:



 


这是一个不错的功能,可以让用户自定义一些自己喜欢的偏好的显示方式,我们再web页面上,同样可以做。这可能说是一种提高用户体验的方法。


获取您见过看某篇文章时,在某个地方会有“大 – 中 – 小”的文字大小切换按钮,我们这里的布局切换与此类似,不过改变的内容或许有差异,复杂度也不一样,布局切换显然要复杂的多。


标签:

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2