js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果

更新時間：2015年12月08日 21:32:08 作者：愛上程序猿

這篇文章主要介紹了js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果，該UI設(shè)計(jì)中，將各個項(xiàng)目以卡片的方式堆疊排列在屏幕上，當(dāng)點(diǎn)擊了其中的某個項(xiàng)目的時候，該項(xiàng)目圖片會全屏放大，向下滾動鼠標(biāo)可以看到該項(xiàng)目的介紹信息，需要的朋友可以參考下

這是一款非常有創(chuàng)意的卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果。該UI設(shè)計(jì)中，將各個項(xiàng)目以卡片的方式堆疊排列在屏幕上，當(dāng)點(diǎn)擊了其中的某個項(xiàng)目的時候，該項(xiàng)目圖片會全屏放大，向下滾動鼠標(biāo)可以看到該項(xiàng)目的介紹信息。
該項(xiàng)目管理界面還提供了一個全屏的導(dǎo)航菜單，用戶可以通過右上角的漢堡包圖標(biāo)來觸發(fā)全屏菜單。

使用方法
HTML結(jié)構(gòu)
該卡片式項(xiàng)目管理界面的HTML結(jié)構(gòu)分為3個部分：.cd-nav-trigger是全屏菜單的觸發(fā)按鈕，nav.cd-primary-nav是全屏導(dǎo)航菜單，.cd-projects-container是項(xiàng)目無序列表的容器。

每一個項(xiàng)目都包含一個表示項(xiàng)目標(biāo)題的div.cd-title元素和一個表示項(xiàng)目信息的div.cd-project-info元素。項(xiàng)目的圖片被設(shè)置為.cd-title::before偽元素的背景圖片。

<header>
 <a href="#0" class="cd-logo"><img src="img/cd-logo.svg"></a>
  
 <button class="cd-nav-trigger">Menu<span aria-hidden="true" class="cd-icon"></span></button>
</header>
 
<nav class="cd-primary-nav">
 <ul>
  <li class="cd-label">Navigation</li>
  <li><a href="#0">The team</a></li>
  <!-- 可以有更多的導(dǎo)航項(xiàng) -->
 </ul>
</nav> <!-- .cd-primary-nav -->
 
<div class="cd-projects-container">
 <ul>
  <li class="single-project">
   <div class="cd-title">
    <h2>Project 1</h2>
   </div> <!-- .cd-title -->
 
   <div class="cd-project-info">
    <button class="cd-scroll">Scroll down</button>
     
    <div class="content-wrapper">
     <p>
      項(xiàng)目描述
     </p>
 
     <!-- 額外的項(xiàng)目信息 -->
    </div>
   </div> <!-- .cd-project-info -->
  </li>
 
  <!-- 其它項(xiàng)目 -->
 </ul>
</div> <!-- .cd-projects-container -->

CSS樣式
div.cd-project-info元素（項(xiàng)目信息）被設(shè)置為100%的高度和相對定位。每一個單獨(dú)的項(xiàng)目都使用絕對定位，并設(shè)置100%的高度和放置在它們父容器.cd-project-info的左上角位置。開始它們是堆疊在一起的。

接著，第二和第三個項(xiàng)目被使用translateY屬性沿Y軸向下移動，分別移動.cd-project-info高度的1/3和2/3。這樣就是3個項(xiàng)目分別在同一個屏幕中顯示1/3的部分。

.cd-projects-container {
 height: 100%;
 position: relative;
 overflow: hidden;
}
.cd-projects-container .single-project {
 position: absolute;
 top: 0px;
 left: 0px;
 height: 100%;
 width: 100%;
 transition: transform 0.4s;
}
.cd-projects-container .single-project:nth-of-type(2) {
 transform: translateY(33.3333333333%);
}
.cd-projects-container .single-project:nth-of-type(3) {
 transform: translateY(66.6666666667%);
}

.cd-title（項(xiàng)目的標(biāo)題）被設(shè)置為33.33%（1/3視口的高度），而它的偽元素.cd-title::before被設(shè)置為300%，實(shí)際是等于視口的高度。

.cd-title {
 height: 33.3333333333%;
}
.cd-title::before {
 /* 背景圖片 */
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 300%;
 width: 100%;
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}
.single-project:nth-of-type(1) .cd-title::before {
 background-image: url(../img/img-1.jpg);
}

當(dāng)某個項(xiàng)目被選擇的時候，該項(xiàng)目被添加一個.selected class，該class應(yīng)用了一個translateY(0)轉(zhuǎn)換。同時將該項(xiàng)目的兄弟元素移動到屏幕之外translateY(100%)，這樣使該項(xiàng)目占滿整個屏幕。

.cd-projects-container .single-project.selected {
 /* 被選擇的項(xiàng)目 */
 transform: translateY(0);
}
.cd-projects-container .single-project.selected ~ li {
 /* 隱藏其它項(xiàng)目 */
 transform: translateY(100%);
}

對于.cd-project-info（項(xiàng)目信息），它有100%的高度，一個overflow: auto屬性（使其可以滾動），它被放置在父元素.single-project的左上角位置。它的::before偽元素是一個空白占位，它等于屏幕視口的寬度和高度，它的作用是讓項(xiàng)目圖片開始時可以全屏顯示，而不是被content-wrapper的內(nèi)容覆蓋。

.cd-project-info {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.4s, visibility 0.4s;
}
.cd-project-info::before {
 /* 用與占位，顯示項(xiàng)目圖片 */
 content: '';
 display: block;
 height: 100%;
 width: 100%;
 pointer-events: none;
}
.cd-project-info .content-wrapper {
 position: relative;
 z-index: 2;
 padding: 2em 0 3em;
 background-color: #FFFFFF;
}
.selected .cd-project-info {
 opacity: 1;
 visibility: visible;
 transition: opacity 0s, visibility 0s;
}

對于全屏導(dǎo)航菜單，開始時.cd-primary-nav元素被放置在.cd-projects-container的下面。當(dāng)用戶點(diǎn)擊了.cd-nav-trigger按鈕之后，所有的項(xiàng)目被移動到屏幕的下方，這時全屏導(dǎo)航菜單被顯示出來。

.cd-primary-nav {
 position: absolute;
 top: 0;
 left: 0;
 /* height = (100% - 9%) - 9% is the space taken by the projects when the navigation is open */
 height: 91%;
 width: 100%;
 overflow: auto;
 opacity: 0;
}
.cd-primary-nav ul {
 transform: translateY(50px);
 transition: transform 0.4s;
}
.cd-primary-nav.nav-open {
 opacity: 1;
}
.cd-primary-nav.nav-open ul {
 transform: translateY(0);
}
 
.cd-projects-container.nav-open .single-project {
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
 transform: translateY(91%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(2) {
 transform: translateY(94%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(3) {
 transform: translateY(97%);
}

JavaScript
該UI設(shè)計(jì)中使用jQuery來監(jiān)聽.cd-nav-trigger和.single-project元素上的點(diǎn)擊事件，并為相應(yīng)的元素添加和移除相應(yīng)的class。

js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果就為大家分享到這，希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: