当前位置：首页 > 网页特效 > 幻灯片和轮播图

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

分类：幻灯片和轮播图日期：2024-05-14 点击(2) 评论(0)

简介

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

```html
<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代码用于模拟一个苹果电脑样式的浏览器：

```html
#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，用于使用指定的贝兹曲线函数来制作该网格的过渡动画效果。

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果