├── .gitignore ├── addr-selector └── index.html ├── animate └── parabola.html ├── barrellayout ├── index.html ├── pixabay-es6.html └── pixabay.html ├── carousel ├── carousel-ajax-jquery.html ├── carousel-css3.html ├── carousel-fade-jquery.html ├── carousel-fullscreen.html ├── carousel-oop.html ├── carousel-slide-jquery-oop.html ├── carousel-slide-jquery.html ├── carousel-slide-zepto-mobile.html └── js │ ├── carousel-plain.html │ ├── mock-min.js │ └── zepto.min.js ├── css3 ├── 3d-carousel.html ├── 3d-walk.html ├── bg.jpg ├── big-cover.html ├── css3-fade-carousel.html ├── dashbord.html ├── loading1.html ├── loading2.html ├── loading3.html ├── lyric.html ├── moving-cube.html ├── moving-cube2.html ├── test.html └── typing.html ├── cv ├── cv.md └── resume.html ├── datepicker └── datepicker.html ├── demo-requirejs ├── build.js ├── dist │ └── js │ │ └── merge.js ├── imgs │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── a1.jpg │ ├── a10.jpg │ ├── a11.jpg │ ├── a12.jpg │ ├── a2.jpg │ ├── a3.jpg │ ├── a4.jpg │ ├── a5.jpg │ ├── a6.jpg │ ├── a7.jpg │ ├── a8.jpg │ ├── a9.jpg │ └── blank.jpg ├── index.html └── src │ ├── css │ ├── carousel.css │ └── index.css │ └── js │ ├── app │ ├── carousel.js │ ├── event.js │ ├── exposure.js │ ├── gotop.js │ ├── index.js │ └── tab.js │ ├── lib │ └── bower_components │ │ ├── jquery │ │ ├── .bower.json │ │ ├── MIT-LICENSE.txt │ │ ├── bower.json │ │ ├── dist │ │ │ ├── jquery.js │ │ │ ├── jquery.min.js │ │ │ └── jquery.min.map │ │ └── src │ │ │ ├── ajax.js │ │ │ ├── ajax │ │ │ ├── jsonp.js │ │ │ ├── load.js │ │ │ ├── parseJSON.js │ │ │ ├── parseXML.js │ │ │ ├── script.js │ │ │ ├── var │ │ │ │ ├── nonce.js │ │ │ │ └── rquery.js │ │ │ └── xhr.js │ │ │ ├── attributes.js │ │ │ ├── attributes │ │ │ ├── attr.js │ │ │ ├── classes.js │ │ │ ├── prop.js │ │ │ ├── support.js │ │ │ └── val.js │ │ │ ├── callbacks.js │ │ │ ├── core.js │ │ │ ├── core │ │ │ ├── access.js │ │ │ ├── init.js │ │ │ ├── parseHTML.js │ │ │ ├── ready.js │ │ │ └── var │ │ │ │ └── rsingleTag.js │ │ │ ├── css.js │ │ │ ├── css │ │ │ ├── addGetHookIf.js │ │ │ ├── curCSS.js │ │ │ ├── defaultDisplay.js │ │ │ ├── hiddenVisibleSelectors.js │ │ │ ├── support.js │ │ │ ├── swap.js │ │ │ └── var │ │ │ │ ├── cssExpand.js │ │ │ │ ├── getStyles.js │ │ │ │ ├── isHidden.js │ │ │ │ ├── rmargin.js │ │ │ │ └── rnumnonpx.js │ │ │ ├── data.js │ │ │ ├── data │ │ │ ├── Data.js │ │ │ ├── accepts.js │ │ │ └── var │ │ │ │ ├── data_priv.js │ │ │ │ └── data_user.js │ │ │ ├── deferred.js │ │ │ ├── deprecated.js │ │ │ ├── dimensions.js │ │ │ ├── effects.js │ │ │ ├── effects │ │ │ ├── Tween.js │ │ │ └── animatedSelector.js │ │ │ ├── event.js │ │ │ ├── event │ │ │ ├── ajax.js │ │ │ ├── alias.js │ │ │ └── support.js │ │ │ ├── exports │ │ │ ├── amd.js │ │ │ └── global.js │ │ │ ├── intro.js │ │ │ ├── jquery.js │ │ │ ├── manipulation.js │ │ │ ├── manipulation │ │ │ ├── _evalUrl.js │ │ │ ├── support.js │ │ │ └── var │ │ │ │ └── rcheckableType.js │ │ │ ├── offset.js │ │ │ ├── outro.js │ │ │ ├── queue.js │ │ │ ├── queue │ │ │ └── delay.js │ │ │ ├── selector-native.js │ │ │ ├── selector-sizzle.js │ │ │ ├── selector.js │ │ │ ├── serialize.js │ │ │ ├── sizzle │ │ │ └── dist │ │ │ │ ├── sizzle.js │ │ │ │ ├── sizzle.min.js │ │ │ │ └── sizzle.min.map │ │ │ ├── traversing.js │ │ │ ├── traversing │ │ │ ├── findFilter.js │ │ │ └── var │ │ │ │ └── rneedsContext.js │ │ │ ├── var │ │ │ ├── arr.js │ │ │ ├── class2type.js │ │ │ ├── concat.js │ │ │ ├── hasOwn.js │ │ │ ├── indexOf.js │ │ │ ├── pnum.js │ │ │ ├── push.js │ │ │ ├── rnotwhite.js │ │ │ ├── slice.js │ │ │ ├── strundefined.js │ │ │ ├── support.js │ │ │ └── toString.js │ │ │ └── wrap.js │ │ └── requirejs │ │ ├── .bower.json │ │ ├── README.md │ │ ├── bower.json │ │ └── require.js │ └── main.js ├── demo-webpack ├── doubanmovie │ ├── dist │ │ ├── index.bundle.js │ │ └── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── helpers │ │ │ └── util.js │ │ ├── index.js │ │ ├── search │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── top250 │ │ │ ├── index.js │ │ │ └── style.css │ │ └── usbox │ │ │ ├── index.js │ │ │ └── style.css │ └── webpack.config.js └── webpack-demo │ ├── dist │ ├── app.bundle.js │ ├── bundle.js │ ├── cd0bb358c45b584743d8ce4991777c42.svg │ ├── index.html │ └── print.bundle.js │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── index.js │ ├── logo.svg │ ├── print.js │ └── style.css │ └── webpack.config.js ├── dialog ├── modal-jquery.html └── muti-modal-jquery.html ├── exposure └── expourse-basic.html ├── fm ├── task1.html ├── task2.html ├── task3.html └── task3 │ ├── package.json │ └── readme.md ├── gotop └── jquery-gotop.html ├── http ├── demo1 │ └── server.js └── demo2 │ └── server.js ├── lazyimg └── jquery-lazyload-img.html ├── logo.svg ├── notification └── index.html ├── pagination ├── comments.ejs ├── index.html └── router.js ├── postmessage ├── a.html └── b.html ├── projects ├── appstore │ ├── css │ │ └── recommend.css │ ├── imgs │ │ ├── 1_spec.png │ │ ├── head-app-1-small.png │ │ ├── head-app-1.png │ │ ├── head-app-2-small.png │ │ ├── head-app-3-small.png │ │ ├── icon-app-big-1.png │ │ ├── icon-app1.png │ │ └── icon-app2.png │ └── recommend.html ├── demos │ ├── css │ │ ├── code.css │ │ ├── demo1.css │ │ ├── demo2.css │ │ ├── markdown.css │ │ └── modal.css │ ├── demo.html │ ├── demo1.html │ ├── demo2.html │ ├── font │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ └── js │ │ └── modal.js ├── doubanmovie-requirejs │ ├── dist │ │ └── js │ │ │ └── merge.js │ ├── imgs │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── a1.jpg │ │ ├── a10.jpg │ │ ├── a11.jpg │ │ ├── a12.jpg │ │ ├── a2.jpg │ │ ├── a3.jpg │ │ ├── a4.jpg │ │ ├── a5.jpg │ │ ├── a6.jpg │ │ ├── a7.jpg │ │ ├── a8.jpg │ │ ├── a9.jpg │ │ └── blank.jpg │ ├── index.html │ └── src │ │ └── js │ │ ├── app.js │ │ ├── helper.js │ │ ├── jquery.js │ │ ├── main.js │ │ ├── search.js │ │ ├── top250.js │ │ └── usbox.js ├── doubanmovie │ ├── bad.html │ ├── index.html │ └── teach.html ├── effects │ └── snow.html ├── image-bed │ ├── css │ │ └── index.css │ ├── fonts │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ ├── imgs │ │ └── logo.svg │ └── index.html ├── img-bed2 │ ├── css │ │ └── index.css │ ├── fonts │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ ├── imgs │ │ └── logo.svg │ └── index.html ├── jianshu │ ├── css │ │ ├── common.css │ │ ├── font-awesome.min.css │ │ ├── index.css │ │ └── ui.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── index.html │ ├── slides.md │ ├── ui.html │ └── www │ │ └── slides.html ├── loadmore │ ├── index.html │ └── server.js ├── meituan │ ├── index.css │ └── index.html ├── music │ ├── index.html │ ├── index2.html │ ├── music.css │ └── music.js ├── sinanews │ └── index.html ├── stickynotes │ ├── css │ │ ├── origin.css │ │ ├── style.css │ │ └── style.styl │ ├── gulpfile.js │ ├── index.html │ ├── less │ │ └── style.less │ └── package.json ├── task15 │ ├── css │ │ ├── font-awesome.css │ │ ├── font-awesome.min.css │ │ └── index.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── imgs │ │ └── bg.jpg │ └── index.html └── weather │ ├── css │ ├── common.css │ └── index.css │ ├── index.html │ └── js │ └── index.js ├── promise ├── index.html ├── index2.html ├── promise.js └── test │ ├── a.txt │ ├── b.txt │ ├── c.txt │ └── index.js ├── stickup ├── stickup-jquery.html ├── stickup-plugin.html └── stickup2-jquery.html ├── tab ├── tab-basic-object.html ├── tab-basic.html ├── tab-jquery-plugin-extend.html ├── tab-jquery-plugin.html └── tab-jquery.html ├── timeline ├── css │ └── index.css ├── demo.html ├── index.html ├── js │ └── index.js └── note.md ├── tree ├── .router.js ├── index.html └── router.js ├── util ├── util-test.html └── util.js ├── virtual-dom ├── index.html ├── package.json ├── v-dom-es6.js └── virtualdom.js ├── vue └── Calendar-component │ └── index.html └── waterfall ├── data.txt ├── js ├── expourse.js └── waterfall.js ├── water-basic.html ├── waterfull-lazyload-ajax.html └── waterfull-lazyload-ajax2.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history 34 | .DS_Store -------------------------------------------------------------------------------- /animate/parabola.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 抛物线 6 | 18 | 19 | 20 |
21 | 69 | 70 | -------------------------------------------------------------------------------- /css3/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/css3/bg.jpg -------------------------------------------------------------------------------- /css3/big-cover.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS Bin 6 | 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /css3/css3-fade-carousel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html5 css3 6 | 63 | 64 | 65 | 66 | 67 |
68 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /css3/loading1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html5 css3 6 | 68 | 69 | 70 | 71 |
72 |
loading....
73 |
74 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /css3/loading2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html5 css3 6 | 48 | 49 | 50 |
51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /css3/loading3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | loading 6 | 48 | 49 | 50 |
51 |

logo

52 |
53 |
54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /css3/lyric.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 打字机 6 | 7 | 30 | 31 | 32 |

躺在你学校的操场看星空

33 | 34 | -------------------------------------------------------------------------------- /css3/moving-cube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | cube 7 | 80 | 81 | 82 | 83 |
84 |
85 |
1
86 |
2
87 |
3
88 |
4
89 |
5
90 |
6
91 |
92 |
93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /css3/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 32 | 33 | 34 |
35 | 36 | -------------------------------------------------------------------------------- /css3/typing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 歌词效果 6 | 7 | 39 | 40 | 41 |
42 |

躺在你学校的操场看星空

43 |

躺在你学校的操场看星空

44 |
45 | 46 | -------------------------------------------------------------------------------- /cv/cv.md: -------------------------------------------------------------------------------- 1 | 2 | > 以下简历只是根据课堂学习写的范例，大家只可做为参考，不可完全拷贝 3 | > 写到页面上的内容必须自己真正理解透彻、并且动手实践，否则有可能弄巧成拙 4 | 5 | # 小饥 6 | 7 | 应聘职位：Web前端开发工程师 8 | 9 | 性别：xx 10 | 11 | 年纪：xx 12 | 13 | 微信：xxx 14 | 15 | 邮箱：[xxx@jirengu.com](xxx@jirengu.com) 16 | 17 | 手机：(+86) 170 1234 5678 18 | 19 | Github： [https://github.com/xxx]() 20 | 21 | 个人博客： [http://xxx.github.io]() 22 | 23 | ## 教育背景 24 | 25 | - **xx大学硕士** —— xx专业—— 2013.09 ~ 2016.03 26 | - 主修课程：C++、Java、数据结构..., xx 奖学金、xx 三号学生、xx 奖励、专业前 xx 27 | 28 | - **xx大学本科** —— xx专业—— 2009.09 ~ 2013.06 29 | - 主修课程：。xx 奖学金、xx 三号学生、xx 奖励、专业前 xx 30 | 31 | ## 擅长技能 32 | 33 | * 熟悉HTML(5)/CSS(3)，掌握浮动、定位、盒模型、BFC 等CSS核心概念，掌握常见布局方式，对代码可读性、规范性、语义化有一定认识，对CSS 兼容有一定经验，能熟练开发符合W3C规范的常见页面。 34 | * 熟悉原生JavaScript的使用，掌握事件模型、DOM 操作、Ajax、JSONP、跨域、闭包、原型链、继承等相关概念的原理和使用方法，能使用原生JS 封装通用函数库，实现诸如轮播、Tab 切换卡、懒加载、Dialog、表单验证、Ajax 等常见效果 35 | * 熟练jQuery的使用，熟练使用 jQuery 开发常见页面的效果，能够将常见效果封装成 jQuery 插件 36 | * 对设计模式、编写可复用代码方面有一定经验，可对诸如轮播、Tab 切换卡、懒加载、Dialog等常见效果实现组件化封装 37 | * 熟悉 Git、Sublime、Vim 等前端相关工具的使用 38 | * 对前端工程化、模块化有一定认识，能使用 RequireJS 实现模块化开发，能使用 NPM、Gulp 打造基本的自动化流程 39 | * 对前端性能优化有相关经验 40 | * 熟悉常用Linux 常用命令与配置，能编写简单的bash脚本； 41 | * 熟悉互联网产品流程、前端开发流程、前后端协同开发流程 42 | * 对 backbone，less，sass，node 等有一定了解 43 | * 超强的自学能力、对前端深厚的兴趣、毅力 44 | 45 | 46 | ## 工作经历 47 | 48 | **xx公司** 49 | 50 | 前端开发工程师 —— 2014.07 ~ 2014.09 51 | 52 | - 网站的地址是什么，做的什么可以写的更具体一些` 53 | - 如果和前端一点不沾边，可以写在工作中因机缘巧合接触到前端开发，把这份工作经历一笔带过放到不起眼的位置即可 54 | 55 | ## 实习经历 56 | 57 | **xx公司** 58 | 59 | 前端开发实习生 —— 2014.07 ~ 2014.09 60 | 61 | - 网站的地址是什么，做的什么可以写的更具体一些` 62 | - 如果和前端一点不沾边，可以写在工作中因机缘巧合接触到前端开发 63 | 64 | 65 | 66 | 67 | 68 | ## 项目经历 69 | - 学校项目（应届生） 70 | - 在校相关的项目，获了什么奖，和数学相关、和计算机相关都行，主要是在校的表现，如果没有可以不写 71 | 72 | - 工作项目或者自己完成的稍微大一些的项目 73 | 74 | - 封装的 Util 函数库，包括常见的 dom 操作、事件兼容、ajax 封装 75 | - [GitHub 地址]() 76 | - 原生 JS 实现的常见效果，包括轮播、弹窗、事件中心、tab、分页等 77 | - [GitHub 地址](), [查看 Demo]() 78 | - 封装的JQuery 插件，包括轮播、懒加载等 79 | - [GitHub 地址](), [查看 Demo]() 80 | - 封装的常见组件，包括轮播、日历、曝光加载、瀑布流布局等 81 | - [GitHub 地址](), [查看 Demo]() 82 | - 移动端切页 83 | - 微信常见的全屏滑动切页效果 84 | - [效果地址](), GitHub代码地址 85 | 86 | - Hexo + Github搭建的[个人博客]() 87 | - 学习前端心路历程的详细记录 88 | 89 | - 个人作品展示页 90 | - 线上地址：xxxx， GitHub 地址 91 | - 使用 requireJS 作为模块化工具，使用 r.js 作为js打包工具，使用 gulp 作为 HTML、CSS构建工具，可实现自动化打包、一键部署等功能。 92 | - 作品页使用的轮播组件、回到顶部组件、分页组件、懒加载组件、Tab 组件、弹窗组件均为自己实现 93 | 94 | 95 | 96 | 97 | ## 兴趣爱好 98 | 99 | * 英语六级，xx分，能流畅阅读以及翻译英文专业书籍、文档及其他英文资料，参与教程 javascript.info 的部分翻译 100 | * 浪迹于github、stack overflow、quora、segmentfault、知乎等国内外程序员知识社区 101 | * 爱篮球、看电影、dota 102 | 103 | 104 | -------------------------------------------------------------------------------- /demo-requirejs/build.js: -------------------------------------------------------------------------------- 1 | ({ 2 | baseUrl: "./src/js/app", 3 | paths: { 4 | 'jquery': '../lib/bower_components/jquery/dist/jquery.min', 5 | 'main': '../main' 6 | }, 7 | name: "main", 8 | out: "dist/js/merge.js" 9 | }) -------------------------------------------------------------------------------- /demo-requirejs/imgs/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/1.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/2.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/3.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/4.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/5.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a1.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a10.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a11.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a12.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a2.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a3.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a4.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a5.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a6.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a7.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a8.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/a9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/a9.jpg -------------------------------------------------------------------------------- /demo-requirejs/imgs/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/demo-requirejs/imgs/blank.jpg -------------------------------------------------------------------------------- /demo-requirejs/src/css/carousel.css: -------------------------------------------------------------------------------- 1 | .carousel { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | overflow: hidden; 6 | } 7 | 8 | .carousel ul, 9 | .carousel li{ 10 | margin: 0; 11 | padding: 0; 12 | list-style: none; 13 | height: 100%; 14 | } 15 | 16 | .carousel .img-ct { 17 | position: absolute; 18 | overflow: hidden; 19 | } 20 | .carousel .img-ct>li { 21 | float: left; 22 | width: 100%; 23 | height: 100%; 24 | background-size: cover; 25 | background-position: center center; 26 | } 27 | 28 | 29 | .carousel .arrow { 30 | position: absolute; 31 | top: 50%; 32 | margin-top: -15px; 33 | display: inline-block; 34 | width: 30px; 35 | height: 30px; 36 | border-radius: 50%; 37 | border: 1px solid #fff; 38 | line-height: 30px; 39 | color: #fff; 40 | text-align: center; 41 | text-decoration: none; 42 | } 43 | .carousel .arrow:hover { 44 | opacity: 0.8; 45 | } 46 | .carousel .pre { 47 | left: 10px; 48 | } 49 | 50 | .carousel .next { 51 | right: 10px; 52 | } 53 | 54 | .carousel .bullet { 55 | position: absolute; 56 | bottom: 10px; 57 | width: 100%; 58 | font-size: 0; 59 | z-index: 1; 60 | text-align: center; 61 | } 62 | .carousel .bullet >li{ 63 | display: inline-block; 64 | width: 30px; 65 | height: 5px; 66 | border: 1px solid #ccc; 67 | border-radius: 4px; 68 | margin: 0 3px; 69 | cursor: pointer; 70 | } 71 | .carousel .bullet >li.active{ 72 | background-color: #ccc; 73 | } 74 | -------------------------------------------------------------------------------- /demo-requirejs/src/css/index.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /** 3 | * 4 | * @authors hunger (hunger@jirengu.com) 5 | * @date 2015-10-21 18:48:30 6 | * @version $Id$ 7 | */ 8 | 9 | html,body,ul,li{ 10 | margin: 0; 11 | padding: 0; 12 | } 13 | ul,li{ 14 | list-style: none; 15 | } 16 | 17 | html,body{ 18 | height: 100%; 19 | } 20 | #header{ 21 | height: 50% 22 | } 23 | 24 | 25 | .layout{ 26 | width: 1000px; 27 | margin: 0 auto; 28 | } 29 | 30 | 31 | #jrg-gotop{ 32 | width: 32px; 33 | cursor: pointer; 34 | border: 1px solid #ccc; 35 | padding: 10px; 36 | } 37 | 38 | 39 | 40 | .intro p { 41 | text-align: center; 42 | font-size: 40px; 43 | margin: 20px; 44 | color: #E0983B; 45 | } 46 | 47 | .img-cells{ 48 | margin-top: 30px; 49 | margin-bottom: 60px; 50 | } 51 | .img-cells ul{ 52 | margin-left: -20px; 53 | } 54 | .img-cells li{ 55 | float: left; 56 | margin-left: 20px; 57 | margin-top: 20px; 58 | } 59 | 60 | .img-cells li img{ 61 | width: 320px; 62 | } -------------------------------------------------------------------------------- /demo-requirejs/src/js/app/event.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @authors hunger (hunger@jirengu.com) 4 | * @date 2015-10-21 17:43:39 5 | * @version $Id$ 6 | */ 7 | 8 | define(function(){ 9 | 10 | var EventCenter = (function(){ 11 | 12 | var events = {}; 13 | 14 | function on(evt, handler){ 15 | events[evt] = events[evt] || []; 16 | 17 | 18 | /** 19 | * events = { 20 | * 'text-change': [] 21 | * 22 | * } 23 | * 24 | */ 25 | 26 | 27 | events[evt].push({ 28 | handler: handler 29 | }); 30 | 31 | /** 32 | * events = { 33 | * 'text-change': [ { handler: function(data){console.log(data) } } ] 34 | * 35 | * } 36 | * 37 | */ 38 | } 39 | 40 | function fire(evt, args){ 41 | if(!events[evt]){ 42 | return; 43 | } 44 | for(var i=0; i回到顶部
'); 22 | $('body').append(this.$el); 23 | } else { 24 | this.$el = $el; 25 | } 26 | this.$c = $(document); 27 | 28 | this.bind(); 29 | }, 30 | 31 | bind: function() { 32 | var me = this; 33 | 34 | this.$el.on('click', function() { 35 | me.goToTop(); 36 | }); 37 | 38 | this.$c.on('scroll', function(){ 39 | me.scroll(); 40 | }); 41 | }, 42 | 43 | goToTop: function() { 44 | this.$c.scrollTop(0); 45 | }, 46 | 47 | scroll: function(e) { 48 | var scrollTop = this.$c.scrollTop(); 49 | if (scrollTop > 100) { 50 | this.$el.show(); 51 | } else { 52 | this.$el.hide(); 53 | } 54 | } 55 | }; 56 | 57 | //new goTop(); 58 | 59 | 60 | return goTop; 61 | }); -------------------------------------------------------------------------------- /demo-requirejs/src/js/app/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 首页功能 3 | */ 4 | 5 | //define(id, ['jquery'], function($){ $('') }) 6 | // 7 | // 8 | //CMD 9 | // define(function(require, exports, module){ 10 | // var jQuery = require('jquery'); 11 | // var GoTop = require('com/gotop'); 12 | // console.log(GoTop) 13 | 14 | // new GoTop(); 15 | // }) 16 | 17 | //AMD 18 | 19 | // define(function(require){ 20 | // var $ = require('jquery') 21 | // var Event = require('event') 22 | // return 123 23 | 24 | // }) 25 | 26 | 27 | 28 | 29 | define(['jquery','gotop', 'event', 'carousel', 'exposure'], function($, GoTop, Event, Carousel, Exposure) { 30 | 31 | 32 | 33 | new GoTop(); 34 | new Carousel($('.carousel')) 35 | 36 | var colors = ['#dfdfdc', '#142829', '#2b2e41', '#172838'] 37 | var msgs = ['兴趣很重要', '踏实很重要', '思考很重要', '动手很重要'] 38 | 39 | Event.on('carousel:play', function(idx) { 40 | $('body').css('background-color', colors[idx]) 41 | $('.intro p').text(msgs[idx]) 42 | }) 43 | 44 | 45 | 46 | Exposure.one($('.img-cells img'), function(){ 47 | var $this = $(this); 48 | $this.attr('src', $this.attr('data-src')); 49 | }) 50 | 51 | 52 | }); -------------------------------------------------------------------------------- /demo-requirejs/src/js/app/tab.js: -------------------------------------------------------------------------------- 1 | /** 2 | * tab.js 3 | * @authors hunger (hunger@jirengu.com) 4 | * @date 2015-10-21 17:15:29 5 | * @version $Id$ 6 | */ 7 | 8 | /* 9 | 10 | html 11 | ------------------------ 12 | 13 |
14 | 18 |
19 |
20 |
21 | 22 | js 23 | -------------------------- 24 | Tab.init($('.tab'), function($panel){ 25 | dealWith($panel); 26 | }); 27 | 28 | */ 29 | 30 | define(function(require) { 31 | 32 | var $ = require('jquery'); 33 | 34 | var Tab = (function() { 35 | 36 | var tabList = []; 37 | 38 | 39 | function init($tab, handler) { 40 | $tab.each(function() { 41 | var $cal = $(this); 42 | if ($cal.hasClass('init')) { 43 | return; 44 | } 45 | tabList.push(new Tab($cal, handler)); 46 | $cal.addClass('init'); 47 | }); 48 | 49 | } 50 | 51 | function _Tab($tab, handler) { 52 | this.$tab = $tab; 53 | this.$lis = $tab.find('li'); 54 | this.$panels = $tab.find('.panel'); 55 | this.handler = handler; 56 | this.bind(); 57 | handler && handler(this.$panels.eq(0)); 58 | } 59 | 60 | _Tab.prototype = { 61 | 62 | bind: function() { 63 | var me = this; 64 | this.$lis.on('click', function() { 65 | var index = $(this).index(); 66 | me.$lis.removeClass('active'); 67 | me.$lis.eq(index).addClass('active'); 68 | 69 | me.$panels.removeClass('active'); 70 | me.$panels.eq(index).addClass('active'); 71 | 72 | me.handler && me.handler(me.$panels.eq(index)); 73 | }); 74 | }, 75 | 76 | 77 | }; 78 | 79 | 80 | return { 81 | init: init 82 | }; 83 | 84 | })(); 85 | 86 | return Tab; 87 | }); -------------------------------------------------------------------------------- /demo-requirejs/src/js/lib/bower_components/jquery/.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery", 3 | "version": "2.1.4", 4 | "main": "dist/jquery.js", 5 | "license": "MIT", 6 | "ignore": [ 7 | "**/.*", 8 | "build", 9 | "dist/cdn", 10 | "speed", 11 | "test", 12 | "*.md", 13 | "AUTHORS.txt", 14 | "Gruntfile.js", 15 | "package.json" 16 | ], 17 | "devDependencies": { 18 | "sizzle": "2.1.1-jquery.2.1.2", 19 | "requirejs": "2.1.10", 20 | "qunit": "1.14.0", 21 | "sinon": "1.8.1" 22 | }, 23 | "keywords": [ 24 | "jquery", 25 | "javascript", 26 | "library" 27 | ], 28 | "homepage": "https://github.com/jquery/jquery", 29 | "_release": "2.1.4", 30 | "_resolution": { 31 | "type": "version", 32 | "tag": "2.1.4", 33 | "commit": "7751e69b615c6eca6f783a81e292a55725af6b85" 34 | }, 35 | "_source": "git://github.com/jquery/jquery.git", 36 | "_target": "~2.1.4", 37 | "_originalSource": "jquery", 38 | "_direct": true 39 | } -------------------------------------------------------------------------------- /demo-requirejs/src/js/lib/bower_components/jquery/MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2014 jQuery Foundation and other contributors 2 | http://jquery.com/ 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining 5 | a copy of this software and associated documentation files (the 6 | "Software"), to deal in the Software without restriction, including 7 | without limitation the rights to use, copy, modify, merge, publish, 8 | distribute, sublicense, and/or sell copies of the Software, and to 9 | permit persons to whom the Software is furnished to do so, subject to 10 | the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /demo-requirejs/src/js/lib/bower_components/jquery/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery", 3 | "version": "2.1.4", 4 | "main": "dist/jquery.js", 5 | "license": "MIT", 6 | "ignore": [ 7 | "**/.*", 8 | "build", 9 | "dist/cdn", 10 | "speed", 11 | "test", 12 | "*.md", 13 | "AUTHORS.txt", 14 | "Gruntfile.js", 15 | "package.json" 16 | ], 17 | "devDependencies": { 18 | "sizzle": "2.1.1-jquery.2.1.2", 19 | "requirejs": "2.1.10", 20 | "qunit": "1.14.0", 21 | "sinon": "1.8.1" 22 | }, 23 | "keywords": [ 24 | "jquery", 25 | "javascript", 26 | "library" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /demo-requirejs/src/js/lib/bower_components/jquery/src/ajax/jsonp.js: -------------------------------------------------------------------------------- 1 | define([ 2 | "../core", 3 | "./var/nonce", 4 | "./var/rquery", 5 | "../ajax" 6 | ], function( jQuery, nonce, rquery ) { 7 | 8 | var oldCallbacks = [], 9 | rjsonp = /(=)\?(?=&|$)|\?\?/; 10 | 11 | // Default jsonp settings 12 | jQuery.ajaxSetup({ 13 | jsonp: "callback", 14 | jsonpCallback: function() { 15 | var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( nonce++ ) ); 16 | this[ callback ] = true; 17 | return callback; 18 | } 19 | }); 20 | 21 | // Detect, normalize options and install callbacks for jsonp requests 22 | jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) { 23 | 24 | var callbackName, overwritten, responseContainer, 25 | jsonProp = s.jsonp !== false && ( rjsonp.test( s.url ) ? 26 | "url" : 27 | typeof s.data === "string" && !( s.contentType || "" ).indexOf("application/x-www-form-urlencoded") && rjsonp.test( s.data ) && "data" 28 | ); 29 | 30 | // Handle iff the expected data type is "jsonp" or we have a parameter to set 31 | if ( jsonProp || s.dataTypes[ 0 ] === "jsonp" ) { 32 | 33 | // Get callback name, remembering preexisting value associated with it 34 | callbackName = s.jsonpCallback = jQuery.isFunction( s.jsonpCallback ) ? 35 | s.jsonpCallback() : 36 | s.jsonpCallback; 37 | 38 | // Insert callback into url or form data 39 | if ( jsonProp ) { 40 | s[ jsonProp ] = s[ jsonProp ].replace( rjsonp, "$1" + callbackName ); 41 | } else if ( s.jsonp !== false ) { 42 | s.url += ( rquery.test( s.url ) ? "&" : "?" ) + s.jsonp + "=" + callbackName; 43 | } 44 | 45 | // Use data converter to retrieve json after script execution 46 | s.converters["script json"] = function() { 47 | if ( !responseContainer ) { 48 | jQuery.error( callbackName + " was not called" ); 49 | } 50 | return responseContainer[ 0 ]; 51 | }; 52 | 53 | // force json dataType 54 | s.dataTypes[ 0 ] = "json"; 55 | 56 | // Install callback 57 | overwritten = window[ callbackName ]; 58 | window[ callbackName ] = function() { 59 | responseContainer = arguments; 60 | }; 61 | 62 | // Clean-up function (fires after converters) 63 | jqXHR.always(function() { 64 | // Restore preexisting value 65 | window[ callbackName ] = overwritten; 66 | 67 | // Save back as free 68 | if ( s[ callbackName ] ) { 69 | // make sure that re-using the options doesn't screw things around 70 | s.jsonpCallback = originalSettings.jsonpCallback; 71 | 72 | // save the callback name for future use 73 | oldCallbacks.push( callbackName ); 74 | } 75 | 76 | // Call if it was a function and we have a response 77 | if ( responseContainer && jQuery.isFunction( overwritten ) ) { 78 | overwritten( responseContainer[ 0 ] ); 79 | } 80 | 81 | responseContainer = overwritten = undefined; 82 | }); 83 | 84 | // Delegate to script 85 | return "script"; 86 | } 87 | }); 88 | 89 | }); 90 | -------------------------------------------------------------------------------- /demo-requirejs/src/js/lib/bower_components/jquery/src/ajax/load.js: -------------------------------------------------------------------------------- 1 | define([ 2 | "../core", 3 | "../core/parseHTML", 4 | "../ajax", 5 | "../traversing", 6 | "../manipulation", 7 | "../selector", 8 | // Optional event/alias dependency 9 | "../event/alias" 10 | ], function( jQuery ) { 11 | 12 | // Keep a copy of the old load method 13 | var _load = jQuery.fn.load; 14 | 15 | /** 16 | * Load a url into a page 17 | */ 18 | jQuery.fn.load = function( url, params, callback ) { 19 | if ( typeof url !== "string" && _load ) { 20 | return _load.apply( this, arguments ); 21 | } 22 | 23 | var selector, type, response, 24 | self = this, 25 | off = url.indexOf(" "); 26 | 27 | if ( off >= 0 ) { 28 | selector = jQuery.trim( url.slice( off ) ); 29 | url = url.slice( 0, off ); 30 | } 31 | 32 | // If it's a function 33 | if ( jQuery.isFunction( params ) ) { 34 | 35 | // We assume that it's the callback 36 | callback = params; 37 | params = undefined; 38 | 39 | // Otherwise, build a param string 40 | } else if ( params && typeof params === "object" ) { 41 | type = "POST"; 42 | } 43 | 44 | // If we have elements to modify, make the request 45 | if ( self.length > 0 ) { 46 | jQuery.ajax({ 47 | url: url, 48 | 49 | // if "type" variable is undefined, then "GET" method will be used 50 | type: type, 51 | dataType: "html", 52 | data: params 53 | }).done(function( responseText ) { 54 | 55 | // Save response for use in complete callback 56 | response = arguments; 57 | 58 | self.html( selector ? 59 | 60 | // If a selector was specified, locate the right elements in a dummy div 61 | // Exclude scripts to avoid IE 'Permission Denied' errors 62 | jQuery("
").append( jQuery.parseHTML( responseText ) ).find( selector ) : 63 | 64 | // Otherwise use the full result 65 | responseText ); 66 | 67 | }).complete( callback && function( jqXHR, status ) { 68 | self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] ); 69 | }); 70 | } 71 | 72 | return this; 73 | }; 74 | 75 | }); 76 | -------------------------------------------------------------------------------- /demo-requirejs/src/js/lib/bower_components/jquery/src/ajax/parseJSON.js: -------------------------------------------------------------------------------- 1 | define([ 2 | "../core" 3 | ], function( jQuery ) { 4 | 5 | // Support: Android 2.3 6 | // Workaround failure to string-cast null input 7 | jQuery.parseJSON = function( data ) { 8 | return JSON.parse( data + "" ); 9 | }; 10 | 11 | return jQuery.parseJSON; 12 | 13 | }); 14 | -------------------------------------------------------------------------------- /demo-requirejs/src/js/lib/bower_components/jquery/src/ajax/parseXML.js: -------------------------------------------------------------------------------- 1 | define([ 2 | "../core" 3 | ], function( jQuery ) { 4 | 5 | // Cross-browser xml parsing 6 | jQuery.parseXML = function( data ) { 7 | var xml, tmp; 8 | if ( !data || typeof data !== "string" ) { 9 | return null; 10 | } 11 | 12 | // Support: IE9 13 | try { 14 | tmp = new DOMParser(); 15 | xml = tmp.parseFromString( data, "text/xml" ); 16 | } catch ( e ) { 17 | xml = undefined; 18 | } 19 | 20 | if ( !xml || xml.getElementsByTagName( "parsererror" ).length ) { 21 | jQuery.error( "Invalid XML: " + data ); 22 | } 23 | return xml; 24 | }; 25 | 26 | return jQuery.parseXML; 27 | 28 | }); 29 | -------------------------------------------------------------------------------- /demo-requirejs/src/js/lib/bower_components/jquery/src/ajax/script.js: -------------------------------------------------------------------------------- 1 | define([ 2 | "../core", 3 | "../ajax" 4 | ], function( jQuery ) { 5 | 6 | // Install script dataType 7 | jQuery.ajaxSetup({ 8 | accepts: { 9 | script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript" 10 | }, 11 | contents: { 12 | script: /(?:java|ecma)script/ 13 | }, 14 | converters: { 15 | "text script": function( text ) { 16 | jQuery.globalEval( text ); 17 | return text; 18 | } 19 | } 20 | }); 21 | 22 | // Handle cache's special case and crossDomain 23 | jQuery.ajaxPrefilter( "script", function( s ) { 24 | if ( s.cache === undefined ) { 25 | s.cache = false; 26 | } 27 | if ( s.crossDomain ) { 28 | s.type = "GET"; 29 | } 30 | }); 31 | 32 | // Bind script tag hack transport 33 | jQuery.ajaxTransport( "script", function( s ) { 34 | // This transport only deals with cross domain requests 35 | if ( s.crossDomain ) { 36 | var script, callback; 37 | return { 38 | send: function( _, complete ) { 39 | script = jQuery(" 9 | -------------------------------------------------------------------------------- /demo-webpack/webpack-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack --config webpack.config.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "css-loader": "^0.28.11", 15 | "file-loader": "^1.1.11", 16 | "html-webpack-plugin": "^3.2.0", 17 | "style-loader": "^0.21.0", 18 | "webpack": "^4.6.0", 19 | "webpack-cli": "^2.0.15" 20 | }, 21 | "dependencies": { 22 | "lodash": "^4.17.10" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /demo-webpack/webpack-demo/src/index.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash') 2 | require('./style.css') 3 | var logo = require('./logo.svg') 4 | var printMe = require('./print') 5 | 6 | function component() { 7 | var element = document.createElement('div'); 8 | 9 | // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的 10 | element.innerHTML = _.join(['Hello', 'webpack'], ' '); 11 | element.classList.add('hello'); 12 | var img = document.createElement('img') 13 | img.src = logo 14 | console.log(logo) 15 | 16 | var btn = document.createElement('button') 17 | btn.innerHTML = 'click me' 18 | btn.onclick = printMe 19 | element.appendChild(btn) 20 | consol.log(1) 21 | 22 | return { element: element, logo: img }; 23 | } 24 | 25 | var obj = component() 26 | document.body.appendChild(obj.element); 27 | document.body.appendChild(obj.logo); -------------------------------------------------------------------------------- /demo-webpack/webpack-demo/src/logo.svg: -------------------------------------------------------------------------------- 1 | logo-on-dark-bg -------------------------------------------------------------------------------- /demo-webpack/webpack-demo/src/print.js: -------------------------------------------------------------------------------- 1 | module.exports = function printMe() { 2 | console.log('I get called from print.js!'); 3 | } -------------------------------------------------------------------------------- /demo-webpack/webpack-demo/src/style.css: -------------------------------------------------------------------------------- 1 | .hello { 2 | color: red; 3 | background: url('./logo.svg') 0 0 no-repeat; 4 | } -------------------------------------------------------------------------------- /demo-webpack/webpack-demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | entry: { 6 | app: './src/index.js', 7 | print: './src/print.js' 8 | }, 9 | output: { 10 | filename: '[name].bundle.js', 11 | path: path.resolve(__dirname, 'dist') 12 | }, 13 | plugins: [ 14 | new HtmlWebpackPlugin({ 15 | title: 'hello Management' 16 | }) 17 | ], 18 | devtool: 'inline-source-map', 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.css$/, 23 | use: [ 24 | 'style-loader', 25 | 'css-loader' 26 | ] 27 | }, 28 | { 29 | test: /\.(png|svg|jpg|gif)$/, 30 | use: [ 31 | 'file-loader' 32 | ] 33 | } 34 | ] 35 | } 36 | } -------------------------------------------------------------------------------- /exposure/expourse-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 图片懒加载-模块化 8 | 20 | 21 | 22 |

hello3

23 |

hello4

24 |

hello5

25 |

hello6

26 |

hello7

27 |

hello9

28 |

hello0

29 |

hello11

30 |

hello12

31 |

hello13

32 |

hello14

33 |

hello15

34 |

hello16

35 |

hello17

36 |

hello18

37 |

hello19

38 |

hello20

39 |

hello21

40 |

hello22

41 |

hello23

42 | 43 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /fm/task3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "task3", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC" 11 | } 12 | -------------------------------------------------------------------------------- /fm/task3/readme.md: -------------------------------------------------------------------------------- 1 | ## 1. 创建项目目录 2 | ```bash 3 | cd task3 4 | mkdir src dist 5 | cd src 6 | mkdir js less imgs fonts 7 | ``` 8 | 9 | ## 2. 生成 `package.json` 10 | 11 | ```bash 12 | npm init 13 | ``` 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /gotop/jquery-gotop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 回到顶部 7 | 8 | 9 | 10 | 24 | 25 | 26 |

内容1

27 |

内容1

28 |

内容1

29 |

内容3

内容1

30 |

内容1

内容1

31 |

内容1

32 |

内容1

33 |

内容4

内容1

34 |

内容1

内容1

35 |

内容1

内容1

36 |

内容6

内容1

37 |

内容7

38 | 39 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /http/demo1/server.js: -------------------------------------------------------------------------------- 1 | 2 | const http = require('http') 3 | 4 | http.createServer(function(req, res){ 5 | console.log(req.headers) 6 | res.setHeader('Content-Type', 'text/plain'); 7 | res.setHeader('powered', 'Jirengu'); 8 | res.setHeader('Set-Cookie', ['id=123456']); 9 | res.statusCode = 404; 10 | res.statusMessage = 'hello world' 11 | //res.writeHead(200, 'Not Found',{ 'Content-Type': 'text/plain' }); 12 | res.end('

hello world

') 13 | }).listen(8080) 14 | -------------------------------------------------------------------------------- /http/demo2/server.js: -------------------------------------------------------------------------------- 1 | var http = require('http') 2 | var fs = require('fs') 3 | var url = require('url') 4 | 5 | 6 | 7 | http.createServer(function(req, res){ 8 | 9 | var pathObj = url.parse(req.url, true) 10 | console.log(pathObj) 11 | 12 | switch (pathObj.pathname) { 13 | case '/getWeather': 14 | var ret 15 | if(pathObj.query.city == 'beijing'){ 16 | ret = { 17 | city: 'beijing', 18 | weather: '晴天' 19 | } 20 | }else{ 21 | ret = { 22 | city: pathObj.query.city, 23 | weather: '不知道' 24 | } 25 | } 26 | res.end(JSON.stringify(ret)) 27 | break; 28 | case '/user/123': 29 | 30 | res.end( fs.readFileSync(__dirname + '/static/user.tpl' )) 31 | break; 32 | default: 33 | res.end( fs.readFileSync(__dirname + '/static' + pathObj.pathname) ) 34 | } 35 | }).listen(8080) 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /notification/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Examples 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 31 | 32 | -------------------------------------------------------------------------------- /pagination/comments.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | pagination 8 | 49 | 50 | 51 | 52 |
53 | 54 |
55 |
    56 | <% comments.forEach(function(comment){ %> 57 |
  • <%= comment %> 58 | <% }) %> 59 |
60 | 61 |
62 | 83 | 84 | 85 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /pagination/router.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 这里是接口范例，可根据需求进行修改 3 | * 可在当前项目文件夹下直接新建 html文件，向对应接口发送请求 4 | 使用方法： 5 | 1. npm install -g server-mock 6 | 2. cd pagination 7 | 3. mock start 8 | 4. js 分页 http://localhost:8080 测试 index.html， 模板分页 在 http://localhost:8080/comments 测试 9 | 10 | */ 11 | 12 | 13 | /** 14 | * 发送 GET 请求， 无参数 15 | * GET /getComments 16 | * 返回响应数据 17 | */ 18 | app.get('/getComments', function(req, res) { 19 | 20 | var comments = [], 21 | pageIdx = req.query.page || 1, 22 | pageSize = 5; 23 | for (var i = 0; i < pageSize; i++) { 24 | comments.push('评论' + ((pageIdx-1)*pageSize +i )); 25 | } 26 | res.send(comments); 27 | }); 28 | 29 | 30 | 31 | 32 | 33 | 34 | /** 35 | * 页面路由，从模板渲染页面渲染页面, 36 | * htttp://localhost:8080/comments 37 | * 支持 ejs, jade 模板 38 | */ 39 | app.get('/comments', function(req, res) { 40 | var comments = [], 41 | pageIdx = req.query.page || 1, 42 | pageSize = 5, 43 | totalLen = 88; 44 | for (var i = 0; i < pageSize; i++) { 45 | comments.push('评论' + ((pageIdx-1)*pageSize +i )); 46 | } 47 | 48 | var data = { 49 | comments: comments, 50 | pagination: { 51 | pageIdx: pageIdx, 52 | pageSize: pageSize, 53 | totalLen: totalLen 54 | } 55 | } 56 | console.log(data.pagination.pageIdx) 57 | 58 | res.render('comments', data); 59 | }); 60 | -------------------------------------------------------------------------------- /postmessage/a.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /postmessage/b.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/postmessage/b.html -------------------------------------------------------------------------------- /projects/appstore/css/recommend.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/appstore/css/recommend.css -------------------------------------------------------------------------------- /projects/appstore/imgs/1_spec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/appstore/imgs/1_spec.png -------------------------------------------------------------------------------- /projects/appstore/imgs/head-app-1-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/appstore/imgs/head-app-1-small.png -------------------------------------------------------------------------------- /projects/appstore/imgs/head-app-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/appstore/imgs/head-app-1.png -------------------------------------------------------------------------------- /projects/appstore/imgs/head-app-2-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/appstore/imgs/head-app-2-small.png -------------------------------------------------------------------------------- /projects/appstore/imgs/head-app-3-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/appstore/imgs/head-app-3-small.png -------------------------------------------------------------------------------- /projects/appstore/imgs/icon-app-big-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/appstore/imgs/icon-app-big-1.png -------------------------------------------------------------------------------- /projects/appstore/imgs/icon-app1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/appstore/imgs/icon-app1.png -------------------------------------------------------------------------------- /projects/appstore/imgs/icon-app2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/appstore/imgs/icon-app2.png -------------------------------------------------------------------------------- /projects/demos/css/code.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | 4 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 5 | based on dark.css by Ivan Sagalaev 6 | 7 | */ 8 | 9 | .hljs { 10 | display: block; 11 | overflow-x: auto; 12 | padding: 0.5em; 13 | background: #3f3f3f; 14 | color: #dcdcdc; 15 | } 16 | 17 | .hljs-keyword, 18 | .hljs-selector-tag, 19 | .hljs-tag { 20 | color: #e3ceab; 21 | } 22 | 23 | .hljs-template-tag { 24 | color: #dcdcdc; 25 | } 26 | 27 | .hljs-number { 28 | color: #8cd0d3; 29 | } 30 | 31 | .hljs-variable, 32 | .hljs-template-variable, 33 | .hljs-attribute { 34 | color: #efdcbc; 35 | } 36 | 37 | .hljs-literal { 38 | color: #efefaf; 39 | } 40 | 41 | .hljs-subst { 42 | color: #8f8f8f; 43 | } 44 | 45 | .hljs-title, 46 | .hljs-name, 47 | .hljs-selector-id, 48 | .hljs-selector-class, 49 | .hljs-section, 50 | .hljs-type { 51 | color: #efef8f; 52 | } 53 | 54 | .hljs-symbol, 55 | .hljs-bullet, 56 | .hljs-link { 57 | color: #dca3a3; 58 | } 59 | 60 | .hljs-deletion, 61 | .hljs-string, 62 | .hljs-built_in, 63 | .hljs-builtin-name { 64 | color: #cc9393; 65 | } 66 | 67 | .hljs-addition, 68 | .hljs-comment, 69 | .hljs-quote, 70 | .hljs-meta { 71 | color: #7f9f7f; 72 | } 73 | 74 | 75 | .hljs-emphasis { 76 | font-style: italic; 77 | } 78 | 79 | .hljs-strong { 80 | font-weight: bold; 81 | } 82 | -------------------------------------------------------------------------------- /projects/demos/css/demo1.css: -------------------------------------------------------------------------------- 1 | /* 2 | reset 3 | */ 4 | 5 | a{ 6 | text-decoration: none; 7 | } 8 | 9 | /* 10 | basic style 11 | */ 12 | 13 | body{ 14 | font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif; 15 | font-size: 14px; 16 | color: #87968e; 17 | background: #fff2e3; 18 | text-align: center; 19 | } 20 | 21 | h1{ 22 | font-size: 42px; 23 | } 24 | a{ 25 | color: #72b890; 26 | } 27 | .layout{ 28 | width: 800px; 29 | margin: 0 auto; 30 | } 31 | .clearfix:after{ 32 | content: ''; 33 | display: block; 34 | clear: both; 35 | } 36 | 37 | .btn{ 38 | display: inline-block; 39 | margin: 3px; 40 | padding: 6px 14px; 41 | font-weight: normal; 42 | border-radius: 2px; 43 | background: #72b890; 44 | color: #fff; 45 | } 46 | .btn:hover{ 47 | opacity: 0.8; 48 | } 49 | .active{ 50 | opacity: 0.6; 51 | } 52 | 53 | 54 | /* 55 | page css 56 | */ 57 | 58 | 59 | #header h1{ 60 | margin-top: 30px; 61 | } 62 | 63 | .intro{ 64 | margin-top: 10px; 65 | opacity: 0.6; 66 | } 67 | .demo-btns{ 68 | margin: 40px 0; 69 | } 70 | .demo-btns>li{ 71 | display: inline-block; 72 | } 73 | .btns{ 74 | margin-top: 30px; 75 | } 76 | 77 | .detail{ 78 | margin-top: 60px; 79 | } 80 | .markdown-ct{ 81 | text-align: left; 82 | } 83 | 84 | #footer{ 85 | margin-top: 30px; 86 | } 87 | -------------------------------------------------------------------------------- /projects/demos/css/demo2.css: -------------------------------------------------------------------------------- 1 | /* 2 | reset 3 | */ 4 | 5 | a{ 6 | text-decoration: none; 7 | } 8 | 9 | /* 10 | basic style 11 | */ 12 | 13 | body{ 14 | font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif; 15 | font-size: 14px; 16 | color: #fff; 17 | background: #c05d8e; 18 | text-align: center; 19 | } 20 | 21 | h1{ 22 | font-size: 42px; 23 | } 24 | a{ 25 | color: #72b890; 26 | } 27 | .layout{ 28 | width: 800px; 29 | margin: 0 auto; 30 | } 31 | .clearfix:after{ 32 | content: ''; 33 | display: block; 34 | clear: both; 35 | } 36 | 37 | .btn{ 38 | display: inline-block; 39 | margin: 3px; 40 | padding: 6px 14px; 41 | font-weight: normal; 42 | border-radius: 2px; 43 | background: #883b61; 44 | color: #fff; 45 | } 46 | .btn:hover{ 47 | opacity: 0.8; 48 | } 49 | .active{ 50 | opacity: 0.6; 51 | } 52 | 53 | 54 | /* 55 | page css 56 | */ 57 | 58 | 59 | #header h1{ 60 | margin-top: 30px; 61 | } 62 | 63 | .intro{ 64 | margin-top: 10px; 65 | opacity: 0.6; 66 | } 67 | .demo-btns{ 68 | margin: 40px 0; 69 | } 70 | .demo-btns>li{ 71 | display: inline-block; 72 | } 73 | .btns{ 74 | margin-top: 30px; 75 | } 76 | 77 | .detail{ 78 | margin-top: 60px; 79 | } 80 | .markdown-ct{ 81 | text-align: left; 82 | } 83 | 84 | #footer{ 85 | margin-top: 30px; 86 | } 87 | -------------------------------------------------------------------------------- /projects/demos/css/markdown.css: -------------------------------------------------------------------------------- 1 | 2 | h1, 3 | h2, 4 | h3, 5 | h4, 6 | h5, 7 | h6, 8 | p, 9 | blockquote { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | table { 15 | margin: 10px 0 15px 0; 16 | border-collapse: collapse; 17 | } 18 | td,th { 19 | border: 1px solid #ddd; 20 | padding: 3px 10px; 21 | } 22 | th { 23 | padding: 5px 10px; 24 | } 25 | 26 | a { 27 | text-decoration: none; 28 | } 29 | a:hover { 30 | text-decoration: none; 31 | } 32 | a img { 33 | border: none; 34 | } 35 | p { 36 | margin-bottom: 9px; 37 | } 38 | h1, 39 | h2, 40 | h3, 41 | h4, 42 | h5, 43 | h6 { 44 | line-height: 2; 45 | } 46 | h1 { 47 | margin-bottom: 18px; 48 | font-size: 30px; 49 | } 50 | h2 { 51 | font-size: 24px; 52 | } 53 | h3 { 54 | font-size: 18px; 55 | } 56 | h4 { 57 | font-size: 16px; 58 | } 59 | h5 { 60 | font-size: 14px; 61 | } 62 | h6 { 63 | font-size: 13px; 64 | } 65 | hr { 66 | margin: 0 0 19px; 67 | border: 0; 68 | border-bottom: 1px solid #ccc; 69 | } 70 | blockquote { 71 | padding: 13px 13px 21px 15px; 72 | margin-bottom: 18px; 73 | font-family:georgia,serif; 74 | font-style: italic; 75 | } 76 | blockquote:before { 77 | content:"\201C"; 78 | font-size:40px; 79 | margin-left:-10px; 80 | font-family:georgia,serif; 81 | color:#eee; 82 | } 83 | blockquote p { 84 | font-size: 14px; 85 | font-weight: 300; 86 | line-height: 18px; 87 | margin-bottom: 0; 88 | font-style: italic; 89 | } 90 | code, pre { 91 | font-family: Monaco, Andale Mono, Courier New, monospace; 92 | } 93 | code { 94 | background-color: #fee9cc; 95 | color: rgba(0, 0, 0, 0.75); 96 | padding: 1px 3px; 97 | font-size: 12px; 98 | -webkit-border-radius: 3px; 99 | -moz-border-radius: 3px; 100 | border-radius: 3px; 101 | } 102 | pre { 103 | display: block; 104 | padding: 14px 1px; 105 | margin: 0 0 18px; 106 | line-height: 16px; 107 | font-size: 11px; 108 | white-space: pre-wrap; 109 | word-wrap: break-word; 110 | } 111 | pre code { 112 | background-color: #fff; 113 | color:#737373; 114 | font-size: 11px; 115 | padding: 0; 116 | } 117 | sup { 118 | font-size: 0.83em; 119 | vertical-align: super; 120 | line-height: 0; 121 | } 122 | * { 123 | -webkit-print-color-adjust: exact; 124 | } 125 | -------------------------------------------------------------------------------- /projects/demos/css/modal.css: -------------------------------------------------------------------------------- 1 | .dialog .dialog-overlay { 2 | opacity: 0.8; 3 | background:#000; 4 | position:fixed; 5 | top:0; 6 | bottom:0; 7 | left:0; 8 | right: 0; 9 | z-index:3000; 10 | } 11 | 12 | 13 | .dialog .dialog-box { 14 | position:absolute; 15 | z-index:5000; 16 | left: 50%; 17 | top: 10%; 18 | transform: translateX(-50%); 19 | font-size: 14px; 20 | text-align: left; 21 | padding-bottom: 10px; 22 | border-radius: 5px; 23 | background:#eee; 24 | width:90%; 25 | margin-bottom: 30px; 26 | } 27 | 28 | 29 | .dialog .btn-close{ 30 | position: fixed; 31 | top: 10px; 32 | right: 20px; 33 | color: #fff; 34 | z-index: 4000; 35 | font-size: 30px; 36 | cursor: pointer; 37 | } 38 | .dialog .dialog-content { 39 | padding:10px; 40 | margin:13px; 41 | color:#666; 42 | font-size:11px; 43 | transition: all 0.3s; 44 | } 45 | .dialog .dialog-footer{ 46 | text-align: center; 47 | } 48 | .dialog .loading{ 49 | text-align: center; 50 | } 51 | .dialog .loading img{ 52 | width: 40px; 53 | } 54 | -------------------------------------------------------------------------------- /projects/demos/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 我的项目 6 | 7 | 8 | 9 | 20 |
21 |
22 | 23 |
24 |
25 | 查看源码 26 | 使用说明 27 |
28 |
29 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /projects/demos/demo1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 我的 DEMO 6 | 7 | 8 | 9 | 10 | 21 |
22 |
23 | 24 |
25 |
26 | 查看源码 27 | 使用说明 28 |
29 |
30 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /projects/demos/demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 我的 DEMO 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 24 |
25 |
26 | 27 |
28 |
29 | 查看源码 30 | 使用说明 31 |
32 |
33 | 36 | 37 | 38 | 39 | 40 | 41 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /projects/demos/font/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1463386225'); /* IE9*/ 4 | src: url('iconfont.eot?t=1463386225#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1463386225') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1463386225') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1463386225#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -webkit-text-stroke-width: 0.2px; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | .icon-iconfontfisocialgithub:before { content: "\e6c5"; } 19 | .icon-close01:before { content: "\e637"; } 20 | .icon-shiyongzhinan:before { content: "\e60e"; } 21 | -------------------------------------------------------------------------------- /projects/demos/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/demos/font/iconfont.eot -------------------------------------------------------------------------------- /projects/demos/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/demos/font/iconfont.ttf -------------------------------------------------------------------------------- /projects/demos/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/demos/font/iconfont.woff -------------------------------------------------------------------------------- /projects/demos/js/modal.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | 用模块定义的方式封装创建了一个对象，把 new Modal 的过程封装到模块里，这样使用者可以直接通过 4 | Dialog.open()去调用即可 5 | */ 6 | 7 | 8 | 9 | var Dialog = (function(){ 10 | 11 | function Modal(){ 12 | this.createDialog(); 13 | this.bindEvent(); 14 | } 15 | 16 | Modal.prototype = { 17 | defaultOpts: { 18 | message: '', 19 | onClose: function(){} 20 | }, 21 | 22 | open: function(opts){ 23 | this.setOpts(opts); 24 | this.setDialog(); 25 | this.showDialog(); 26 | }, 27 | 28 | close: function(){ 29 | this.hideDialog(); 30 | }, 31 | 32 | setOpts: function(opts){ 33 | this.opts = {}; 34 | if(typeof opts === 'string'){ 35 | this.opts = $.extend({}, this.defaultOpts, {message: opts}); 36 | }else if (typeof opts === 'object'){ 37 | this.opts = $.extend({}, this.defaultOpts, opts); 38 | } 39 | }, 40 | 41 | bindEvent: function(){ 42 | var _this = this; 43 | _this.$dialog.find('.btn-close').on('click', function(e){ 44 | e.preventDefault(); 45 | _this.opts.onClose(); 46 | _this.hideDialog(); 47 | }); 48 | }, 49 | 50 | 51 | //创建Dialog 52 | createDialog: function(){ 53 | var tpl = ''; 60 | this.$dialog = $(tpl); 61 | $('body').append(this.$dialog); 62 | }, 63 | 64 | //根据参数设置 Dialog 样式和内容 65 | setDialog: function(){ 66 | var $dialog = this.$dialog; 67 | if(this.opts.message){ 68 | $dialog.find('.dialog-content').html(this.opts.message); 69 | } 70 | 71 | }, 72 | 73 | showDialog: function(){ 74 | this.$dialog.show(); 75 | }, 76 | 77 | hideDialog: function(){ 78 | this.$dialog.hide(); 79 | } 80 | }; 81 | return new Modal(); 82 | })(); 83 | -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/1.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/2.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/3.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/4.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/5.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a1.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a10.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a11.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a12.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a2.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a3.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a4.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a5.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a6.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a7.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a8.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/a9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/a9.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/imgs/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/doubanmovie-requirejs/imgs/blank.jpg -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/src/js/app.js: -------------------------------------------------------------------------------- 1 | 2 | define(['top250', 'usbox', 'search', 'jquery'], function(Top250Page, UsBoxPage, SearchPage){ 3 | var App = { 4 | init: function(){ 5 | this.bind() 6 | Top250Page.init() 7 | UsBoxPage.init() 8 | SearchPage.init() 9 | }, 10 | bind: function(){ 11 | $('footer>div').click(function(){ 12 | $(this).addClass('active') 13 | .siblings() 14 | .removeClass('active') 15 | $currentPage = $('main>section') 16 | .hide().eq($(this).index()) 17 | .fadeIn() 18 | }) 19 | window.ontouchmove = function(e){ 20 | e.preventDefault() 21 | } 22 | $('section').each(function(){ 23 | this.ontouchmove = function(e){ 24 | e.stopPropagation() 25 | } 26 | }) 27 | } 28 | } 29 | return App 30 | 31 | }) 32 | 33 | -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/src/js/helper.js: -------------------------------------------------------------------------------- 1 | 2 | define(['jquery'], function($){ 3 | var Helper = { 4 | isToEnd: function($viewport, $content){ 5 | return $viewport.height() + $viewport.scrollTop() +10 > $content.height() 6 | }, 7 | 8 | createNode: function(movie){ 9 | var template = `
10 | 11 |
12 | 13 |
14 |
15 |

16 |
分 / 收藏
17 |
/
18 |
导演:
19 |
主演:
20 |
21 | 22 |
` 23 | var $node = $(template) 24 | $node.find('a').attr('href', movie.alt) 25 | $node.find('.cover img') 26 | .attr('src', movie.images.medium ) 27 | $node.find('.detail h2').text(movie.title) 28 | $node.find('.score').text(movie.rating.average ) 29 | $node.find('.collect').text(movie.collect_count ) 30 | $node.find('.year').text(movie.year) 31 | $node.find('.type').text(movie.genres.join(' / ')) 32 | $node.find('.director').text(function(){ 33 | var directorsArr = [] 34 | movie.directors.forEach(function(item){ 35 | directorsArr.push(item.name) 36 | }) 37 | return directorsArr.join('、') 38 | }) 39 | $node.find('.actor').text(function(){ 40 | var actorArr = [] 41 | movie.casts.forEach(function(item){ 42 | actorArr.push(item.name) 43 | }) 44 | return actorArr.join('、') 45 | }) 46 | return $node 47 | } 48 | } 49 | console.log('helper') 50 | return Helper 51 | 52 | }) -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/src/js/main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | baseUrl: "src/js" 3 | }) 4 | 5 | // 加载入口模块 6 | require(['app'], function(app){ 7 | app.init() 8 | }); -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/src/js/search.js: -------------------------------------------------------------------------------- 1 | define(['jquery'], function($){ 2 | 3 | var SearchPage = { 4 | init: function(){ 5 | this.$container = $('#search') 6 | this.$input = this.$container.find('input') 7 | this.$btn = this.$container.find('.button') 8 | this.$content = this.$container.find('.search-result') 9 | this.bind() 10 | }, 11 | bind: function(){ 12 | var _this = this 13 | this.$btn.click(function(){ 14 | _this.getData(_this.$input.val(), function(data){ 15 | console.log(data) 16 | _this.render(data) 17 | }) 18 | }) 19 | }, 20 | getData: function(keyword, callback){ 21 | var _this = this 22 | _this.$container.find('.loading').show() 23 | $.ajax({ 24 | url: 'http://api.douban.com/v2/movie/search', 25 | data: { 26 | q: keyword 27 | }, 28 | dataType: 'jsonp' 29 | }).done(function(ret){ 30 | callback&&callback(ret) 31 | }).fail(function(){ 32 | console.log('数据异常') 33 | }).always(function(){ 34 | _this.$container.find('.loading').hide() 35 | }) 36 | }, 37 | render: function(data){ 38 | var _this = this 39 | data.subjects.forEach(function(item){ 40 | _this.$content.append(Helper.createNode(item)) 41 | }) 42 | } 43 | } 44 | return SearchPage 45 | }) 46 | -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/src/js/top250.js: -------------------------------------------------------------------------------- 1 | define(function(require){ 2 | var $ = require('jquery') 3 | console.log(1) 4 | var Helper = require('helper') 5 | var Top250Page = { 6 | 7 | init: function(){ 8 | this.$container = $('#top250') 9 | this.$content = this.$container.find('.container') 10 | this.index = 0 11 | this.isFinish = false 12 | this.isLoading = false 13 | 14 | this.bind() 15 | this.start() 16 | }, 17 | bind: function(){ 18 | var _this = this 19 | this.$container.scroll(function(){ 20 | 21 | if(!_this.isFinish && Helper.isToEnd(_this.$container, _this.$content)){ 22 | _this.start() 23 | } 24 | }) 25 | }, 26 | start: function(){ 27 | var _this = this 28 | this.getData(function(data){ 29 | _this.render(data) 30 | }) 31 | }, 32 | 33 | getData: function(callback){ 34 | var _this = this 35 | if(_this.isLoading) return; 36 | _this.isLoading = true 37 | _this.$container.find('.loading').show() 38 | $.ajax({ 39 | url: 'http://api.douban.com/v2/movie/top250', 40 | data: { 41 | start: _this.index||0 42 | }, 43 | dataType: 'jsonp' 44 | }).done(function(ret){ 45 | console.log(ret) 46 | _this.index += 20 47 | if(_this.index >= ret.total){ 48 | _this.isFinish = true 49 | } 50 | callback&&callback(ret) 51 | }).fail(function(){ 52 | console.log('数据异常') 53 | }).always(function(){ 54 | _this.isLoading = false 55 | _this.$container.find('.loading').hide() 56 | }) 57 | }, 58 | render: function(data){ 59 | var _this = this 60 | data.subjects.forEach(function(movie){ 61 | _this.$content.append(Helper.createNode(movie)) 62 | }) 63 | } 64 | } 65 | return Top250Page 66 | }) -------------------------------------------------------------------------------- /projects/doubanmovie-requirejs/src/js/usbox.js: -------------------------------------------------------------------------------- 1 | define(['jquery', 'helper'], function($, Helper){ 2 | var UsBoxPage = { 3 | init: function(){ 4 | this.$container = $('#beimei') 5 | this.$content = this.$container.find('.container') 6 | this.start() 7 | }, 8 | 9 | start: function(){ 10 | var _this = this 11 | this.getData(function(data){ 12 | _this.render(data) 13 | }) 14 | }, 15 | 16 | getData: function(callback){ 17 | var _this = this 18 | _this.$container.find('.loading').show() 19 | $.ajax({ 20 | url: 'http://api.douban.com/v2/movie/us_box', 21 | dataType: 'jsonp' 22 | }).done(function(ret){ 23 | callback&&callback(ret) 24 | }).fail(function(){ 25 | console.log('数据异常') 26 | }).always(function(){ 27 | _this.$container.find('.loading').hide() 28 | }) 29 | }, 30 | render: function(data){ 31 | var _this = this 32 | data.subjects.forEach(function(item){ 33 | _this.$content.append(Helper.createNode(item.subject)) 34 | }) 35 | } 36 | } 37 | return UsBoxPage 38 | }) -------------------------------------------------------------------------------- /projects/image-bed/css/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --theme-color: #00aa3a; 3 | --background-color: #333; 4 | --body-padding: 32px; 5 | } 6 | 7 | a { 8 | text-decoration: none; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | font: 16px/1.67 Arial, sans-serif; 14 | color: #222; 15 | } 16 | 17 | 18 | header { 19 | display: flex; 20 | align-items: center; 21 | padding: 10px var(--body-padding); 22 | background: var(--background-color); 23 | } 24 | 25 | header .logo { 26 | display: flex; 27 | align-items: center; 28 | } 29 | 30 | header .logo > img { 31 | height: 22px; 32 | } 33 | 34 | header nav { 35 | margin-left: 30px; 36 | } 37 | 38 | header nav > a { 39 | color: #fff; 40 | text-transform: uppercase; 41 | text-decoration: none; 42 | margin-left: 30px; 43 | } 44 | 45 | header .setting { 46 | margin-left: auto; 47 | color: #fff; 48 | } 49 | 50 | 51 | main { 52 | padding: 0 var(--body-padding); 53 | } 54 | 55 | main .ct-upload { 56 | display: flex; 57 | flex-direction: column; 58 | align-items: center; 59 | width: 700px; 60 | margin: 50px auto 0 auto; 61 | padding: 20px; 62 | border: 1px dashed #666; 63 | border-radius: 4px; 64 | color: #666; 65 | line-height: 1.2; 66 | } 67 | 68 | main .ct-upload .icon-cloud { 69 | font-size: 80px; 70 | } 71 | 72 | main .ct-upload p { 73 | margin: 10px 0 0 0; 74 | font-size: 26px; 75 | font-weight: bold; 76 | } 77 | 78 | main .ct-upload .text-lesser { 79 | margin: 10px; 80 | font-size: 16px; 81 | font-weight: normal; 82 | } 83 | 84 | main .ct-loading { 85 | display: flex; 86 | flex-direction: column; 87 | margin-top: 50px; 88 | } 89 | 90 | main .ct-loading .list-all { 91 | margin-left: auto; 92 | color: var(--theme-color); 93 | } 94 | -------------------------------------------------------------------------------- /projects/image-bed/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/image-bed/fonts/iconfont.eot -------------------------------------------------------------------------------- /projects/image-bed/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/image-bed/fonts/iconfont.ttf -------------------------------------------------------------------------------- /projects/image-bed/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/image-bed/fonts/iconfont.woff -------------------------------------------------------------------------------- /projects/image-bed/fonts/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/image-bed/fonts/iconfont.woff2 -------------------------------------------------------------------------------- /projects/image-bed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 饥人谷图床 5 | 6 | 7 | 8 | 9 |
10 | 11 | 16 | Setting 17 |
18 |
19 |
20 | 21 |

Drop .png or .jpg files here!

22 |

You can copy images and paste here!

23 |
24 |
25 | View All Images 26 |
    27 |
  • 28 | logo.png 29 | 30 | http://static.jirengu.com/a.png 31 | copy 32 |
    • 33 |
34 |
35 |
36 |

Automate your image uploading workflow

37 |
    38 |
  • 39 | 40 |

    Qiniu Cloud Support

    41 |

    Send images to your Qiniu cloud server. 100% control of your own data.

    42 |
    • 43 |
  • 44 | 45 |

    Easy to Usage

    46 |

    Support for uploading local images by clicking, dragging, copying and pasting - this tool makes things simple like never before.

    47 |
    • 48 |
  • 49 | 50 |

    No Account Required

    51 |

    You don't need to register and log in, historical data is stored in the browser's localstorage. You don't have to worry about leaking any personal information.

    52 |
    • 53 |
54 |
55 |
56 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /projects/img-bed2/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/img-bed2/fonts/iconfont.eot -------------------------------------------------------------------------------- /projects/img-bed2/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/img-bed2/fonts/iconfont.ttf -------------------------------------------------------------------------------- /projects/img-bed2/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/img-bed2/fonts/iconfont.woff -------------------------------------------------------------------------------- /projects/img-bed2/fonts/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/img-bed2/fonts/iconfont.woff2 -------------------------------------------------------------------------------- /projects/img-bed2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 饥人谷图床 8 | 9 | 10 | 11 | 12 |
13 | 16 | 21 | Setting 22 |
23 |
24 |
25 | 26 |

Drop your .png or .jpg files here!

27 |

Your can copy images and paste here!

28 |
29 |
30 | View All Images 31 |
    32 |
  • 33 | logo.png 34 | 35 | http://static.jirengu.com/a.png 36 | copy 37 |
    • 38 |
  • 39 | logo.png 40 | 41 | http://static.jirengu.com/a.png 42 | copy 43 |
    • 44 |
45 |
46 |
47 |

Automate your image uploading workflow

48 |
    49 |
  • 50 | 51 |

    Qiniu Support

    52 |

    Send images to your Qiniu cloud server. 100% control of your own data.

    53 |
    • 54 |
  • 55 | 56 |

    Simple Usage

    57 |

    Support for uploading local images by clicking, dragging, copying and pasting - this tool makes things simple like never before.

    58 |
    • 59 |
  • 60 | 61 |

    No account required

    62 |

    You don't need to register and log in, historical data is stored in the browser's localstorage. You don't have to worry about leaking any personal information.

    63 |
    • 64 |
65 |
66 |
67 | 70 | 71 | -------------------------------------------------------------------------------- /projects/jianshu/css/common.css: -------------------------------------------------------------------------------- 1 | 2 | .layout { 3 | width: 945px; 4 | margin: 0 auto; 5 | } 6 | .clearfix:after { 7 | content: ''; 8 | display: block; 9 | clear: both; 10 | } 11 | 12 | * { 13 | margin: 0; 14 | padding: 0; 15 | box-sizing: border-box; 16 | } 17 | 18 | body { 19 | font-size: 13px/1.5 Arial 20 | } -------------------------------------------------------------------------------- /projects/jianshu/css/index.css: -------------------------------------------------------------------------------- 1 | 2 | header { 3 | padding-bottom: 58px; 4 | } 5 | header nav { 6 | position: fixed; 7 | z-index: 1; 8 | padding: 0 20px; 9 | height: 58px; 10 | width: 100%; 11 | border-bottom: 1px solid #f0f0f0; 12 | background-color: #fff; 13 | } 14 | header .logo { 15 | float: left; 16 | margin-top: 18px; 17 | margin-right: 20px; 18 | } 19 | header .logo img{ 20 | width: 55px; 21 | height: 26px; 22 | } 23 | header .search { 24 | float: left; 25 | margin-top: 12px; 26 | } 27 | 28 | header .login { 29 | float: right; 30 | margin-left: 20px; 31 | margin-top: 18px; 32 | color: #969696; 33 | text-decoration: none; 34 | } 35 | 36 | header .register { 37 | float: right; 38 | margin-left: 20px; 39 | margin-top: 12px; 40 | } 41 | header .write { 42 | float: right; 43 | margin-left: 20px; 44 | margin-top: 12px; 45 | } 46 | 47 | main:after { 48 | content: ''; 49 | display: block; 50 | clear: both; 51 | } 52 | main .layout >.aside { 53 | width: 200px; 54 | float: right; 55 | } 56 | main .layout >.content { 57 | margin-right: 220px; 58 | } 59 | 60 | main .carousel { 61 | margin: 0 auto; 62 | } 63 | 64 | main .theme-labels { 65 | margin-top: 30px; 66 | } 67 | 68 | main .post-lists { 69 | margin-top: 30px; 70 | } 71 | 72 | main .recommend { 73 | margin-top: 30px; 74 | } 75 | main .recommend .button { 76 | margin-top: 30px; 77 | } 78 | 79 | 80 | -------------------------------------------------------------------------------- /projects/jianshu/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/jianshu/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /projects/jianshu/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/jianshu/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /projects/jianshu/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/jianshu/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /projects/jianshu/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/jianshu/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /projects/jianshu/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/jianshu/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /projects/jianshu/slides.md: -------------------------------------------------------------------------------- 1 | # 静态页面实战 2 | 3 | ## 静态页面简单吗 4 | 5 | 1. 完成效果，不明白原理 6 | 2. 完成效果，明白原理 7 | 3. 完成效果，统一性、复用性、扩展性 8 | 9 | ## 每一个网站都必须有自己的 UI 库 10 | 11 | ## 如何写页面 12 | 1. 抽离出通用组件 13 | 2. 实现组件样式 14 | 3. 拼装页面 -------------------------------------------------------------------------------- /projects/loadmore/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 加载更多 6 | 7 | 8 |
    9 |
  • 内容1
    • 10 |
  • 内容2
    • 11 |
  • 内容3
    • 12 |
  • 内容4
    • 13 |
14 |
15 | 16 |
17 | 18 | 62 | 63 | -------------------------------------------------------------------------------- /projects/loadmore/server.js: -------------------------------------------------------------------------------- 1 | let http = require('http') 2 | let fs = require('fs') 3 | let url = require('url') 4 | 5 | http.createServer((req,res)=>{ 6 | let pathObj = url.parse(req.url, true) 7 | console.log(pathObj) 8 | 9 | if(pathObj.pathname === '/index.html') { 10 | let html = fs.readFileSync('./index.html', 'utf-8') 11 | res.write(html) 12 | res.end() 13 | }else if(pathObj.pathname === '/loadMore') { 14 | let index = pathObj.query.index 15 | let retArray = [] 16 | for(let i =0; i<5; i++) { 17 | retArray.push('内容'+ (parseInt(index)+i) ) 18 | } 19 | res.setHeader('Content-Type', 'application/json; chasert=utf-8') 20 | setTimeout(function(){ 21 | res.write(JSON.stringify(retArray)) 22 | res.end() 23 | }, 2000) 24 | 25 | } 26 | 27 | }).listen(8080) -------------------------------------------------------------------------------- /projects/meituan/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | a { 8 | text-decoration: none; 9 | } 10 | 11 | body { 12 | font: 3.2vw/1.5 Arial; 13 | background: #f0efed; 14 | } 15 | 16 | header { 17 | background: #06c1ae; 18 | border-bottom: 1px solid #21897d; 19 | height: 13.6vw; 20 | color: #fff; 21 | font-size: 4.27vw; 22 | padding: 0 2.67vw; 23 | display: flex; 24 | align-items: center; 25 | justify-content: space-between; 26 | } 27 | 28 | 29 | header .search .icon-search { 30 | position: absolute; 31 | color: red; 32 | left: 6px; 33 | font-size: 20px; 34 | } 35 | header .search input { 36 | height: 9vw; 37 | padding-left: 8vw; 38 | border-radius: 1vw; 39 | border: none; 40 | } 41 | 42 | header .user { 43 | /* margin-left: auto; */ 44 | } -------------------------------------------------------------------------------- /projects/meituan/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 美团 7 | 8 | 9 | 10 | 11 | 12 |
13 |
杭州
14 |
15 | 16 | 17 |
18 |
19 | 20 | 我的 21 |
22 |
23 | 30 |
31 | 美食 32 | 猫眼电影 33 | 酒店 34 | 娱乐 35 | 外卖 36 | KTV 37 | 周边游 38 | 丽人 39 | 小吃 40 | 今日新单 41 |
42 |
43 | 44 |

我们约吧

45 | 恋人家人好朋友 46 | 47 | 48 | 49 |

聚餐宴请

50 | 朋友家人常聚餐 51 | 52 | 53 | 54 |

低价超值

55 | 十元优惠生活 56 | 57 | 58 | 59 |
60 |
61 |

猜你喜欢

62 |
63 | 64 | 65 |
66 |

大浪淘沙

67 |

世界杯家庭套餐，建议6-8人使用

68 |
69 | 60元 70 | 门市价:80元 71 | 已售1 72 |
73 |
74 | 75 |
76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /projects/music/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

ddddd

14 | 15 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /projects/music/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /projects/stickynotes/css/origin.css: -------------------------------------------------------------------------------- 1 | html,body{ 2 | margin: 0; 3 | height: 100%; 4 | } 5 | body{ 6 | font: 14px/1.4 'Microsoft Yahei'; 7 | } 8 | #header { 9 | width: 30px; 10 | height: 100%; 11 | float: left; 12 | background: #343B46; 13 | } 14 | 15 | .note{ 16 | float: right; 17 | position: relative; 18 | color: #333; 19 | width: 160px; 20 | margin: 10px; 21 | } 22 | .note-head{ 23 | height: 20px; 24 | background-color: #ea9b35; 25 | cursor: move; 26 | } 27 | .note-ct{ 28 | padding: 10px; 29 | background-color: #efb04e; 30 | outline: none; 31 | } 32 | /* 33 | .note:before{ 34 | position: absolute; 35 | left: 50%; 36 | top: -11px; 37 | margin-left: -32px; 38 | content: ' '; 39 | display: block; 40 | width: 64px; 41 | height: 18px; 42 | background: #35bba3; 43 | } 44 | .note:after { 45 | position: absolute; 46 | left: 50%; 47 | margin-left: 32px; 48 | top: -11px; 49 | z-index: -1; 50 | content: ''; 51 | display: block; 52 | width: 0; 53 | height: 0; 54 | border-left: 5px solid #299683; 55 | border-top: 18px solid transparent; 56 | } 57 | */ 58 | .draggable{ 59 | opacity: 0.8; 60 | cursor:move; 61 | } 62 | .delete { 63 | position: absolute; 64 | top: 4px; 65 | right: 4px; 66 | font-size: 12px; 67 | color: #fff; 68 | cursor: pointer; 69 | opacity: 0; 70 | transition: opacity .3s; 71 | } 72 | .note-head:hover .delete{ 73 | opacity: 1; 74 | } 75 | 76 | 77 | 78 | .icon{ 79 | position: absolute; 80 | left: 8px; 81 | display: block; 82 | } 83 | .icon span{ 84 | font-size: 16px; 85 | color: #fff; 86 | } 87 | .setting{ 88 | top: 10px; 89 | } 90 | .add-note{ 91 | bottom: 10px; 92 | } 93 | 94 | 95 | 96 | @-webkit-keyframes move-twink-back { 97 | from {background-position:0 0;} 98 | to {background-position:-10000px 5000px;} 99 | } 100 | 101 | 102 | 103 | @keyframes move-twink-back { 104 | from {background-position:0 0;} 105 | to {background-position:-10000px 5000px;} 106 | } 107 | 108 | 109 | .stars, .twinkling{ 110 | position:absolute; 111 | top:0; 112 | left:0; 113 | right:0; 114 | bottom:0; 115 | width:100%; 116 | height:100%; 117 | display:block; 118 | } 119 | 120 | .stars { 121 | background:#000 url(http://7xpvnv.com2.z0.glb.qiniucdn.com/ba25c630-1c91-4ac1-a3de-65555d78c147.png) repeat top center; 122 | z-index:-2; 123 | } 124 | 125 | .twinkling{ 126 | background:transparent url(http://7xpvnv.com2.z0.glb.qiniucdn.com/493b97e6-c499-4b41-a26b-8942873615b0.png) repeat top center; 127 | z-index:-1; 128 | -webkit-animation:move-twink-back 200s linear infinite; 129 | animation:move-twink-back 200s linear infinite; 130 | } 131 | -------------------------------------------------------------------------------- /projects/stickynotes/css/style.css: -------------------------------------------------------------------------------- 1 | #header { 2 | color: #333333; 3 | border-left: 1px; 4 | border-right: 2px; 5 | } 6 | #header h1 { 7 | color: #842210; 8 | transition: 0.3s; 9 | border-radius: 5px; 10 | } 11 | #header .clearfix:after { 12 | content: ''; 13 | display: block; 14 | clear: both; 15 | } 16 | #footer { 17 | color: #114411; 18 | border-color: #7d2717; 19 | opacity: 0.5; 20 | } 21 | -------------------------------------------------------------------------------- /projects/stickynotes/css/style.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/stickynotes/css/style.styl -------------------------------------------------------------------------------- /projects/stickynotes/gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview [description] 3 | * @authors hunger (hunger@jirengu.com) 4 | * @date 2015-10-22 5 | */ 6 | 7 | var gulp = require('gulp'); 8 | 9 | // 引入组件 10 | var minifycss = require('gulp-minify-css'), // CSS压缩 11 | autoprefixer = require('gulp-autoprefixer'), 12 | less = require('gulp-less'); 13 | 14 | console.log(less); 15 | 16 | 17 | gulp.task('less', function(){ 18 | gulp.src('less/*.less') 19 | .pipe(less()) 20 | .pipe(autoprefixer({browsers: ['IE 6']})) 21 | //.pipe(minifycss()) 22 | .pipe(gulp.dest('css/')); 23 | 24 | }) 25 | 26 | gulp.task('css', function(argument) { 27 | 28 | gulp.src('css/origin.css') 29 | .pipe(autoprefixer({ 30 | browsers: ['last 2 versions'], 31 | cascade: true 32 | })) 33 | // .pipe(minifycss()) 34 | .pipe(gulp.dest('css/')); 35 | }); 36 | -------------------------------------------------------------------------------- /projects/stickynotes/less/style.less: -------------------------------------------------------------------------------- 1 | 2 | @the-border: 1px; 3 | @base-color: #111; 4 | @red: #842210; 5 | 6 | #header { 7 | color: @base-color * 3; 8 | border-left: @the-border; 9 | border-right: @the-border * 2; 10 | 11 | h1{ 12 | color: @red; 13 | transition: 0.3s; 14 | border-radius: 5px; 15 | } 16 | 17 | .clearfix{ 18 | &:after{ 19 | content: ''; 20 | display: block; 21 | clear: both; 22 | } 23 | } 24 | } 25 | #footer { 26 | color: @base-color + #003300; 27 | border-color: desaturate(@red, 10%); 28 | opacity: 0.5; 29 | } 30 | 31 | -------------------------------------------------------------------------------- /projects/stickynotes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stickynotes", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "gulp": "^3.9.1", 13 | "gulp-autoprefixer": "^3.1.0", 14 | "gulp-minify-css": "^1.2.4" 15 | }, 16 | "dependencies": { 17 | "sqlite3": "^3.1.8" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /projects/task15/css/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/task15/css/index.css -------------------------------------------------------------------------------- /projects/task15/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/task15/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /projects/task15/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/task15/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /projects/task15/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/task15/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /projects/task15/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/task15/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /projects/task15/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/task15/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /projects/task15/imgs/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jirengu-inc/js-works/ac7d5675faf74ba01f13e38efe5e0d3b9306997b/projects/task15/imgs/bg.jpg -------------------------------------------------------------------------------- /projects/weather/css/common.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | ul { 9 | list-style: none; 10 | } 11 | 12 | .clearfix::after { 13 | content: ''; 14 | display: block; 15 | clear: both; 16 | } -------------------------------------------------------------------------------- /projects/weather/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 天气预报 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
杭州
16 |
20:52
17 |
18 |
19 |
    20 |
  • 21 | 建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。 22 |
    • 23 |
  • 建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等1。
    • 24 |
  • 建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等2。
    • 25 |
  • 建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等3。
    • 26 |
  • 建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等4。
    • 27 |
28 |
    29 |
    • 30 |
    • 31 |
    • 32 |
    • 33 |
    • 34 |
35 |
36 |
37 |
38 |
39 |
40 | 82 ℃ 41 | 3月25日星期日 42 |
43 |
44 | 45 | PM25/30 良 46 |
47 |
48 |
49 | 周一 50 | 51 | 18~36 52 |
53 |
54 | 周一 55 | 56 | 18~36 57 |
58 |
59 | 周一 60 | 61 | 18~36 62 |
63 |
64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /projects/weather/js/index.js: -------------------------------------------------------------------------------- 1 | 2 | let app = { 3 | 4 | init() { 5 | var _this = this 6 | this.getData(function(data){ 7 | _this.renderData(data) 8 | _this.bindEvent() 9 | }) 10 | 11 | }, 12 | 13 | bindEvent() { 14 | $$('#app .tabs>li').forEach(function(tab, idx){ 15 | tab.onclick = function() { 16 | $$('#app .tabs>li').forEach(node=>{ 17 | node.classList.remove('active') 18 | }) 19 | this.classList.add('active') 20 | let index = [].indexOf.call($$('#app .tabs>li'), this) 21 | console.log(idx) 22 | console.log(index) 23 | $$('#app .panels>li').forEach(panel=>panel.classList.remove('active')) 24 | $$('#app .panels>li')[index].classList.add('active') 25 | } 26 | }) 27 | }, 28 | 29 | renderData(data) { 30 | console.log(data) 31 | $('#app .location .city').innerText = data.results[0].currentCity 32 | var last_update = new Date() 33 | $('#app .location .time').innerText = last_update.getHours() + ':' + fixTime(last_update.getMinutes()) 34 | data.results[0].index.forEach(function(item, index){ 35 | console.log(item, index) 36 | $$('#app .tabs .title')[index].innerText = item.title 37 | $$('#app .panels>li')[index].innerText = item.des 38 | }) 39 | let temperature = data.results[0].weather_data[0].date.match(/(-?\d+)℃/)[1] 40 | console.log(temperature) 41 | $('#app .temperature .number').innerText = temperature 42 | 43 | let d = new Date(data.date) 44 | $('#app .date').innerText = getChsDate(d) 45 | $('#app .weather-pic img').src = data.results[0].weather_data[0].dayPictureUrl 46 | $('#app .detail .more').innerText = data.results[0].weather_data[0].weather + '/' + data.results[0].pm25 47 | 48 | for(let index = 0; index < data.results[0].weather_data.length -1; index++) { 49 | $$('#app .future .week')[index].innerText = data.results[0].weather_data[index+1].date 50 | $$('#app .future .weather-pic img')[index].src = data.results[0].weather_data[index+1].dayPictureUrl 51 | $$('#app .future .temperature')[index].innerText = data.results[0].weather_data[index+1].temperature 52 | } 53 | }, 54 | 55 | getData(callback) { 56 | let xhr = new XMLHttpRequest() 57 | xhr.open('GET', 'http://api.jirengu.com/getWeather.php', true) 58 | xhr.send() 59 | xhr.onload = function() { 60 | callback(JSON.parse(xhr.responseText)) 61 | } 62 | } 63 | } 64 | 65 | app.init() 66 | 67 | function $(selector) { 68 | return document.querySelector(selector) 69 | } 70 | function $$(selector) { 71 | return document.querySelectorAll(selector) 72 | } 73 | function fixTime(t) { 74 | if(t.toString().length == 1){ 75 | return '0' + t 76 | } 77 | return t 78 | } 79 | function getChsDate(dateObj) { 80 | var month = dateObj.getMonth() + 1 81 | var date = dateObj.getDate() 82 | var dayDict = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'] 83 | var week = dayDict[dateObj.getDay()] 84 | return `${month}月${date}日${week}` 85 | } 86 | 87 | -------------------------------------------------------------------------------- /promise/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /promise/index2.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /promise/promise.js: -------------------------------------------------------------------------------- 1 | class Promise { 2 | constructor (){ 3 | this.callbacks = [] 4 | this.oncatch = null 5 | } 6 | 7 | reject(result){ 8 | this.complete('reject', result) 9 | } 10 | 11 | resolve(result){ 12 | this.complete('resolve', result) 13 | } 14 | 15 | complete(type, result){ 16 | if(type==='reject' && this.oncatch){ 17 | this.callbacks = [] 18 | this.oncatch(result) 19 | }else if(this.callbacks[0]) { 20 | var handlerObj = this.callbacks.shift() 21 | if(handlerObj[type]) handlerObj[type](result) 22 | } 23 | } 24 | 25 | then(onsuccess, onfail){ 26 | this.callbacks.push({ 27 | resolve: onsuccess, 28 | reject: onfail 29 | }) 30 | return this 31 | } 32 | 33 | catch(onfail){ 34 | this.oncatch = onfail 35 | return this 36 | } 37 | } 38 | 39 | module.exports.Promise = Promise 40 | -------------------------------------------------------------------------------- /promise/test/a.txt: -------------------------------------------------------------------------------- 1 | aaa -------------------------------------------------------------------------------- /promise/test/b.txt: -------------------------------------------------------------------------------- 1 | bbb -------------------------------------------------------------------------------- /promise/test/c.txt: -------------------------------------------------------------------------------- 1 | ccc 2 | -------------------------------------------------------------------------------- /promise/test/index.js: -------------------------------------------------------------------------------- 1 | let fs = require('fs') 2 | let Promise = require('../promise').Promise 3 | 4 | let p = new Promise() 5 | 6 | var str = '' 7 | readFile('a.txt').then(function(line){ 8 | str += line 9 | readFile('b.txt') 10 | }).then(function(line){ 11 | str += line 12 | readFile('c.txt') 13 | }).then(function(line){ 14 | str += line 15 | p.resolve(str) 16 | }).then(function(result){ 17 | console.log(result) 18 | }).catch(function(){ 19 | console.log('error') 20 | }) 21 | 22 | function readFile(path){ 23 | fs.readFile(path, 'utf-8', function(err, str){ 24 | if(err){ 25 | p.reject(path) 26 | }else{ 27 | p.resolve(str) 28 | } 29 | }) 30 | return p 31 | } -------------------------------------------------------------------------------- /stickup/stickup-jquery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | stickup 7 | 8 | 9 | 46 | 47 | 48 | 49 | 50 | 51 |
52 |
aside
53 |
main
54 |
55 | 56 | 57 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /stickup/stickup-plugin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | stickup 7 | 8 | 9 | 46 | 47 | 48 | 49 | 50 | 51 |
52 |
aside
53 |
main
54 |
55 | 56 | 57 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /tab/tab-basic-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | tab 切换 7 | 51 | 52 | 53 |
54 |
    55 |
  • tab1
    • 56 |
  • tab2
    • 57 |
  • tab3
    • 58 |
59 |
内容1
60 |
内容2
61 |
内容3
62 |
63 |
64 |
    65 |
  • tab1
    • 66 |
  • tab2
    • 67 |
  • tab3
    • 68 |
69 |
内容1
70 |
内容2
71 |
内容3
72 |
73 | 74 | 75 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /tab/tab-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | tab 切换 7 | 51 | 52 | 53 |
54 |
    55 |
  • tab1
    • 56 |
  • tab2
    • 57 |
  • tab3
    • 58 |
59 |
内容1
60 |
内容2
61 |
内容3
62 |
63 | 64 |
65 |
    66 |
  • tab1
    • 67 |
  • tab2
    • 68 |
  • tab3
    • 69 |
70 |
内容1
71 |
内容2
72 |
内容3
73 |
74 | 75 | 76 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /tab/tab-jquery-plugin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | tab 切换 jquery 插件 7 | 52 | 53 | 54 |
55 |
    56 |
  • tab1
    • 57 |
  • tab2
    • 58 |
  • tab3
    • 59 |
60 |
内容1
61 |
内容2
62 |
内容3
63 |
64 |
65 |
    66 |
  • tab1
    • 67 |
  • tab2
    • 68 |
  • tab3
    • 69 |
70 |
内容1
71 |
内容2
72 |
内容3
73 |
74 | 76 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /tab/tab-jquery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | tab 切换jquery 实现 7 | 52 | 53 | 54 |
55 |
    56 |
  • tab1
    • 57 |
  • tab2
    • 58 |
  • tab3
    • 59 |
60 |
内容1
61 |
内容2
62 |
内容3
63 |
64 |
65 |
    66 |
  • tab1
    • 67 |
  • tab2
    • 68 |
  • tab3
    • 69 |
70 |
内容1
71 |
内容2
72 |
内容3
73 |
74 | 76 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /timeline/css/index.css: -------------------------------------------------------------------------------- 1 | #timeline { 2 | width: 800px; 3 | height: 100px; 4 | margin: 100px auto 0; 5 | position: relative; 6 | } 7 | 8 | #prev, #next { 9 | position: absolute; 10 | width: 40px; 11 | height: 40px; 12 | border: 1px solid #bacfba; 13 | border-radius: 50%; 14 | text-align: center; 15 | line-height: 40px; 16 | top: 30px; 17 | color: #cdc4c4; 18 | cursor: pointer; 19 | } 20 | 21 | #prev { 22 | left: 0; 23 | } 24 | 25 | #next { 26 | right: 0; 27 | } 28 | 29 | #events-wrapper { 30 | position: relative; 31 | margin: 0 50px; 32 | height: 100%; 33 | width: 700px; 34 | overflow: hidden; 35 | } 36 | 37 | #events { 38 | position: absolute; 39 | height: 1px; 40 | background-color: #d0c8d0; 41 | top: 50px; 42 | transition: transform 0.5s; 43 | transform: translateX(0); 44 | } 45 | 46 | #events .date { 47 | position: absolute; 48 | bottom: 10px; 49 | } 50 | 51 | #events .date:after { 52 | content: ''; 53 | position: absolute; 54 | height: 10px; 55 | width: 10px; 56 | border: 1px solid #c8b6b6; 57 | border-radius: 50%; 58 | top: 22px; 59 | left: 15px; 60 | background-color: #fff; 61 | z-index: 2; 62 | } 63 | 64 | #events .date.chosen:after{ 65 | background-color: #afdbaf; 66 | } 67 | 68 | #events .date.previous:after{ 69 | border-color: #53cc53; 70 | } 71 | 72 | #filling-line { 73 | position: absolute; 74 | height: 1px; 75 | top: 0; 76 | background-color: #24cd2b; 77 | transform-origin: left center; 78 | transition: transform 0.5s; 79 | transform: scaleX(0); 80 | } 81 | 82 | 83 | ol li { 84 | list-style: none; 85 | } -------------------------------------------------------------------------------- /timeline/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | demo 8 | 9 | 10 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /timeline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Timeline 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 |
18 |
    19 |
  1. 16 Jan
    2. 20 |
  2. 28 Feb
    3. 21 |
  3. 20 Mar
    4. 22 |
  4. 20 May
    5. 23 |
  5. 09 Jul
    6. 24 |
  6. 30 Aug
    7. 25 |
  7. 15 Sep
    8. 26 |
  8. 01 Nov
    9. 27 |
  9. 10 Dec
    10. 28 |
  10. 29 Jan
    11. 29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /timeline/note.md: -------------------------------------------------------------------------------- 1 | [transform - 变形](https://developer.mozilla.org/en-US/docs/Web/CSS/transform?v=a) 2 | [transition - 过渡](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) 3 | [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) 4 | [translateX](https://www.zhihu.com/question/30215867) 5 | 6 |
  • 16 Jan
    • 7 |
  • 28 Feb
    • 8 |
  • 20 Mar
    • 9 |
  • 20 May
    • 10 |
  • 09 Jul
    • 11 |
  • 30 Aug
    • 12 |
  • 15 Sep
    • 13 |
  • 01 Nov
    • 14 |
  • 10 Dec
    • 15 |
  • 29 Jan
    • -------------------------------------------------------------------------------- /tree/.router.js: -------------------------------------------------------------------------------- 1 | function setRouter(app){ 2 | var router = app; 3 | 4 | 5 | app.get('/getData', function(req, res){ 6 | var treeData = [ 7 | { 8 | title: '课程', 9 | children: [ 10 | { 11 | title: '后端', 12 | link: '#1' 13 | }, 14 | { 15 | title: '前端', 16 | children: [ 17 | { 18 | title: '必修班', 19 | link: '#2' 20 | }, 21 | { 22 | title: '任务班', 23 | link: '#3' 24 | } 25 | ] 26 | } 27 | ] 28 | }, 29 | { 30 | title: '文章', 31 | is_open: true, 32 | children: [ 33 | { 34 | title: '技术', 35 | link: '#4' 36 | }, 37 | { 38 | title: '灌水', 39 | link: '#5' 40 | } 41 | ] 42 | } 43 | ] 44 | 45 | res.send(treeData) 46 | })} 47 | module.exports.setRouter = setRouter -------------------------------------------------------------------------------- /tree/router.js: -------------------------------------------------------------------------------- 1 | 2 | app.get('/getData', function(req, res){ 3 | var treeData = [ 4 | { 5 | title: '课程', 6 | children: [ 7 | { 8 | title: '后端', 9 | link: '#1' 10 | }, 11 | { 12 | title: '前端', 13 | children: [ 14 | { 15 | title: '必修班', 16 | link: '#2' 17 | }, 18 | { 19 | title: '任务班', 20 | link: '#3' 21 | } 22 | ] 23 | } 24 | ] 25 | }, 26 | { 27 | title: '文章', 28 | is_open: true, 29 | children: [ 30 | { 31 | title: '技术', 32 | link: '#4' 33 | }, 34 | { 35 | title: '灌水', 36 | link: '#5' 37 | } 38 | ] 39 | } 40 | ] 41 | 42 | res.send(treeData) 43 | }) -------------------------------------------------------------------------------- /util/util-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | util test 7 | 8 | 9 | 10 | 11 |
    12 |
    1
    13 |
    2
    14 |
    3
    15 |
    16 | 24 | 25 | -------------------------------------------------------------------------------- /virtual-dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | sample 6 | 7 | 8 |
    9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /virtual-dom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "virtual-dom", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /virtual-dom/virtualdom.js: -------------------------------------------------------------------------------- 1 | function g(tagName, props, children) { 2 | return { 3 | tagName: tagName, 4 | props: props, 5 | children: children 6 | } 7 | } 8 | 9 | /* 10 | 11 | 12 | 13 | */ 14 | 15 | function createElement(node) { 16 | if( typeof node === 'string') { 17 | return document.createTextNode(node) 18 | } 19 | var $el = document.createElement(node.tagName) 20 | node.children.map(createElement).forEach(function($child){ 21 | $el.appendChild($child) 22 | }) 23 | return $el 24 | } 25 | 26 | var node = { 27 | tagName: 'div', 28 | children: [ 29 | { 30 | tagName: 'h1', 31 | children: [] 32 | }, 33 | { 34 | tagName: 'p', 35 | children: [ 36 | { 37 | tagName: 'span', 38 | children: ['hi'] 39 | }, 40 | 'hello world' 41 | ] 42 | } 43 | ] 44 | } 45 | 46 | var $el = createElement(node) 47 | console.log($el) 48 | 49 | 50 | -------------------------------------------------------------------------------- /waterfall/js/expourse.js: -------------------------------------------------------------------------------- 1 | var Exposure = { 2 | 3 | init: function($target, handler) { 4 | 5 | this.$c = $(window); 6 | this.$target = $target; 7 | this.handler = handler; 8 | 9 | this.bind(); 10 | this.checkShow(); 11 | }, 12 | 13 | bind: function() { 14 | 15 | var me = this, 16 | timer = null, 17 | interval = 100; 18 | 19 | $(window).on('scroll', function(e) { 20 | timer && clearTimeout(timer); 21 | timer = setTimeout(function() { 22 | me.checkShow(); 23 | }, interval); 24 | }); 25 | 26 | }, 27 | 28 | checkShow: function() { 29 | var me = this; 30 | this.$target.each(function() { 31 | 32 | var $cur = $(this); 33 | if ( me.isShow($cur) ) { 34 | me.handler && me.handler.call(this, this); 35 | $cur.data('loaded', true); 36 | } 37 | }); 38 | }, 39 | 40 | isShow: function($el) { 41 | 42 | var scrollH = this.$c.scrollTop(), 43 | winH = this.$c.height(), 44 | top = $el.offset().top; 45 | 46 | if (top < winH + scrollH) { 47 | return true; 48 | } else { 49 | return false; 50 | } 51 | }, 52 | 53 | hasLoaded: function($el) { 54 | if ($el.data('loaded')) { 55 | return true; 56 | } else { 57 | return false; 58 | } 59 | } 60 | 61 | }; -------------------------------------------------------------------------------- /waterfall/js/waterfall.js: -------------------------------------------------------------------------------- 1 | var WaterFall = { 2 | 3 | //[0,0,0,0] 4 | //[20, 10, 30, 15] 5 | 6 | arrColHeight: [], 7 | 8 | init: function( $ct ){ 9 | this.$ct = $ct; 10 | this.arrColHeight = []; 11 | 12 | this.bind(); 13 | this.start(); 14 | }, 15 | 16 | bind: function(){ 17 | var me = this; 18 | $(window).on('resize', function(){ 19 | me.start(); 20 | }); 21 | }, 22 | 23 | start: function($nodes){ 24 | var me = this; 25 | this.$items = this.$ct.find('.item'); 26 | if(this.$items.length ===0) return; 27 | this.itemWidth = this.$items.outerWidth(true); 28 | this.$ct.width('auto'); 29 | this.colNum = Math.floor( this.$ct.width() / this.itemWidth ); 30 | this.$ct.width(this.itemWidth*this.colNum); 31 | if(this.arrColHeight.length === 0 || !$nodes){ 32 | this.arrColHeight = []; 33 | for(var i=0; i arr[i]){ 78 | min = arr[i]; 79 | idx = i; 80 | } 81 | } 82 | return {min: min, idx: idx}; 83 | } 84 | } --------------------------------------------------------------------------------