页面网格布局和幻灯片布局切换UI界面设计

这是一款效果非常炫酷的页面网格布局和幻灯片布局切换UI界面设计效果。这个ui设计只是一个示例，它可以在网格布局和幻灯片布局之间来回切换，并且在切换时带有非常炫酷的过渡动画效果。

制作方法

HTML结构

该UI设计将所有元素包裹在一个div#window元素中，用于模拟一个浏览器。div#grid-selector是布局选择按钮。div.thumbs是网格缩略图模式面板，div#carousel是幻灯片模式面板。

<div id="window">
  <div id="header">
      <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>       
    
    <div id="grid-selector">
      <div id="viewCarousel"></div>
      <div id="viewGrid" class="active">
          <p></p>
            <p></p>
            <p></p>
            <p></p>            
        </div>        
    </div>
    
    <div id="headline">
      <p></p>
        <p class="short"></p>
    </div>
    <!--网格布局面板-->
    <div class="thumbs">    
      <p>
          <span></span>
            <span class="short"></span>
        </p>
        ......
    </div>
    <!--幻灯片模式面板-->
    <div id="carousel">
      <div class="innerCarousel">
          <div>
              
            </div>
            <div>
                <p class="current">
                    <span></span>
                    <span class="short"></span>
                </p>
            </div>
            ......
        </div>
    </div>
</div>              
              

CSS样式

以下的CSS代码用于模拟一个苹果电脑样式的浏览器：

#window{
  margin:30px auto 0;
  border-radius:6px;
  background:#fff;
  width:675px;
  height:620px; 
  overflow:hidden;
  position:relative;
}
#header{
  background:#e3e5e9;
  height:33px;
  padding-left:18px;
}
#header .circle{
  background:#9fa2a8;
  border-radius:50%;
  float:left;
  width:12px;
  height:12px;
  margin-right:6px;
  margin-top:11px;
}                
              

.floating-thumb class是在点击了“查看网格布局”按钮之后被动态添加到窗口中的，它用于显示第一个网格缩略图。在它被添加的同时，还添加了.animate class，用于使用指定的贝兹曲线函数来制作该网格的过渡动画效果。

.floating-thumb{  
  background: #e3e5e9;
    width: 155px;
    height: 60px;    
    border-radius: 4px;
    float: left;
    padding-top: 121px;
  position:absolute;
  top: 156px;
  left: 70px;
}
.floating-thumb.animate{
  width:303px;
  height:80px;
  margin-top:20px;
  padding-top: 326px; 
  top: 146px;
    left: 186px;
  -webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99);
     -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99);
      -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99);
       -o-transition: all 400ms cubic-bezier(0,.93,.33,.99);
        transition: all 400mscubic-bezier(0,.93,.33,.99);
}                
              

在幻灯片模式中，幻灯片被设置为只显示第一个slide和第二个slide的一半，用户通过点击第二个slide来查看下一个slide，这些功能的事项在js中完成。幻灯片模式的具体CSS代码请参考源文件。

JAVASCRIPT

在jQuery代码中，resetCarousel()函数用于重置幻灯片，是幻灯片位于初始位置（只显示第一个slide和第二个slide的一半）。setCarousel()函数用于处理幻灯片的点击操作。然后分别为网格布局按钮和幻灯片布局按钮绑定鼠标点击事件，进行界面的切换。具体代码请参考源文件。