2018年写的那些前端demos

嗖～时间过去很快，2018年（农历）就要过去，这一年的时间里面，自己结合业务写了些demo，在总结也是在反思：

1.循环轮播图

使用了jquery来写，主要是用来查询元素，用原生来写同样没问题。市面上能够用swiper来快速实现这个功能。

2.模态框弹出层

简单模拟下弹出层的登陆，适用于开发组件化的登陆。

3.查看图片

对图片进行缩放的查看，适用于pc端，我这里常用于后台页面。

4.地区三级联动

简单用算法来模拟了下省市县三级联动，适用于有这种包含关系的数据。

5.二级导航

鼠标划过现实二级菜单，可以扩展为三级，建议菜单不要超过三级。难度系数：容易。

6.倒计时

倒计时是对localstorage的使用，这种存储数据的方式能够在你移动端的活动页面中发挥很大的作用。

7.简单帧动画

使用@keyframes来完成动画，适用于移动端中不循环播放的图片效果，如果是循环的动画，直接请求设计支援·gif图最省事。

8.伪加载

简单设置一个加载动画来忽悠用户而已，在对加载要求不高的时候使用。如果对要求高就要使用第10点介绍的了。

9.移动端截图工具

使用html2canvas库来实现前端的截图，不过有些坑需要注意下，比如图片的跨域问题。

10.加载效果

可以看作是对上面第8点的改良版，使用移动端加载的图片作为目标，因为图片耗费的加载也是最多的。这样实现的加载效果就很逼真了。

11.粗略手写版

使用canvas来绘图，监听坐标点，实现的很粗糙，但是不影响整个学习过程。

12.休闲游戏-五子棋

使用es6搞事情，模拟传统的五子棋下棋。还专门在掘金上发表了一篇关于它的文章——前端谈谈实现五子棋并很开心能获百赞。

13.展开和折叠功能

展开和折叠功能是我们在移动端上面使用的最多的场景之一，因为“寸土寸金”啊，有必要刘一个demo给它。

14.可伸缩导航栏

这种写法是参考bootstrap的响应式布局。比较适合要求不高的pc和mobile结合的场景。比如自己大半年前就是使用这个思想实现了前端团队的对外展示的站点。

后话

上面的demos是自己18年在业务中记录下来的简单案例。嗯～14个是有些少了，因为自己转中台已经半年之久了，主要是参与后台的开发，前台的业务接触不是很频繁了。不过后期发现实用的前端案例，还是会花时间整理出来的。

备注

上面的demos都有链接可以查看的，请戳线上链接14个demos的线上链接

在github上自己也开了一个仓库专门存放这些demos的代码，刚兴趣可以前往查看——github-demos,欢迎添加新的实用demo进入。

更多关于我的内容，请戳我的github-blogs