js实现卡片式项目管理界面UI设计效果

这是一款非常有创意的卡片式项目管理界面UI设计效果。该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向下滚动鼠标可以看到该项目的介绍信息。
该项目管理界面还提供了一个全屏的导航菜单,用户可以通过右上角的汉堡包图标来触发全屏菜单。

使用方法
HTML结构
该卡片式项目管理界面的HTML结构分为3个部分:.cd-nav-trigger是全屏菜单的触发按钮,nav.cd-primary-nav是全屏导航菜单,.cd-projects-container是项目无序列表的容器。

每一个项目都包含一个表示项目标题的div.cd-title元素和一个表示项目信息的div.cd-project-info元素。项目的图片被设置为.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>
  <!-- 可以有更多的导航项 -->
 </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>
      项目描述
     </p>

     <!-- 额外的项目信息 -->
    </div>
   </div> <!-- .cd-project-info -->
  </li>

  <!-- 其它项目 -->
 </ul>
</div> <!-- .cd-projects-container -->

CSS样式
div.cd-project-info元素(项目信息)被设置为100%的高度和相对定位。每一个单独的项目都使用绝对定位,并设置100%的高度和放置在它们父容器.cd-project-info的左上角位置。开始它们是堆叠在一起的。

接着,第二和第三个项目被使用translateY属性沿Y轴向下移动,分别移动.cd-project-info高度的1/3和2/3。这样就是3个项目分别在同一个屏幕中显示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(项目的标题)被设置为33.33%(1/3视口的高度),而它的伪元素.cd-title::before被设置为300%,实际是等于视口的高度。

.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);
}

当某个项目被选择的时候,该项目被添加一个.selected class,该class应用了一个translateY(0)转换。同时将该项目的兄弟元素移动到屏幕之外translateY(100%),这样使该项目占满整个屏幕。

.cd-projects-container .single-project.selected {
 /* 被选择的项目 */
 transform: translateY(0);
}
.cd-projects-container .single-project.selected ~ li {
 /* 隐藏其它项目 */
 transform: translateY(100%);
}

对于.cd-project-info(项目信息),它有100%的高度,一个overflow: auto属性(使其可以滚动),它被放置在父元素.single-project的左上角位置。它的::before伪元素是一个空白占位,它等于屏幕视口的宽度和高度,它的作用是让项目图片开始时可以全屏显示,而不是被content-wrapper的内容覆盖。

.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 {
 /* 用与占位,显示项目图片 */
 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;
}

对于全屏导航菜单,开始时.cd-primary-nav元素被放置在.cd-projects-container的下面。当用户点击了.cd-nav-trigger按钮之后,所有的项目被移动到屏幕的下方,这时全屏导航菜单被显示出来。

.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设计中使用jQuery来监听.cd-nav-trigger和.single-project元素上的点击事件,并为相应的元素添加和移除相应的class。

js实现卡片式项目管理界面UI设计效果就为大家分享到这,希望本文所述对大家学习javascript程序设计有所帮助。

(0)

相关推荐

  • SSH框架网上商城项目第6战之基于DataGrid的数据显示

    EasyUI中DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识.它是轻量级的且功能丰富.单元格合并.多列标题.冻结列和页脚只是其中的一小部分功能. 1. 回顾一下第4节内容 在第4节中,我们使用EasyUI搭建好了左侧菜单栏,并且通过点击菜单选项在右边弹出对应的选项卡.这节我们来使用DataGrid把右边的选项卡部分做好.先看一下第4节中最后的aindex.jsp文件(也可参见第4节

  • Java编程中应用的GUI设计基础

    早先程序使用最简单的输入输出方式,用户在键盘输入数据,程序将信息输出在屏幕上.现代程序要求使用图形用户界面(Graphical User Interface,GUI),界面中有菜单.按钮等,用户通过鼠标选择菜单中的选项和点击按钮,命令程序功能模块.本章学习如何用Java语言编写GUI科学试验,如何通过GUI实现输入和输出. AWT和Swing 先前用Java编写GUI程序,是使用抽象窗口工具包AWT(Abstract Window Toolkit).现在多用Swing.Swing可以看作是AWT

  • SSH框架网上商城项目第7战之整合Struts2和Json

    上篇我们完成了DataGrid显示json数据,但是没有和后台联系在一起,只是单纯地显示了我们自己弄的json数据,这一节我们将json和Struts2整合,打通EasyUI和Struts2之间的交互. 1. json环境的搭建 json环境搭建很简单,导入json的jar包即可,如下: (注:json-lib-2.4的jar包下载地址:http://xiazai.jb51.net/201605/yuanma/json-lib-2.4(jb51.net).rar ) 2. 完善Action 在D

  • SSH框架网上商城项目第11战之查询和删除商品功能实现

    在第8节我们完成了查询和删除商品类别的功能,那么现在实现查询和删除商品的功能就很好做了,原理和第8节一模一样,只是修改一些参数,比如请求不同的action等.由于查询和删除商品不需要弹出新的UI窗口,所以我们只要完成完成query.jsp中相应的部分以及相应的后台即可. 1. 查询商品功能的实现 查询功能主要在查询框中实现,从上一节可知,查询框用的是一个text:"<input id='ss' name='serach' />",我们通过把普通的文本框转化为查询搜索文本框来

  • SSH框架网上商城项目第10战之搭建商品类基本模块

    前面我们完成了与商品类别相关的业务逻辑,接下来我们开始做具体商品部分. 1. 数据库建表并映射Model 首先我们在数据库中新建一张表,然后使用逆向工程将表映射成Model类,表如下: /*=============================*/ /* Table: 商品表结构 */ /*=============================*/ create table product ( /* 商品编号,自动增长 */ id int primary key not null aut

  • 提升Android应用视觉吸引效果的10个UI设计技巧

    在Android应用开发中,风格和设计或许不是最关键的要素,但它们在决定Android应用成功与否上确实扮演重要的角色.以下是10个Android应用的UI设计技巧,还有个附加技巧,能够提供你的Android应用的视觉吸引力. 技巧1:使用大小适当的图像 在图像方面,许多Android应用开发者采用的是大小单一的做法.尽管这会使资源管理变得更为简单,但就应用的视觉吸引力而言,这是个错误的做法.要让应用呈现出最佳的视觉效果,那么就应当针对具体的设备屏幕设计不同的图像.最适当的图像才能构建出最棒的用

  • php网上商城购物车设计代码分享

    首先,购物车的数据库设计: 1. id 2. goods_id 商品ID 3. session_id 购物车ID 4. goods_sn 商品编码 5. goods_name 商品名称 6. shop_price 商品商城售价 7. goods_price 商品真实售价(与shop_price的区别在于,当打折的时候,shop_price是打折之前商品的售价,而goods_price是打折之后的) 8. goods_number 数量 9. weight 商品重量 10. goods_attr

  • 浅谈AnDroidDraw+DroidDraw实现Android程序UI设计的分析说明

    AnDroidDraw 是一个与 DroidDraw 集成的 Android 应用程序,它允许你从 DroidDraw 应用 程序下载你的 GUIs, 也允许你在一个 Android 设备上预览你的 GUIs1.先下载安装DroidDraw,我使用的版本是droiddraw-r1b222.下载AnDroidDraw.apk,并在模拟器上进行安装,安装步骤如下: 1)使用cmd进入命令行窗口,进入你安装的android-sdk下的platform-tools目录,如图: 2)使用: adb ins

  • SSH框架网上商城项目第14战之商城首页UI的设计

    前面我们利用EasyUI和SSH搭建好了后台的基本框架,做好了后台的基本功能,包括对商品类别的管理和商品的管理等,这一节我们开始搭建前台页面. 做首页的思路:假设现在商品的业务逻辑都有了,首先我们需要创建一个监听器,在项目启动时将首页的数据查询出来放到application里,即在监听器里调用后台商品业务逻辑的方法. 1.  首页商品显示逻辑 在首页,我们只显示商品热点类别中的前几个商品,比如热点类别有儿童休闲类,女性休闲类,男性休闲类,那我们会有三个板块来显示不同的商品类,每个类别里再显示几个

  • Android编程UI设计之GridView和ImageView的用法

    本文实例讲述了Android编程UI设计之GridView和ImageView的用法.分享给大家供大家参考,具体如下: GridView: A view that shows items in two-dimensional scrolling grid. The items in the grid come from the ListAdapter associated with this view. 简单说,GridView就是我们资源管理器平常见到的一个个文件的icon显示方式. 上面提

随机推荐