原生JS概念云盘实战作品 Cloud-Disk
加载页
云盘主页
布局转换
移动文件夹
画框多选
右键菜单
技术栈
JavaScript（DOM/BOM） + CSS3 + HTML
快速开始
本实战作品为静态页面，直接在浏览器打开即可预览效果
进入登录页面 index.html
直接进入主页 home.html
项目目录
.
├─ doc/ # 文档目录
├─ img/ # 图像目录
├─ ui/ # UI设计稿
├─ css/ # CSS样式文件夹
│ ├── alert.css/ # 消息弹窗样式
│ ├── file.css/ # 文件内容样式
│ ├── login.css/ # 登录页样式
│ ├── master.css/ # 主页样式
│ ├── reset.css/ # 重置样式
├── js/ # JavaScript脚本文件夹
│ ├── createHtml.js/ # 页面结构生成脚本
│ ├── data.js/ # 应用数据
│ ├── feature.js/ # 文件操作功能脚本
│ ├── login.js/ # 登录页脚本
│ ├── mouse.js/ # 鼠标事件脚本
│ ├── tool.js # 工具脚本
│ ├── view.js # 视图层脚本
├── favicon.ico # 网页图标
├── home.html # 主页静态页面
├── index.html # 登录页静态页面
功能特色
- 选中文件夹
- 选中文件夹
- 全选文件夹
- 重命名文件夹
- 对已有文件夹重命名
- 新建文件夹重命名
- 新建文件夹
- 是否正在重命名
- 一次只能重命名一个文件夹
- 移动文件夹
- 不能移动到自身及自身的子目录和父目录
- 如果移动的目标目录有相同的名字，要做一些操作
- 删除文件夹
- 如果不选中，不能删除
- 最少选中一个
-
复制/剪切/粘贴文件夹
-
布局转换
-
文件排序
-
活动窗树状目录栏
- 随着数据更新而更新
- 右键菜单及其子菜单
- 菜单及其子菜单的溢出处理
- 子菜单悬浮显示的问题
- 消息灯箱/咨询弹窗
（详细原型设计请参考脑图）
项目描述
- 在遵循W3C标准及前端开发规范基础上，依照设计稿搭建语义化的页面架构
- 利用Photoshop等图像编辑软件制作CSS Spirit图
- 运用CSS3过渡/动画/弹性盒子等新特性效果美化UI界面
- 根据实际开发需要，封装规范化的JavaScript函数
- 利用DOM/BOM操作应用元素，并通过Event对象实现鼠标画框/右键菜单等功能
本项目在对应用页面进行艺术设计的基础上，运用了表现形式和数据结构分离的MVC原理，实现具备新建/删除/重命名/移动/拷贝/剪切/鼠标画框/右键菜单等功能的模拟云盘应用。
