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


Posted in Javascript onDecember 08, 2015

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

js实现卡片式项目管理界面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程序设计有所帮助。

Javascript 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
javascript如何写热点图
Dec 08 #Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 #Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 #Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 #Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 #Javascript
基于JavaScript创建动态Dom
Dec 08 #Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 #Javascript
You might like
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
js charAt的使用示例
2014/02/18 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
详解Python字符串切片
2019/05/20 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
linux系统都有哪些运行级别
2016/03/26 面试题
旷课检讨书2000字
2014/01/14 职场文书
元旦晚会邀请函
2014/02/01 职场文书
个人简历自我评价
2014/02/02 职场文书
一体化教学实施方案
2014/05/10 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
Python读写yaml文件
2022/03/20 Python