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

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:47:03

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

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

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

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

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

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


 
 
 

 

 
 Navigation
 The team
 
 
 
 

 
 
 
 Project 1
 
 
 
 
 
 
 
 項(xiàng)目描述

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

接著，第二和第三個(gè)項(xiàng)目被使用translateY屬性沿Y軸向下移動(dòng)，分別移動(dòng).cd-project-info高度的1/3和2/3。這樣就是3個(gè)項(xiàng)目分別在同一個(gè)屏幕中顯示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)某個(gè)項(xiàng)目被選擇的時(shí)候，該項(xiàng)目被添加一個(gè).selected class，該class應(yīng)用了一個(gè)translateY(0)轉(zhuǎn)換。同時(shí)將該項(xiàng)目的兄弟元素移動(dòng)到屏幕之外translateY(100%)，這樣使該項(xiàng)目占滿整個(gè)屏幕。

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

對(duì)于.cd-project-info（項(xiàng)目信息），它有100%的高度，一個(gè)overflow: auto屬性（使其可以滾動(dòng)），它被放置在父元素.single-project的左上角位置。它的::before偽元素是一個(gè)空白占位，它等于屏幕視口的寬度和高度，它的作用是讓項(xiàng)目圖片開(kāi)始時(shí)可以全屏顯示，而不是被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;
}

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

.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來(lái)監(jiān)聽(tīng).cd-nav-trigger和.single-project元素上的點(diǎn)擊事件，并為相應(yīng)的元素添加和移除相應(yīng)的class。

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com