<div class="content-wrapper"&gt;
 <p>
  项目描述
 </p>

 <!-- 额外的项目信息 -->
</div>

接着，第二和第三个项目被使用translateY属性沿Y轴向下移动，分别移动.cd-project-info高度的1/3和2/3。这样就是3个项目分别在同一个屏幕中显示1/3的部分。

.cd-title（项目的标题）被设置为33.33%（1/3视口的高度），而它的伪元素.cd-title::before被设置为300%，实际是等于视口的高度。

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

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

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

JavaScript

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