refactor: ⚡ 目录大变更，为了更好地整理

todo 还有些类别没整理完。之前由于服务器没续费，链接都生效了，分类重新整理，用github pages部署

README.md

@@ -2,55 +2,22 @@
 
 搜集整理了各种类型的demo，并对之进行了分类，以便随时使用，如对您有帮助，`请star下`，再fork拿去改成你想要的效果，谢谢。
 
-ps: 下面的每个demo都发布在线上了，可以正常访问，毕竟以展示为主`（JSFiddle codepen对轻功不好的同学不友好- 误^ ）`
+ps: 下面的每个demo都发布在线上了，可以正常访问，毕竟以展示为主
 
-## CSS3
+## CSS3 相关效果
 
 对，这里所有的demo大多以展示为主，运用了CSS3，没有添加额外JS就完成，所以都添加到了该分类下。至于更多的细节分类，以后再来实现了
 
-<a href="http://fridolph.wang/my-demo/css3/buttons-box-shadow/index.html" target="_blank">CSS3-按钮-阴影</a>
+// Todo 改地址了，重新整理
 
-<a href="http://fridolph.wang/my-demo/css3/canvas-animation-logo/index.html" target="_blank">Canvas Logo</a>
-
-<a href="/public/animation-css3-js/scroll-progress-bar/index.html" target="_blank">纯CSS3实现Scroll进度条</a>
-
-<a href="http://fridolph.wang/my-demo/css3/css3-transform/index.html" target="_blank">CSS3 Transform效果一览</a>
-
-<a href="/public/animation-css3-js/fullscreen-background-animation/index.html" target="_blank">CSS3实现的全屏幻灯片图片切换</a> 
-
-<a href="http://fridolph.wang/my-demo/css3/icon-toggle/index.html" target="_blank">CSS3制作ICON小图标</a> 
-
-<a href="http://fridolph.wang/my-demo/css3/linear-gradient/index.html" target="_blank">linear-gradient展示demo</a>
-
-<a href="http://fridolph.wang/my-demo/css3/text-animation/index.html" target="_blank">炫酷的文字特效动画</a>
-
-<a href="http://fridolph.wang/my-demo/css3/text-hover/index.html" target="_blank">文字hover&click~ CSS3高级动画</a>
-
-<a href="http://fridolph.wang/my-demo/css3/transportation-hover/index.html" target="_blank">Hover与background结合~ 实现的短动画</a>
-
-<a href="#" target="_blank">地址待添加 - translate3d-card</a>
 
+<a href="https://fridolph.github.io/my-program/public/animation-css3-js/card-op/index.html" target="_blank">海贼王之 - 卡片切换效果</a> 
 
 ## component
 
 这个目录下一来是对所写demo进行分类，这是组件，也就是由多个小模块构成，放到该目录下以后也方便样式与结构的重用。而上面的CSS3是单纯来展示的，这里相当于筛选了一道（我可能会复用到的）
 
-<a href="http://fridolph.wang/my-demo/component/auto-focus-login/index.html" target="_blank">自动聚焦登录表单</a>
-
-<a href="http://fridolph.wang/my-demo/component/date-picker/index.html" target="_blank">原生JS实现日期选择器</a>
-
-<a href="http://fridolph.wang/my-demo/component/card-hover/index.html" target="_blank">图片hover效果</a>
-
-<a href="http://fridolph.wang/my-demo/component/circular-menu-toggle/index.html" target="_blank">圆环展开menu</a>
-
-<a href="http://fridolph.wang/my-demo/component/linear-gradient/index.html" target="_blank">高大上的love loading效果~</a>
-
-<a href="http://fridolph.wang/my-demo/component/linear-gradient/index.html" target="_blank">radio-checkbox优化组件样式</a>
-
-<a href="http://fridolph.wang/my-demo/component/timeline-scroll/index.html" target="_blank">时间线加载效果(throttle函数节流)</a>
-
-<a href="http://fridolph.wang/my-demo/component/toggle-menu/index.html" target="_blank">纯CSS3导航菜单栏</a>
-
+// Todo 改地址了，重新整理
 
 
 ## Layout - 布局
@@ -59,7 +26,7 @@ ps: 下面的每个demo都发布在线上了，可以正常访问，毕竟以展
 
 **flex布局篇**
 
-<a href="http://fridolph.wang/my-demo/layout/flex/flex.html" target="_blank">一个超棒的demo让你了解关于flex的一切</a>
+<a href="https://fridolph.github.io/my-program/public/layout/flex/flex.html" target="_blank">一个超棒的demo让你了解关于flex的一切</a>
 
 推荐下**阮一峰老师的博客学习**
 
@@ -69,68 +36,49 @@ ps: 下面的每个demo都发布在线上了，可以正常访问，毕竟以展
 
 ### 01_基本网格布局
 
-<a href="http://fridolph.wang/my-demo/layout/flex/01_yufa.html" target="_blank">01_flex语法篇</a>
+<a href="https://fridolph.github.io/my-program/public/layout/flex/01_yufa.html" target="_blank">01_flex语法篇</a>
 
 ### 02_flex布局实战1 骰子布局
-<a href="http://fridolph.wang/my-demo/layout/flex/02_demo.html" target="_blank">02_flex-demo布局实战</a>
+<a href="https://fridolph.github.io/my-program/public/layout/flex/02_demo.html" target="_blank">02_flex-demo布局实战</a>
 
 ### 03_flex布局实战2 骰子布局
-<a href="http://fridolph.wang/my-demo/layout/flex/03_demo.html" target="_blank">02_flex-demo布局实战2</a>
+<a href="https://fridolph.github.io/my-program/public/layout/flex/03_demo.html" target="_blank">02_flex-demo布局实战2</a>
 
 **其他布局范例** 以下是我自己的练习DEMO
 
-<a href="http://fridolph.wang/my-demo/layout/common-layout/01base.html" target="_blank">01基本网格布局</a>
-
-<a href="http://fridolph.wang/my-demo/layout/common-layout/02percent.html" target="_blank">02_百分比布局</a>
-
-<a href="http://fridolph.wang/my-demo/layout/common-layout/03grail.html" target="_blank">03_圣杯布局</a>
-
-<a href="http://fridolph.wang/my-demo/layout/common-layout/04input.html" target="_blank">04_输入框的布局</a>
-
-<a href="http://fridolph.wang/my-demo/layout/common-layout/05suspend.html" target="_blank">05_悬挂式布局</a>
-
-<a href="http://fridolph.wang/my-demo/layout/common-layout/06sticky-footer.html" target="_blank">06_固定的底栏</a>
+// Todo 改地址了，重新整理
 
-<a href="http://fridolph.wang/my-demo/layout/common-layout/07fluid.html" target="_blank">07_流式布局</a>
+## jQuery
 
-## js & jquery
+一些用jQuery完成的demo，思路和布局等代码可以在项目中直接借鉴
 
-这里的demo主要是以原生javascript来实现，目的是为`加强对DOM操作`的练习，了解一些基本的`设计模式`（如观察者、策略模式）及运用
+<a href="https://fridolph.github.io/my-program/public/jquery/accordion-animation/index.html" target="_blank">jquery实现手风琴效果</a> 
 
-<a href="http://fridolph.wang/my-demo/js-demo/card-op/index.html" target="_blank">卡片布局 - 及卡片详情</a> 
+<a href="https://fridolph.github.io/my-program/public/jquery/accordion/index.html" target="_blank">点击导航菜单同跳转到指定位置特效</a> 
 
-<a href="http://fridolph.wang/my-demo/js-demo/card-click-change/index.html" target="_blank">卡片布局 - 及卡片详情</a> 
+<a href="https://fridolph.github.io/my-program/public/jquery/automatic-angle-mask/index.html" target="_blank">判断鼠标划入图片方向显示遮罩层特效</a>
 
-<a href="http://fridolph.wang/my-demo/js-demo/css3-count-showtime/index.html" target="_blank">css3-count-showtime</a> 结合css3伪类 实现了hover展示，点击效果是用js写的所以归类到js里了
+<a href="https://fridolph.github.io/my-program/public/jquery/bar-vote-anime/index.html" target="_blank">jQuery+CSS3投票结果图表</a>
 
-<a href="http://fridolph.wang/my-demo/js-demo/canvas-change-background/index.html" target="_blank">点击更换背景 (点击有彩蛋) … 没错就是彩蛋… 彩蛋用Canvas写的 </a> 
+<a href="https://fridolph.github.io/my-program/public/jquery/card-auto-generate/index.html" target="_blank">名片自动生成</a> 
 
-<a href="http://fridolph.wang/my-demo/js-demo/card-click-change/index.html" target="_blank">点击更换卡片布局</a> 
+<a href="https://fridolph.github.io/my-program/public/jquery/image-preloading/index.html" target="_blank">图片预加载</a> 
 
-<a href="http://fridolph.wang/my-demo/js-demo/auto-generate-card/index.html" target="_blank">自动名片生成器</a> 
-这是转自codepen 老外的作品，实现思路简单，具有一定参考性，就抄过来了。
+<a href="https://fridolph.github.io/my-program/public/jquery/image-preloading/index2.html" target="_blank">图片预加载——无序之QQ表情 </a> 
 
-<a href="http://fridolph.wang/my-demo/js-demo/slide-animation/index.html" target="_blank">幻灯片背景无缝切换动画</a> 
+<a href="https://fridolph.github.io/my-program/public/jquery/image-preloading/index3.html" target="_blank">图片预加载之有序加载</a> 
 
-这里的demo主要以jquery库来实现，练习jQuery的使用与`jQuery组件的封装`，同时也为日后选择插件先挖好坑
+<a href="https://fridolph.github.io/my-program/public/jquery/label-add-jquery/index.html" target="_blank">输入框回车/点击按钮添加标签特效</a> 
 
-<a href="http://fridolph.wang/my-demo/js-jquery/accordion/index.html" target="_blank">jQuery实现的折叠门动画效果</a> 
+<a href="https://fridolph.github.io/my-program/public/jquery/mousemove-animation-eye/index.html" target="_blank">眼睛跟随鼠标转动动画特效</a> 
 
-<a href="http://fridolph.wang/my-demo/js-jquery/add-label-click-keyup/index.html" target="_blank">添加label-tag的小demo</a> 
+<a href="https://fridolph.github.io/my-program/public/jquery/shopping-cart/index.html" target="_blank">模拟购物车购物数量、结算功能</a> 
 
-<a href="http://fridolph.wang/my-demo/js-jquery/auto-position-menu/index.html" target="_blank">scroll后-置顶menu的demo</a> 
-
-<a href="http://fridolph.wang/my-demo/js-jquery/automatic-angle-mask/index.html" target="_blank">判断鼠标enter角度的hover跟随效果</a> 
-
-<a href="http://fridolph.wang/my-demo/js-jquery/easy-shopping-cart/index.html" target="_blank">模拟简易购物车的逻辑和DOM操作</a> 
-
-<a href="http://fridolph.wang/my-demo/js-jquery/follow-eye-js/index.html" target="_blank">动画跟随效果. e.pageX || e.pageY的运用</a> 
-
-<a href="http://fridolph.wang/my-demo/js-jquery/image-preloading/index.html" target="_blank">图片预加载-demo1</a>，<a href="http://fridolph.wang/my-demo/js-jquery/image-preloading/index2.html" target="_blank">图片预加载-demo2</a>，<a href="http://fridolph.wang/my-demo/js-jquery/image-preloading/index3.html" target="_blank">图片预加载-demo3</a> 
-
-<a href="http://fridolph.wang/my-demo/js-jquery/waterfall-image-layout/index.html" target="_blank">瀑布流布局 - 图片墙效果</a> 
+<a href="https://fridolph.github.io/my-program/public/jquery/waterfall-image-layout/index.html" target="_blank">瀑布流 - 可自定宽高</a> 
+---
 
+## css + js 简单效果
 
----
+<a href="https://fridolph.github.io/my-program/public/animation-css3-js/card-change-layout/index.html" target="_blank">卡片布局 - 及卡片详情</a> 
 
 如果里面的demo对您有参考或帮助，请Star + Fork，谢谢！