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

PetitQ 图片/图形 2019-1-24 1.83K 0 0

这是一款效果非常炫酷的页面网格布局和幻灯片布局切换 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()函数用于处理幻灯片的点击操作。然后分别为网格布局按钮和幻灯片布局按钮绑定鼠标点击事件，进行界面的切换。具体代码请参考源文件。