motor820 / Web-Project

前端练手小项目

Web前端学习积累与项目实践

从原生JS到React框架

项目清单

1. 轮播图 -- 利用CSS3 transition属性，写出简介的轮播图插件 原生js
2. 别踩白块 -- Jquery初识，获取元素，动态生成div, jQuery元素的属性、方法实现动态效果和游戏逻辑 演示地址：https://forrany.github.io/Web-Project/%E5%88%AB%E8%B8%A9%E7%99%BD%E5%9D%97/
3. 拼图游戏 -- Jquery进阶应用。 对鼠标事件"mousedown" "mousemove" "mouseup" 的应用实现拖拽； 数组保存、指导拼图位置； 数组乱序方法的应用； 演示地址：https://forrany.github.io/Web-Project/%E6%8B%BC%E5%9B%BE%E7%BB%83%E4%B9%A0/
4. 炫酷菜单导航 -- CSS3属性的应用： 通过transform: rotateZ()属性以及transition属性实现动态效果； 演示地址：https://forrany.github.io/Web-Project/%E7%82%AB%E9%85%B7%E8%8F%9C%E5%8D%95%E5%AF%BC%E8%88%AA/demo.html
5. 贪吃蛇游戏 -- 原生JS深入学习，oop面向对象编程。 蛇身跟随蛇头运动逻辑，蛇头碰撞检测(包括墙壁和蛇身)； 键盘事件的练习(keydown) 演示地址：https://forrany.github.io/Web-Project/%E8%B4%AA%E5%90%83%E8%9B%87/snake.html
6. Canvas动画应用-- 利用Canvas绘制动画弹球，oop面向对象编程，碰撞检测，速度回弹等。 演示地址：https://forrany.github.io/Web-Project/Canvas%E5%8A%A8%E7%94%BB%E5%BA%94%E7%94%A8--%E7%96%AF%E7%8B%82%E7%9A%84%E5%B0%8F%E7%90%83/dBubbles.html

React项目实战

应聘美团前端实习岗位时所做的一款数据查询组件，基于React框架，主要实现了：

• 整体UI的设计，根据所给界面，进行CSS布局和渲染；

• 查询功能的实现，可以根据关键字、日期、标签等进行数据的检索和查询；

• 表格翻页组件，可以根据需求，请求数据并将所有数据按需展示；

• 输入数据的关键字验证与提示功能

演示地址：https://forrany.github.io/Web-Project/%E5%9F%BA%E4%BA%8EReact%E7%9A%84%E5%88%97%E8%A1%A8%E6%9F%A5%E8%AF%A2%E7%BB%84%E4%BB%B6/build/