您当前的位置:主页 > 资源下载 > Html5模版网站首页Html5模版

CSS3全屏双面板内容切换实例

发布时间:2015-12-14编辑:余斗文件大小:52KB阅读:(0)字号:
       这是一款效果非常炫酷的全屏双面板内容切换UI设计效果。该UI设计使用CSS3和jQuery来制作双面板效果,左右两个面板可以通过箭头按钮来相应切换具体的内容,在内容切换时带有一些3D效果,非常炫酷。   该全屏双面板的HTML结构的要点是:外部包裹容器的宽度是视口(viewport)的2倍,在它里面有两个div元素,每一个都等于100%的viewport宽度。这两个div元素在它们的父容器中浮动,一个紧挨另一个。但是这时外部的父容器会产生水平的滚动条,为了修复这个问题,可以在外部包裹容器之外在添加一个总的包裹容器,并通过CSS来设置溢出隐藏。   这样,我们只可以看到左边的div元素,而右边的div元素是被隐藏的。为了使两个div元素各自都只显示一半,可以使它们向左移动-25%(外部容器宽度的25%)。现在,如果想看到左边div的全部内容,只需要向右移动,设置为50%,想看到右边的div全部内容,只需要做相反的操作即可。 CSS3全屏双面板内容切换实例
    示例

    CSS3全屏双面板内容切换实例
    解压后文件

  1. 预 览
  2. 下 载
下载说明: 1、解压密码:yudouyudou 2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。 3、如果您发现模板或软件有错,或者您有其他更好的意见、建议请给我留言,我会及时处理! 4、如果您遇到什么问题,也可加余斗QQ 548474762 咨询! * 受百度影响,部分网盘资源可能失效,如果您发现资源失效了,请及时留言或联系余斗 * * 下载本站模板以及软件仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *
关键字词css3面板切换
余斗余斗
  1. 转载请注明:CSS3全屏双面板内容切换实例
  2. 版权声明:本站原创文章,由发表在Html5模版分类下,于2015-12-14最后更新
半透明遮罩的lightbox效果Css3源码
手绘风格的鸿运国际手机登录首页模板(01)
手机扫一扫 随身带着看
鸿运国际手机登录首页