CSS3全屏双面板内容切换实例
发布时间：2015-12-14编辑：余斗文件大小：52KB阅读：(0)字号： 大 中 小
【资源下载】 音乐、电影、剧集、课程、动漫、电子书、有声书、软件...都在这里！ 【免费下载】 开通特权 ，各类千余TB网络资源免费下，日日更新，一次开通，终身可用！- 这是一款效果非常炫酷的全屏双面板内容切换UI设计效果。该UI设计使用CSS3和jQuery来制作双面板效果，左右两个面板可以通过箭头按钮来相应切换具体的内容，在内容切换时带有一些3D效果，非常炫酷。
该全屏双面板的HTML结构的要点是：外部包裹容器的宽度是视口(viewport)的2倍，在它里面有两个div元素，每一个都等于100%的viewport宽度。这两个div元素在它们的父容器中浮动，一个紧挨另一个。但是这时外部的父容器会产生水平的滚动条，为了修复这个问题，可以在外部包裹容器之外在添加一个总的包裹容器，并通过CSS来设置溢出隐藏。
这样，我们只可以看到左边的div元素，而右边的div元素是被隐藏的。为了使两个div元素各自都只显示一半，可以使它们向左移动-25%(外部容器宽度的25%)。现在，如果想看到左边div的全部内容，只需要向右移动，设置为50%，想看到右边的div全部内容，只需要做相反的操作即可。
示例
解压后文件
资源均来自第三方，谨慎下载，前往第三方网站下载
