ltaoo / ife

学习前端的杂七杂八

百度前端技术学院 2017

耀耀学院

任务一：表单（一）单个表单项的校验

代码地址 demo 地址

任务二：表单（二）多个表单项的动态校验

代码地址 demo 地址

任务三：表单（三）联动

代码地址 demo 地址

任务四：听指令的小方块（一）

代码地址 demo 地址

任务五：听指令的小方块（五）

代码地址 demo 地址

任务六：UI 组件之浮出层

代码地址 demo 地址

任务七：UI 组件之排序表格

代码地址 demo 地址

商业平台学院

UI 组件之色彩选择器

代码地址 demo 地址

标签云

代码地址 demo 地址

UI 组件之图片裁剪器

代码地址 demo 地址

由于该任务需要自己搭建后端，所以线上demo仅能选择图片以及展示图片，可以将项目文件拷贝至本地搭建后端。

无限滚动效果

代码地址 demo 地址

模拟时钟

代码地址 demo 地址

使用html + css实现，但是看其他同学都是使用canvas实现的。

巨型画布

代码地址 demo 地址

由于加载图片大所以需要等待一小会。

分层画布(仍存在 bug)

代码地址 demo 地址

使用鼠标拖拽实现图层切换顺序以及删除图层。

糯米学院

自定义 checkbox, radio 样式

代码地址 demo 地址

自定义右键菜单

代码地址 demo 地址

有趣的鼠标悬浮模糊效果

代码地址 demo 地址

使用 CSS 实现折叠面板

代码地址 demo 地址

CSS3 饼状 loading 效果

代码地址 demo 地址

个人认为是最难的任务。。。

CSS3 实现 3D 轮播图

代码地址 demo 地址

正则表达式之简易 markdown 文件解析器

代码地址 demo 地址

仿豆瓣音乐播放器

代码地址 demo 地址

实现树形组件

代码地址 demo 地址

封装 DOM 动画类库（一）

代码地址 demo 地址

封装 DOM 动画类库（二）

代码地址 demo 地址

动态数据绑定（一）

代码地址 demo 地址

动态数据绑定（二）

代码地址 demo 地址

动态数据绑定（三）

代码地址 demo 地址

动态数据绑定（四）

代码地址 demo 地址

动态数据绑定（五）

代码地址 demo 地址

网页抓取分析服务系列之一（基础分析）

代码地址

网页抓取分析服务系列之二（设备模拟）

代码地址

网页抓取分析服务系列之三（服务封装）

代码地址

网页抓取分析服务系列之四（数据交互）

代码地址

ECharts & WebVR 学院

WebGL No.1 - Three.js 入门

代码地址 demo 地址

WebGL No. 2 - 光与影

代码地址 demo 地址

WebGL No. 3 - 材质与纹理

代码地址 demo 地址

WebGL No. 4 - 照相机和交互控制

代码地址 demo 地址

WebGL No.5 - 动画

代码地址 demo 地址

WebGL No.6 - 外部模型

代码地址 demo 地址

WebGL No.7 - 着色器

代码地址 demo 地址

ECharts NO.1 - 零基础绘制ECharts图表

代码地址 demo 地址

ECharts NO.2 - 实现自定义的统计图表

代码地址 demo 地址

ECharts NO.3 - 绘制地图

代码地址 demo 地址

ECharts No.4 - 可视化前的数据预处理

代码地址 demo 地址

ECharts No.5 - 动态数据

代码地址 demo 地址

ECharts No.6 - 绘制人物关系图

代码地址 demo 地址

ECharts NO.7 - 空气质量可视化

代码地址 demo 地址

轮子

CMD 规范模块加载器

代码地址

vue 源码阅读过程

代码地址

Promise

代码地址