js实现卡片式项目管理界面UI设计效果(vue卡片式风格)

编辑：rootadmin

推荐整理分享js实现卡片式项目管理界面UI设计效果(vue卡片式风格)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:json卡片制作,java卡片式布局,autojs卡片布局,vue卡片式风格,html5卡片效果,vue卡片式风格,json卡片制作,json卡片制作,内容如对您有帮助，希望把文章链接给更多的朋友！

这是一款非常有创意的卡片式项目管理界面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伪元素的背景图片。

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

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

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

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

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

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

JavaScript该UI设计中使用jQuery来监听.cd-nav-trigger和.single-project元素上的点击事件，并为相应的元素添加和移除相应的class。

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

JavaScript常用基础知识强化学习首先，还是用比较官方的文字描述来解释下JavaScript：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解

js获取鼠标位置实例详解本文实例讲述了js获取鼠标位置的方法。分享给大家供大家参考，具体如下：用javascript获取当前页面上鼠标（光标）位置在许多情况下都会用到，比如