本站推荐
CSS3全屏双面板内容切换实例
  • 文件大小: 49 KB
  • 软件作者: 余斗
  • 软件类别: 素材模板 / 开源软件 / .html
  • 软件语言: 简体中文
  • 软件星级: ★★★★★
  • 应用平台: html+js+CSS3
  • 更新时间: 2015-12-29
  • 下载统计:
  • 程序演示: 在线演示 - 【 前台 - 无 】
  • 官方网址:
  • 错误报告: 点此报告下载错误!
CSS3全屏双面板内容切换实例简介:

这是一款效果非常炫酷的全屏双面板内容切换UI设计效果。该UI设计使用CSS3和jQuery来制作双面板效果,左右两个面板可以通过箭头按钮来相应切换具体的内容,在内容切换时带有一些3D效果,非常炫酷。

该全屏双面板的HTML结构的要点是:外部包裹容器的宽度是视口(viewport)的2倍,在它里面有两个div元素,每一个都等于100%的viewport宽度。这两个div元素在它们的父容器中浮动,一个紧挨另一个。但是这时外部的父容器会产生水平的滚动条,为了修复这个问题,可以在外部包裹容器之外在添加一个总的包裹容器,并通过CSS来设置溢出隐藏。

这样,我们只可以看到左边的div元素,而右边的div元素是被隐藏的。为了使两个div元素各自都只显示一半,可以使它们向左移动-25%(外部容器宽度的25%)。现在,如果想看到左边div的全部内容,只需要向右移动,设置为50%,想看到右边的div全部内容,只需要做相反的操作即可。

Tag: CSS3 全屏 双面板 内容切换

文件下载:

会员登陆close X