搜集整理了各种类型的demo,并对之进行了分类,以便随时使用,如对您有帮助,请star下
,再fork拿去改成你想要的效果,谢谢。
ps: 下面的每个demo都发布在线上了,可以正常访问,毕竟以展示为主(JSFiddle codepen对轻功不好的同学不友好- 误^ )
对,这里所有的demo大多以展示为主,运用了CSS3,没有添加额外JS就完成,所以都添加到了该分类下。至于更多的细节分类,以后再来实现了
这个目录下一来是对所写demo进行分类,这是组件,也就是由多个小模块构成,放到该目录下以后也方便样式与结构的重用。而上面的CSS3是单纯来展示的,这里相当于筛选了一道(我可能会复用到的)
布局可谓每一个前端的基本功,这里只列出了几个常用的布局,仅供参考,以后会逐步完善的。
flex布局篇
推荐下阮一峰老师的博客学习
其他布局范例 以下是我自己的练习DEMO
这里的demo主要是以原生javascript来实现,目的是为加强对DOM操作
的练习,了解一些基本的设计模式
(如观察者、策略模式)及运用
css3-count-showtime 结合css3伪类 实现了hover展示,点击效果是用js写的所以归类到js里了
点击更换背景 (点击有彩蛋) … 没错就是彩蛋… 彩蛋用Canvas写的
自动名片生成器 这是转自codepen 老外的作品,实现思路简单,具有一定参考性,就抄过来了。
这里的demo主要以jquery库来实现,练习jQuery的使用与jQuery组件的封装
,同时也为日后选择插件先挖好坑
图片预加载-demo1,图片预加载-demo2,图片预加载-demo3
如果里面的demo对您有参考或帮助,请Star + Fork,谢谢!