├── 3dPaging └── index.html ├── 3dRotateDemo ├── 3d-ball.html ├── 3d-cubic.html └── rotate.html ├── CSSSecrets ├── index.html └── static │ ├── css │ ├── app.14c076ecacbb1e87636a8c492cd944e9.css │ ├── app.14c076ecacbb1e87636a8c492cd944e9.css.map │ ├── app.3a3674d5a4122aaac79090bcf025594c.css │ ├── app.3a3674d5a4122aaac79090bcf025594c.css.map │ ├── app.3d0a4207012c92ad3303c978935c734c.css │ ├── app.3d0a4207012c92ad3303c978935c734c.css.map │ ├── app.6811bd017cef5c788afcf92e7427c661.css │ ├── app.6811bd017cef5c788afcf92e7427c661.css.map │ ├── app.6e441f5a44d5b9b3659e8e37f9750d0f.css │ ├── app.6e441f5a44d5b9b3659e8e37f9750d0f.css.map │ ├── app.cbfb76b29cc2da839783caba4f5ed721.css │ ├── app.cbfb76b29cc2da839783caba4f5ed721.css.map │ ├── app.ef588dce7f0905b14962694e7a97e7fc.css │ └── app.ef588dce7f0905b14962694e7a97e7fc.css.map │ ├── fonts │ └── element-icons.6f0a763.ttf │ └── js │ ├── app.3ec49e88a5c45646e0f2.js │ ├── app.3ec49e88a5c45646e0f2.js.map │ ├── app.509cc9b63e9198020ed7.js │ ├── app.509cc9b63e9198020ed7.js.map │ ├── app.6215283f8d2addaf2c74.js │ ├── app.6215283f8d2addaf2c74.js.map │ ├── app.91aca237c6918b3945ab.js │ ├── app.91aca237c6918b3945ab.js.map │ ├── app.ac0940586717e7293527.js │ ├── app.ac0940586717e7293527.js.map │ ├── app.c7b482548007c713f595.js │ ├── app.c7b482548007c713f595.js.map │ ├── app.eae4df69e540bc17a71c.js │ ├── app.eae4df69e540bc17a71c.js.map │ ├── app.fd06b3470103e8c95db5.js │ ├── app.fd06b3470103e8c95db5.js.map │ ├── manifest.2ae2e69a05c33dfc65f8.js │ ├── manifest.2ae2e69a05c33dfc65f8.js.map │ ├── manifest.3ad1d5771e9b13dbdad2.js │ ├── manifest.3ad1d5771e9b13dbdad2.js.map │ ├── vendor.1a2f4ffec9d95159bc6d.js │ └── vendor.1a2f4ffec9d95159bc6d.js.map ├── Calendar ├── index.html └── pre.png ├── CanvasClip ├── 2.jpg └── canvasclip.html ├── GithubSearchEngine ├── index.html └── static │ ├── css │ └── app.f922055a7b7261143a94946f1ebfe512.css │ ├── fonts │ ├── fontawesome-webfont.674f50d.eot │ ├── fontawesome-webfont.af7ae50.woff2 │ ├── fontawesome-webfont.b06871f.ttf │ └── fontawesome-webfont.fee66e7.woff │ ├── img │ └── fontawesome-webfont.912ec66.svg │ └── js │ ├── app.04a1f3ce8696a893e1f4.js │ ├── app.04a1f3ce8696a893e1f4.js.map │ ├── manifest.c77c5691d7443f0c25b5.js │ ├── manifest.c77c5691d7443f0c25b5.js.map │ ├── vendor.fae6cd5e292cd9b89311.js │ └── vendor.fae6cd5e292cd9b89311.js.map ├── HorizontalTimeline ├── imgs │ ├── next.svg │ └── pre.svg ├── index.html ├── scripts │ └── index.js └── styles │ ├── index.css │ └── index.less ├── NotesApp ├── index.html └── static │ ├── css │ ├── app.3dc06e56fc23bbf1f3eff81b66ba6c28.css │ ├── app.90372467419498276abd23263d337d68.css │ └── app.9186130624deca7f4bf454dc1679a069.css │ ├── fonts │ ├── fontawesome-webfont.674f50d.eot │ ├── fontawesome-webfont.af7ae50.woff2 │ ├── fontawesome-webfont.b06871f.ttf │ └── fontawesome-webfont.fee66e7.woff │ ├── img │ └── fontawesome-webfont.912ec66.svg │ └── js │ ├── app.1080b162e94a714b056a.js │ ├── app.1080b162e94a714b056a.js.map │ ├── app.bfcb78925108a0419115.js │ ├── app.bfcb78925108a0419115.js.map │ ├── manifest.2587c93be1645cc05390.js │ ├── manifest.2587c93be1645cc05390.js.map │ ├── manifest.d055f950ce0d8aee4e54.js │ ├── manifest.d055f950ce0d8aee4e54.js.map │ ├── manifest.d5762d971c7752fe2c95.js │ ├── manifest.d5762d971c7752fe2c95.js.map │ ├── vendor.4c085bfb3d8c6b06d49c.js │ └── vendor.4c085bfb3d8c6b06d49c.js.map ├── PhotoShaow ├── 1.jpg ├── 2.jpg ├── 3.jpg └── index.html ├── README.md ├── Secret ├── index.html └── static │ ├── css │ ├── app.06ef8ceccc9e859fabbdc6720c63ff8e.css │ ├── app.06ef8ceccc9e859fabbdc6720c63ff8e.css.map │ ├── app.0d07e76e41bea0ca393ae0b4599bc2d8.css │ ├── app.0d07e76e41bea0ca393ae0b4599bc2d8.css.map │ ├── app.10f8b326dc78ad65176a2ae1308f1789.css │ ├── app.10f8b326dc78ad65176a2ae1308f1789.css.map │ ├── app.3858dbcd806389daf4c2115771ee624d.css │ ├── app.3858dbcd806389daf4c2115771ee624d.css.map │ ├── app.60d1071cb7a249f846f1a911fd28d8e2.css │ ├── app.60d1071cb7a249f846f1a911fd28d8e2.css.map │ ├── app.7cf145f58c92479cfb589178e95a745b.css │ ├── app.7cf145f58c92479cfb589178e95a745b.css.map │ ├── app.88b2a9d3d69af9b752826baa263cede2.css │ ├── app.88b2a9d3d69af9b752826baa263cede2.css.map │ ├── app.b90abd497a9ebca4abb19e755a73357b.css │ ├── app.b90abd497a9ebca4abb19e755a73357b.css.map │ ├── app.bb9d1c5d1ab8fee35accdd826218a9b2.css │ ├── app.bb9d1c5d1ab8fee35accdd826218a9b2.css.map │ ├── app.cea9f0a9c90692c3cd3d3300a3bb5c41.css │ ├── app.cea9f0a9c90692c3cd3d3300a3bb5c41.css.map │ ├── app.f419b4c71eb6d7a86cf18a9286674a83.css │ └── app.f419b4c71eb6d7a86cf18a9286674a83.css.map │ ├── fonts │ ├── element-icons.6f0a763.ttf │ ├── fontawesome-webfont.674f50d.eot │ ├── fontawesome-webfont.af7ae50.woff2 │ ├── fontawesome-webfont.b06871f.ttf │ └── fontawesome-webfont.fee66e7.woff │ ├── img │ └── fontawesome-webfont.912ec66.svg │ └── js │ ├── app.05cb13f4c2235cb6703e.js │ ├── app.05cb13f4c2235cb6703e.js.map │ ├── app.337e89ed4f8c0f4bb115.js │ ├── app.337e89ed4f8c0f4bb115.js.map │ ├── app.3e9f8cf8da3a4673698c.js │ ├── app.3e9f8cf8da3a4673698c.js.map │ ├── app.677338d11497399777e2.js │ ├── app.677338d11497399777e2.js.map │ ├── app.6e73aa2afe21217040f3.js │ ├── app.6e73aa2afe21217040f3.js.map │ ├── app.85a8b48a7c71817ea009.js │ ├── app.85a8b48a7c71817ea009.js.map │ ├── app.85e582e6304712aeb0ef.js │ ├── app.85e582e6304712aeb0ef.js.map │ ├── app.a01dd51f2f8de336350c.js │ ├── app.a01dd51f2f8de336350c.js.map │ ├── app.b887242d5b5beeff38ee.js │ ├── app.b887242d5b5beeff38ee.js.map │ ├── app.beff9aca565e6a6a8b4b.js │ ├── app.beff9aca565e6a6a8b4b.js.map │ ├── app.c7bd6cf4e3cfa131d853.js │ ├── app.c7bd6cf4e3cfa131d853.js.map │ ├── app.ce9de7486954f4ab5267.js │ ├── app.ce9de7486954f4ab5267.js.map │ ├── manifest.117736c4022095c40c01.js │ ├── manifest.117736c4022095c40c01.js.map │ ├── manifest.1b7b89589bc00640f07e.js │ ├── manifest.1b7b89589bc00640f07e.js.map │ ├── manifest.271912a00f19e1046c55.js │ ├── manifest.271912a00f19e1046c55.js.map │ ├── manifest.30f1140972c43e88b8a0.js │ ├── manifest.30f1140972c43e88b8a0.js.map │ ├── manifest.37b6b1fd1dae2aa468db.js │ ├── manifest.37b6b1fd1dae2aa468db.js.map │ ├── manifest.6fa265cdff895402d1fb.js │ ├── manifest.6fa265cdff895402d1fb.js.map │ ├── manifest.98a021f456f148f8af19.js │ ├── manifest.98a021f456f148f8af19.js.map │ ├── manifest.a8a40abef2cf4ed6af07.js │ ├── manifest.a8a40abef2cf4ed6af07.js.map │ ├── manifest.b41bd6b1481f8e3a959a.js │ ├── manifest.b41bd6b1481f8e3a959a.js.map │ ├── manifest.c49ffba695ed82f72476.js │ ├── manifest.c49ffba695ed82f72476.js.map │ ├── manifest.ce6f8e2b8e850a0775e5.js │ ├── manifest.ce6f8e2b8e850a0775e5.js.map │ ├── manifest.dd36d8a35c7478bfefd8.js │ └── manifest.dd36d8a35c7478bfefd8.js.map ├── TransitionDemo ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── cubic-animation.html ├── font │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ └── fontawesome-webfont.woff ├── index.html └── photo.html ├── VerticalTimeline ├── index.html ├── scripts │ └── index.js └── styles │ ├── index.css │ └── index.less ├── aside.png ├── browseHappy ├── css │ ├── style.css │ └── style.less ├── imgs │ ├── bg-footer.png │ ├── bg-header.png │ ├── bg.jpg │ └── browsehappy-sprite.png ├── index.html └── js │ └── less.min.js ├── btnHover ├── index.css └── index.html ├── index.html ├── pintu ├── app.js ├── index.html └── style.css ├── smile.png ├── style.css └── 实现细节记录.md /3dPaging/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 81 | 82 | 83 |
84 |
85 |
1
86 |
2
87 |
3
88 |
4
89 |
5
90 |
91 |
92 |
93 | 94 | 95 |
96 | 97 | 122 | 123 | -------------------------------------------------------------------------------- /3dRotateDemo/3d-ball.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 82 | 83 | 84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | 94 | -------------------------------------------------------------------------------- /3dRotateDemo/3d-cubic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 132 | 133 | 134 |
135 |
136 |
Front
137 |
End
138 |
Left
139 |
Right
140 |
Top
141 |
Bottom
142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 |
150 |
151 | 152 | -------------------------------------------------------------------------------- /3dRotateDemo/rotate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 32 | 33 | 34 | 35 |
36 |
37 |
38 |

RotateX: 0 deg

39 | 40 |
41 |
42 |

RotateY: 0 deg

43 | 44 |
45 |
46 |

RotateZ: 0 deg

47 | 48 |
49 |
50 | 86 | 87 | -------------------------------------------------------------------------------- /CSSSecrets/index.html: -------------------------------------------------------------------------------- 1 | makecssdemo
-------------------------------------------------------------------------------- /CSSSecrets/static/fonts/element-icons.6f0a763.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/CSSSecrets/static/fonts/element-icons.6f0a763.ttf -------------------------------------------------------------------------------- /CSSSecrets/static/js/app.3ec49e88a5c45646e0f2.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{NHnr:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=n("7+uW"),i={render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"app"}},[e("router-view")],1)},staticRenderFns:[]};var o=n("VU/8")({name:"App"},i,!1,function(t){n("lGf4")},null,null).exports,r=n("/ocq"),d=n("woOf"),l={"1-1":[{src:"//jsfiddle.net/Hwaphon/e6Lg0a3r/embedded/result,html,css/",tips:["background-clip 属性规定背景的绘制区域。"]}],"1-2":[{src:"//jsfiddle.net/Hwaphon/68ry34t1/embedded/result,html,css/",tips:["绘制多重边框有两种方法。第一种是使用 box-shadow ,第二种是 outline。","box-shadow 前三个参数指定为 0，第四个参数指定为要模拟的边框宽度，第五个参数指定为要模拟的边框颜色，就可以实现一个边框效果。由于 box-shadow 可以以逗号分隔指定多个值，所以可以为元素添加任意多个边框。这种方法的优点是可以设置多个边框而且可以保持元素的圆角。缺点是不能响应元素的点击或其它事件。如果响应事件对你非常重要，那么可以启用 box-shadow 的 inset 关键字，然后再为元素设置一个 padding 即可。","outline 的行为和 border 几乎是相同的，不过不支持圆角（Firefox 支持 outline-radius）。借助 outline-offset 属性可以设置相对元素的距离，设置为负值时边框将显示在元素内部。相比于 box-shadow，这种方法的优点是支持边框非实线（可以设置为虚线）,缺点是只能设置一个外边框。"]}],"1-3":[{src:"//jsfiddle.net/Hwaphon/3700Lm2d/1/embedded/result,html,css/",tips:["在 CSS3 中，background-position 可以用 right 10px 这种形式为背景设置距离容器的右边距。在 background 中仍然书写了 right bottom 关键字，主要是为不支持上述写法的浏览器提供一个回退方案。"]},{src:"//jsfiddle.net/Hwaphon/dyLwrnd0/1/embedded/result,html,css/",tips:["一个元素包含三个矩形，一个是 content 矩形，一个是 content + padding 矩形，还有一个是 content + padding + border 矩形。background-origin 用于设置背景图相对于哪个矩形进行定位，默认是 padding-box，为了实现背景图与内边距一致的效果，可将默认值更改为 content-box。"]}]},a=n.n(d)()({},l),u={data:function(){return{jsfiddle:"",defaultActive:"1-1",menus:[{index:"1",title:"第二章 背景与边框",submenu:[{index:"1-1",title:"1. 半透明边框"},{index:"1-2",title:"2. 多重边框"},{index:"1-3",title:"3. 灵活的背景定位"},{index:"1-4",title:"4. 边框内圆角"},{index:"1-5",title:"5. 条纹背景"},{index:"1-6",title:"6. 复杂的背景图案"}]}],menuContents:a,currentContent:[]}},methods:{selectMenu:function(t){this.currentContent=this.menuContents[t]||[]}},created:function(){this.currentContent=this.menuContents[this.defaultActive]}},c={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"Index"},[n("el-row",{staticClass:"Index-row"},[n("el-col",{staticClass:"Index-col",attrs:{span:4,offset:2}},[n("el-menu",{staticClass:"Index-menu",attrs:{mode:"vertical","default-active":t.defaultActive},on:{select:t.selectMenu}},t._l(t.menus,function(e){return n("el-submenu",{key:e.index,attrs:{index:e.index}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v(t._s(e.title))]),t._v(" "),t._l(e.submenu,function(e){return n("el-menu-item",{key:e.index,attrs:{index:e.index}},[t._v("\n\t\t\t\t\t\t"+t._s(e.title)+"\n\t\t\t\t\t")])})],2)}))],1),t._v(" "),n("el-col",{staticClass:"Index-col",attrs:{span:16}},[n("div",{staticClass:"menu-content"},t._l(t.currentContent,function(e,s){return n("div",{key:s},[n("h2",[t._v("例 "+t._s(s+1))]),t._v(" "),n("iframe",{attrs:{width:"100%",height:"300",src:e.src,allowpaymentrequest:"",allowfullscreen:"allowfullscreen",frameborder:"0"}}),t._v(" "),e.tips.length>0?n("div",{staticClass:"content-tips"},t._l(e.tips,function(e){return n("p",[t._v(t._s(e))])})):t._e()])}))])],1)],1)},staticRenderFns:[]};var f=n("VU/8")(u,c,!1,function(t){n("VG2f")},"data-v-69e8a359",null).exports;s.default.use(r.a);var p=new r.a({routes:[{path:"/",name:"Index",component:f}]}),m=n("zL8q"),h=n.n(m);n("tvR6");s.default.use(h.a),s.default.config.productionTip=!1,new s.default({el:"#app",router:p,components:{App:o},template:""})},VG2f:function(t,e){},lGf4:function(t,e){},tvR6:function(t,e){}},["NHnr"]); 2 | //# sourceMappingURL=app.3ec49e88a5c45646e0f2.js.map -------------------------------------------------------------------------------- /CSSSecrets/static/js/app.6215283f8d2addaf2c74.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{NHnr:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var s=n("7+uW"),d={render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",{attrs:{id:"app"}},[t("router-view")],1)},staticRenderFns:[]};var i=n("VU/8")({name:"App"},d,!1,function(e){n("lGf4")},null,null).exports,r=n("/ocq"),o=n("woOf"),l={"1-1":[{src:"//jsfiddle.net/Hwaphon/e6Lg0a3r/embedded/result,html,css/",tips:["background-clip 属性规定背景的绘制区域。"]}],"1-2":[{src:"//jsfiddle.net/Hwaphon/68ry34t1/embedded/result,html,css/",tips:["绘制多重边框有两种方法。第一种是使用 box-shadow ,第二种是 outline。","box-shadow 前三个参数指定为 0，第四个参数指定为要模拟的边框宽度，第五个参数指定为要模拟的边框颜色，就可以实现一个边框效果。由于 box-shadow 可以以逗号分隔指定多个值，所以可以为元素添加任意多个边框。这种方法的优点是可以设置多个边框而且可以保持元素的圆角。缺点是不能响应元素的点击或其它事件。如果响应事件对你非常重要，那么可以启用 box-shadow 的 inset 关键字，然后再为元素设置一个 padding 即可。","outline 的行为和 border 几乎是相同的，不过不支持圆角（Firefox 支持 outline-radius）。借助 outline-offset 属性可以设置相对元素的距离，设置为负值时边框将显示在元素内部。相比于 box-shadow，这种方法的优点是支持边框非实线（可以设置为虚线）,缺点是只能设置一个外边框。"]}],"1-3":[{src:"//jsfiddle.net/Hwaphon/3700Lm2d/1/embedded/result,html,css/",tips:["在 CSS3 中，background-position 可以用 right 10px 这种形式为背景设置距离容器的右边距。在 background 中仍然书写了 right bottom 关键字，主要是为不支持上述写法的浏览器提供一个回退方案。"]},{src:"//jsfiddle.net/Hwaphon/dyLwrnd0/1/embedded/result,html,css/",tips:["一个元素包含三个矩形，一个是 content 矩形，一个是 content + padding 矩形，还有一个是 content + padding + border 矩形。background-origin 用于设置背景图相对于哪个矩形进行定位，默认是 padding-box，为了实现背景图与内边距一致的效果，可将默认值更改为 content-box。"]}],"1-4":[{src:"//jsfiddle.net/Hwaphon/so6ozq8u/embedded/result,html,css/",tips:["利用 box-shadow 和 outline 可以实现这个效果，box-shadow 第四个参数用于设置扩张半径，可保持元素的圆角，outline可以设置边框，但是无法保持圆角。但是这二者一重叠，就可以将元素和 outline 之间的空白填补上。","box-shadow 第四个参数扩张半径的设置是有讲究的，在元素圆角处将圆形描述出来，就不难发现，圆心到外边框的距离为 √ (radius ^ 2 + radius ^2)，所以 box-shadow 扩展半径要大于 (√ 2 - 1) * radius, 小于 (√ 2 - 1) * radius + outline 边框宽度。"]}],"1-5":[{src:"//jsfiddle.net/Hwaphon/1zobd5xe/embedded/result,html,css/",tips:["可以使用 repeating-linear-grandient 生成斜向条纹。","如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。","为了设置同色系的条纹，可以先为元素设置好背景色，然后设置透明渐变以获取淡色条纹。"]}],"1-6":[{src:"//jsfiddle.net/Hwaphon/m1wwcaqu/1/embedded/result,html,css/",tips:["background-image 可以用逗号分隔指定多个值，借用这个特性可以实现许多有趣的图形。"]},{src:"//jsfiddle.net/Hwaphon/qr99Lbx6/embedded/result,html,css/",tips:["在未利用预处理器的情况下，如果需要修改圆点的尺寸及间隔，将改动四处代码。建议使用预处理器的 mixins。"]},{src:"//jsfiddle.net/Hwaphon/bjxghn4v/embedded/result,html,css/",tips:["此例的实现依赖于 background-position 的使用。"]}],"1-7":[{src:"//jsfiddle.net/Hwaphon/fnvek1w3/embedded/result,html,css/",tips:["将三个背景的宽度设置为质数，这样背景重复的最小尺寸将为三个质数的乘积。所以选择大小合适的质数将使的在已知分辨率下无规律可循，即实现伪随机。"]}],"1-8":[{src:"//jsfiddle.net/Hwaphon/8nba02wb/embedded/result,html,css/",tips:["结合 background-clip 和 background-origin。 background-origin 的值默认是 padding-box，所以背景图像在 padding-box 的基础上显示是正常的，由于 background-clip 又指明将背景延伸到 border-box，所以这个时候的背景实际上是被拉伸的。为了正常的显示，我们需要先将 background-origin 设置为 border-box。"]}]},a={"2-1":[{src:"//jsfiddle.net/Hwaphon/nweqwhta/embedded/result,html,css/",tips:["在元素宽高相同的情况下，border-radius 的某个值设置为 =50% 或者 >50% 效果是相同的。如果元素是宽高不等的矩形，那么 =50% 和 >50% 的效果将有所不同。","border-radius: 10px 是 border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px 的简写。/ 前指定的是水平方向的圆角半径，/ 后指定的是垂直方向上的圆角半径。"]},{src:"//jsfiddle.net/Hwaphon/rgatvonh/1/embedded/result,html,css/",tips:[]}],"2-2":[{src:"//jsfiddle.net/Hwaphon/4Lhbwzm1/embedded/result,html,css/",tips:["如果为元素本身设置 skew 变形，那么元素的文字也会变形。所以可以为元素的伪元素设置变形。","伪元素设置背景之后将覆盖元素本身，所以需要为其设置 z-index: -1，让其处于元素下一层。","如果元素高度和宽度相等，那么可以对伪元素使用 rotate，从而制造一个菱形。"]}]},u=n.n(o)()({},l,a),c={data:function(){return{jsfiddle:"",defaultActive:"1-1",menus:[{index:"1",title:"第2章 背景与边框",submenu:[{index:"1-1",title:"1. 半透明边框"},{index:"1-2",title:"2. 多重边框"},{index:"1-3",title:"3. 灵活的背景定位"},{index:"1-4",title:"4. 边框内圆角"},{index:"1-5",title:"5. 条纹背景"},{index:"1-6",title:"6. 复杂的背景图案"},{index:"1-7",title:"7. 伪随机背景"},{index:"1-8",title:"8. 连续的图像边框"}]},{index:"2",title:"第3章 形状",submenu:[{index:"2-1",title:"自适应的椭圆"},{index:"2-2",title:"平行四边形"},{index:"2-3",title:"菱形图片"},{index:"2-4",title:"切角效果"},{index:"2-5",title:"梯形标签页"},{index:"2-6",title:"简单的饼图"}]}],menuContents:u,currentContent:[]}},methods:{selectMenu:function(e){this.currentContent=this.menuContents[e]||[]}},created:function(){this.currentContent=this.menuContents[this.defaultActive]},updated:function(){console.log("updated")}},p={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"Index"},[n("el-row",{staticClass:"Index-row"},[n("el-col",{staticClass:"Index-col",attrs:{span:4,offset:2}},[n("el-menu",{staticClass:"Index-menu",attrs:{mode:"vertical","default-active":e.defaultActive},on:{select:e.selectMenu}},e._l(e.menus,function(t){return n("el-submenu",{key:t.index,attrs:{index:t.index}},[n("span",{attrs:{slot:"title"},slot:"title"},[e._v(e._s(t.title))]),e._v(" "),e._l(t.submenu,function(t){return n("el-menu-item",{key:t.index,attrs:{index:t.index}},[e._v("\n\t\t\t\t\t\t"+e._s(t.title)+"\n\t\t\t\t\t")])})],2)}))],1),e._v(" "),n("el-col",{staticClass:"Index-col",attrs:{span:16}},[n("div",{staticClass:"menu-content"},e._l(e.currentContent,function(t,s){return n("div",{key:s},[n("h2",[e._v("例 "+e._s(s+1))]),e._v(" "),n("iframe",{attrs:{width:"100%",height:"300",src:t.src,allowpaymentrequest:"",allowfullscreen:"allowfullscreen",frameborder:"0"}}),e._v(" "),t.tips.length>0?n("div",{staticClass:"content-tips"},e._l(t.tips,function(t){return n("p",[e._v(e._s(t))])})):e._e()])}))])],1)],1)},staticRenderFns:[]};var b=n("VU/8")(c,p,!1,function(e){n("jLRD")},"data-v-5d4255e8",null).exports;s.default.use(r.a);var x=new r.a({routes:[{path:"/",name:"Index",component:b}]}),m=n("zL8q"),h=n.n(m);n("tvR6");s.default.use(h.a),s.default.config.productionTip=!1,new s.default({el:"#app",router:x,components:{App:i},template:""})},jLRD:function(e,t){},lGf4:function(e,t){},tvR6:function(e,t){}},["NHnr"]); 2 | //# sourceMappingURL=app.6215283f8d2addaf2c74.js.map -------------------------------------------------------------------------------- /CSSSecrets/static/js/app.ac0940586717e7293527.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{NHnr:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var s=n("7+uW"),i={render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",{attrs:{id:"app"}},[t("router-view")],1)},staticRenderFns:[]};var d=n("VU/8")({name:"App"},i,!1,function(e){n("lGf4")},null,null).exports,o=n("/ocq"),l=n("woOf"),r={"1-1":[{src:"//jsfiddle.net/Hwaphon/e6Lg0a3r/embedded/result,html,css/",tips:["background-clip 属性规定背景的绘制区域。"]}],"1-2":[{src:"//jsfiddle.net/Hwaphon/68ry34t1/embedded/result,html,css/",tips:["绘制多重边框有两种方法。第一种是使用 box-shadow ,第二种是 outline。","box-shadow 前三个参数指定为 0，第四个参数指定为要模拟的边框宽度，第五个参数指定为要模拟的边框颜色，就可以实现一个边框效果。由于 box-shadow 可以以逗号分隔指定多个值，所以可以为元素添加任意多个边框。这种方法的优点是可以设置多个边框而且可以保持元素的圆角。缺点是不能响应元素的点击或其它事件。如果响应事件对你非常重要，那么可以启用 box-shadow 的 inset 关键字，然后再为元素设置一个 padding 即可。","outline 的行为和 border 几乎是相同的，不过不支持圆角（Firefox 支持 outline-radius）。借助 outline-offset 属性可以设置相对元素的距离，设置为负值时边框将显示在元素内部。相比于 box-shadow，这种方法的优点是支持边框非实线（可以设置为虚线）,缺点是只能设置一个外边框。"]}],"1-3":[{src:"//jsfiddle.net/Hwaphon/3700Lm2d/1/embedded/result,html,css/",tips:["在 CSS3 中，background-position 可以用 right 10px 这种形式为背景设置距离容器的右边距。在 background 中仍然书写了 right bottom 关键字，主要是为不支持上述写法的浏览器提供一个回退方案。"]},{src:"//jsfiddle.net/Hwaphon/dyLwrnd0/1/embedded/result,html,css/",tips:["一个元素包含三个矩形，一个是 content 矩形，一个是 content + padding 矩形，还有一个是 content + padding + border 矩形。background-origin 用于设置背景图相对于哪个矩形进行定位，默认是 padding-box，为了实现背景图与内边距一致的效果，可将默认值更改为 content-box。"]}],"1-4":[{src:"//jsfiddle.net/Hwaphon/so6ozq8u/embedded/result,html,css/",tips:["利用 box-shadow 和 outline 可以实现这个效果，box-shadow 第四个参数用于设置扩张半径，可保持元素的圆角，outline可以设置边框，但是无法保持圆角。但是这二者一重叠，就可以将元素和 outline 之间的空白填补上。","box-shadow 第四个参数扩张半径的设置是有讲究的，在元素圆角处将圆形描述出来，就不难发现，圆心到外边框的距离为 √ (radius ^ 2 + radius ^2)，所以 box-shadow 扩展半径要大于 (√ 2 - 1) * radius, 小于 (√ 2 - 1) * radius + outline 边框宽度。"]}],"1-5":[{src:"//jsfiddle.net/Hwaphon/1zobd5xe/embedded/result,html,css/",tips:["可以使用 repeating-linear-grandient 生成斜向条纹。","如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。","为了设置同色系的条纹，可以先为元素设置好背景色，然后设置透明渐变以获取淡色条纹。"]}],"1-6":[{src:"//jsfiddle.net/Hwaphon/m1wwcaqu/1/embedded/result,html,css/",tips:["background-image 可以用逗号分隔指定多个值，借用这个特性可以实现许多有趣的图形。"]},{src:"//jsfiddle.net/Hwaphon/qr99Lbx6/embedded/result,html,css/",tips:["在未利用预处理器的情况下，如果需要修改圆点的尺寸及间隔，将改动四处代码。建议使用预处理器的 mixins。"]},{src:"//jsfiddle.net/Hwaphon/bjxghn4v/embedded/result,html,css/",tips:["此例的实现依赖于 background-position 的使用。"]}],"1-7":[{src:"//jsfiddle.net/Hwaphon/fnvek1w3/embedded/result,html,css/",tips:["将三个背景的宽度设置为质数，这样背景重复的最小尺寸将为三个质数的乘积。所以选择大小合适的质数将使的在已知分辨率下无规律可循，即实现伪随机。"]}],"1-8":[{src:"//jsfiddle.net/Hwaphon/8nba02wb/embedded/result,html,css/",tips:["结合 background-clip 和 background-origin。 background-origin 的值默认是 padding-box，所以背景图像在 padding-box 的基础上显示是正常的，由于 background-clip 又指明将背景延伸到 border-box，所以这个时候的背景实际上是被拉伸的。为了正常的显示，我们需要先将 background-origin 设置为 border-box。"]}]},a=n.n(l)()({},r),u={data:function(){return{jsfiddle:"",defaultActive:"1-1",menus:[{index:"1",title:"第2章 背景与边框",submenu:[{index:"1-1",title:"1. 半透明边框"},{index:"1-2",title:"2. 多重边框"},{index:"1-3",title:"3. 灵活的背景定位"},{index:"1-4",title:"4. 边框内圆角"},{index:"1-5",title:"5. 条纹背景"},{index:"1-6",title:"6. 复杂的背景图案"},{index:"1-7",title:"7. 伪随机背景"},{index:"1-8",title:"8. 连续的图像边框"}]},{index:"2",title:"第3章 形状",submenu:[{index:"2-1",title:"自适应的椭圆"},{index:"2-2",title:"平行四边形"},{index:"2-3",title:"菱形图片"},{index:"2-4",title:"切角效果"},{index:"2-5",title:"梯形标签页"},{index:"2-6",title:"简单的饼图"}]}],menuContents:a,currentContent:[]}},methods:{selectMenu:function(e){this.currentContent=this.menuContents[e]||[]}},created:function(){this.currentContent=this.menuContents[this.defaultActive]},updated:function(){console.log("updated")}},c={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"Index"},[n("el-row",{staticClass:"Index-row"},[n("el-col",{staticClass:"Index-col",attrs:{span:4,offset:2}},[n("el-menu",{staticClass:"Index-menu",attrs:{mode:"vertical","default-active":e.defaultActive},on:{select:e.selectMenu}},e._l(e.menus,function(t){return n("el-submenu",{key:t.index,attrs:{index:t.index}},[n("span",{attrs:{slot:"title"},slot:"title"},[e._v(e._s(t.title))]),e._v(" "),e._l(t.submenu,function(t){return n("el-menu-item",{key:t.index,attrs:{index:t.index}},[e._v("\n\t\t\t\t\t\t"+e._s(t.title)+"\n\t\t\t\t\t")])})],2)}))],1),e._v(" "),n("el-col",{staticClass:"Index-col",attrs:{span:16}},[n("div",{staticClass:"menu-content"},e._l(e.currentContent,function(t,s){return n("div",{key:s},[n("h2",[e._v("例 "+e._s(s+1))]),e._v(" "),n("iframe",{attrs:{width:"100%",height:"300",src:t.src,allowpaymentrequest:"",allowfullscreen:"allowfullscreen",frameborder:"0"}}),e._v(" "),t.tips.length>0?n("div",{staticClass:"content-tips"},e._l(t.tips,function(t){return n("p",[e._v(e._s(t))])})):e._e()])}))])],1)],1)},staticRenderFns:[]};var p=n("VU/8")(u,c,!1,function(e){n("jLRD")},"data-v-5d4255e8",null).exports;s.default.use(o.a);var b=new o.a({routes:[{path:"/",name:"Index",component:p}]}),f=n("zL8q"),m=n.n(f);n("tvR6");s.default.use(m.a),s.default.config.productionTip=!1,new s.default({el:"#app",router:b,components:{App:d},template:""})},jLRD:function(e,t){},lGf4:function(e,t){},tvR6:function(e,t){}},["NHnr"]); 2 | //# sourceMappingURL=app.ac0940586717e7293527.js.map -------------------------------------------------------------------------------- /CSSSecrets/static/js/app.c7b482548007c713f595.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{"3RlM":function(t,e){},"5n8k":function(t,e){},NHnr:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=n("7+uW"),i={render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"app"}},[e("router-view")],1)},staticRenderFns:[]};var l=n("VU/8")({name:"App"},i,!1,function(t){n("5n8k")},null,null).exports,r=n("/ocq"),a={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"Index"},[n("el-row",{staticClass:"Index-row"},[n("el-col",{staticClass:"Index-col",attrs:{span:4,offset:2}},[n("el-menu",{staticClass:"Index-menu",attrs:{mode:"vertical","default-active":t.defaultActive},on:{select:t.selectMenu}},t._l(t.menus,function(e){return n("el-submenu",{key:e.index,attrs:{index:e.index}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v(t._s(e.title))]),t._v(" "),t._l(e.submenu,function(e){return n("el-menu-item",{key:e.index,attrs:{index:e.index}},[t._v("\n\t\t\t\t\t\t"+t._s(e.title)+"\n\t\t\t\t\t")])})],2)}))],1),t._v(" "),n("el-col",{staticClass:"Index-col",attrs:{span:16}},[n("div",{staticClass:"menu-content"},t._l(t.currentContent,function(e,s){return n("div",{key:s},[n("h2",[t._v("例 "+t._s(s+1))]),t._v(" "),n("iframe",{attrs:{width:"100%",height:"300",src:e.src,allowpaymentrequest:"",allowfullscreen:"allowfullscreen",frameborder:"0"}}),t._v(" "),e.tips?n("p",{staticClass:"content-tips"},[t._v(t._s(e.tips))]):t._e()])}))])],1)],1)},staticRenderFns:[]};var u=n("VU/8")({data:function(){return{defaultActive:"1-1",menus:[{index:"1",title:"第二章 背景与边框",submenu:[{index:"1-1",title:"1. 半透明边框"},{index:"1-2",title:"2. 多重边框"},{index:"1-3",title:"3. 灵活的背景定位"},{index:"1-4",title:"4. 边框内圆角"},{index:"1-5",title:"5. 条纹背景"},{index:"1-6",title:"6. 复杂的背景图案"}]}],menuContents:{"1-1":[{src:"//jsfiddle.net/Hwaphon/e6Lg0a3r/embedded/html,css,result/",tips:"background-clip 属性规定背景的绘制区域。"}]},currentContent:[]}},methods:{selectMenu:function(t){this.currentContent=this.menuContents[t]||[]}},created:function(){this.currentContent=this.menuContents[this.defaultActive]}},a,!1,function(t){n("3RlM")},"data-v-3b63e036",null).exports;s.default.use(r.a);var c=new r.a({routes:[{path:"/",name:"Index",component:u}]}),o=n("zL8q"),d=n.n(o);n("tvR6");s.default.use(d.a),s.default.config.productionTip=!1,new s.default({el:"#app",router:c,components:{App:l},template:""})},tvR6:function(t,e){}},["NHnr"]); 2 | //# sourceMappingURL=app.c7b482548007c713f595.js.map -------------------------------------------------------------------------------- /CSSSecrets/static/js/app.fd06b3470103e8c95db5.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{NHnr:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=n("7+uW"),i={render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"app"}},[e("router-view")],1)},staticRenderFns:[]};var d=n("VU/8")({name:"App"},i,!1,function(t){n("lGf4")},null,null).exports,o=n("/ocq"),r=n("woOf"),l={"1-1":[{src:"//jsfiddle.net/Hwaphon/e6Lg0a3r/embedded/result,html,css/",tips:["background-clip 属性规定背景的绘制区域。"]}],"1-2":[{src:"//jsfiddle.net/Hwaphon/68ry34t1/embedded/result,html,css/",tips:["绘制多重边框有两种方法。第一种是使用 box-shadow ,第二种是 outline。","box-shadow 前三个参数指定为 0，第四个参数指定为要模拟的边框宽度，第五个参数指定为要模拟的边框颜色，就可以实现一个边框效果。由于 box-shadow 可以以逗号分隔指定多个值，所以可以为元素添加任意多个边框。这种方法的优点是可以设置多个边框而且可以保持元素的圆角。缺点是不能响应元素的点击或其它事件。如果响应事件对你非常重要，那么可以启用 box-shadow 的 inset 关键字，然后再为元素设置一个 padding 即可。","outline 的行为和 border 几乎是相同的，不过不支持圆角（Firefox 支持 outline-radius）。借助 outline-offset 属性可以设置相对元素的距离，设置为负值时边框将显示在元素内部。相比于 box-shadow，这种方法的优点是支持边框非实线（可以设置为虚线）,缺点是只能设置一个外边框。"]}],"1-3":[{src:"//jsfiddle.net/Hwaphon/3700Lm2d/1/embedded/result,html,css/",tips:["在 CSS3 中，background-position 可以用 right 10px 这种形式为背景设置距离容器的右边距。在 background 中仍然书写了 right bottom 关键字，主要是为不支持上述写法的浏览器提供一个回退方案。"]},{src:"//jsfiddle.net/Hwaphon/dyLwrnd0/1/embedded/result,html,css/",tips:["一个元素包含三个矩形，一个是 content 矩形，一个是 content + padding 矩形，还有一个是 content + padding + border 矩形。background-origin 用于设置背景图相对于哪个矩形进行定位，默认是 padding-box，为了实现背景图与内边距一致的效果，可将默认值更改为 content-box。"]}],"1-4":[{src:"//jsfiddle.net/Hwaphon/so6ozq8u/embedded/result,html,css/",tips:["利用 box-shadow 和 outline 可以实现这个效果，box-shadow 第四个参数用于设置扩张半径，可保持元素的圆角，outline可以设置边框，但是无法保持圆角。但是这二者一重叠，就可以将元素和 outline 之间的空白填补上。","box-shadow 第四个参数扩张半径的设置是有讲究的，在元素圆角处将圆形描述出来，就不难发现，圆心到外边框的距离为 √ (radius ^ 2 + radius ^2)，所以 box-shadow 扩展半径要大于 (√ 2 - 1) * radius, 小于 (√ 2 - 1) * radius + outline 边框宽度。"]}],"1-5":[{src:"//jsfiddle.net/Hwaphon/1zobd5xe/embedded/result,html,css/",tips:["可以使用 repeating-linear-grandient 生成斜向条纹。","如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。","为了设置同色系的条纹，可以先为元素设置好背景色，然后设置透明渐变以获取淡色条纹。"]}]},a=n.n(r)()({},l),u={data:function(){return{jsfiddle:"",defaultActive:"1-1",menus:[{index:"1",title:"第二章 背景与边框",submenu:[{index:"1-1",title:"1. 半透明边框"},{index:"1-2",title:"2. 多重边框"},{index:"1-3",title:"3. 灵活的背景定位"},{index:"1-4",title:"4. 边框内圆角"},{index:"1-5",title:"5. 条纹背景"},{index:"1-6",title:"6. 复杂的背景图案"}]}],menuContents:a,currentContent:[]}},methods:{selectMenu:function(t){this.currentContent=this.menuContents[t]||[]}},created:function(){this.currentContent=this.menuContents[this.defaultActive]},updated:function(){console.log("updated")}},c={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"Index"},[n("el-row",{staticClass:"Index-row"},[n("el-col",{staticClass:"Index-col",attrs:{span:4,offset:2}},[n("el-menu",{staticClass:"Index-menu",attrs:{mode:"vertical","default-active":t.defaultActive},on:{select:t.selectMenu}},t._l(t.menus,function(e){return n("el-submenu",{key:e.index,attrs:{index:e.index}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v(t._s(e.title))]),t._v(" "),t._l(e.submenu,function(e){return n("el-menu-item",{key:e.index,attrs:{index:e.index}},[t._v("\n\t\t\t\t\t\t"+t._s(e.title)+"\n\t\t\t\t\t")])})],2)}))],1),t._v(" "),n("el-col",{staticClass:"Index-col",attrs:{span:16}},[n("div",{staticClass:"menu-content"},t._l(t.currentContent,function(e,s){return n("div",{key:s},[n("h2",[t._v("例 "+t._s(s+1))]),t._v(" "),n("iframe",{attrs:{width:"100%",height:"300",src:e.src,allowpaymentrequest:"",allowfullscreen:"allowfullscreen",frameborder:"0"}}),t._v(" "),e.tips.length>0?n("div",{staticClass:"content-tips"},t._l(e.tips,function(e){return n("p",[t._v(t._s(e))])})):t._e()])}))])],1)],1)},staticRenderFns:[]};var p=n("VU/8")(u,c,!1,function(t){n("qrtS")},"data-v-0af72bbf",null).exports;s.default.use(o.a);var f=new o.a({routes:[{path:"/",name:"Index",component:p}]}),m=n("zL8q"),h=n.n(m);n("tvR6");s.default.use(h.a),s.default.config.productionTip=!1,new s.default({el:"#app",router:f,components:{App:d},template:""})},lGf4:function(t,e){},qrtS:function(t,e){},tvR6:function(t,e){}},["NHnr"]); 2 | //# sourceMappingURL=app.fd06b3470103e8c95db5.js.map -------------------------------------------------------------------------------- /CSSSecrets/static/js/manifest.2ae2e69a05c33dfc65f8.js: -------------------------------------------------------------------------------- 1 | !function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a 2 | 3 | 4 | 5 | 119 | 120 | 121 |
122 |
123 |

Month

124 |

year

125 | 126 | 127 |
128 |
129 |
    130 |
  • MON
    • 131 |
  • TUE
    • 132 |
  • WED
    • 133 |
  • THU
    • 134 |
  • FRI
    • 135 |
  • SAT
    • 136 |
  • SUN
    • 137 |
138 |
    139 |
140 |
141 |
142 | 143 | 233 | 234 | -------------------------------------------------------------------------------- /Calendar/pre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/Calendar/pre.png -------------------------------------------------------------------------------- /CanvasClip/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/CanvasClip/2.jpg -------------------------------------------------------------------------------- /CanvasClip/canvasclip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 53 | 54 | 55 |
56 | 57 | 58 |
59 |
60 | 61 | 62 |
63 | 64 | 144 | 145 | -------------------------------------------------------------------------------- /GithubSearchEngine/index.html: -------------------------------------------------------------------------------- 1 | Github
-------------------------------------------------------------------------------- /GithubSearchEngine/static/fonts/fontawesome-webfont.674f50d.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/GithubSearchEngine/static/fonts/fontawesome-webfont.674f50d.eot -------------------------------------------------------------------------------- /GithubSearchEngine/static/fonts/fontawesome-webfont.af7ae50.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/GithubSearchEngine/static/fonts/fontawesome-webfont.af7ae50.woff2 -------------------------------------------------------------------------------- /GithubSearchEngine/static/fonts/fontawesome-webfont.b06871f.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/GithubSearchEngine/static/fonts/fontawesome-webfont.b06871f.ttf -------------------------------------------------------------------------------- /GithubSearchEngine/static/fonts/fontawesome-webfont.fee66e7.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/GithubSearchEngine/static/fonts/fontawesome-webfont.fee66e7.woff -------------------------------------------------------------------------------- /GithubSearchEngine/static/js/app.04a1f3ce8696a893e1f4.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{"0cWa":function(t,e){},"1gRa":function(t,e,a){"use strict";e.a={props:{href:{type:String,default:""},name:{type:String,default:""},language:{type:String,default:""},star:{type:String|Number,default:0},des:{type:String,default:""}},computed:{finalStar:function(){return this.star>=1e3?Math.floor(this.star/1e3)+"k":this.star},color:function(){return"JavaScript"===this.language?"#f1e05a":"Vue"===this.language?"#2c3e50":"HTML"===this.language?"#e34c26":"Java"===this.language?"#b07219":"#6E828A"}}}},"5W1q":function(t,e){},"7biW":function(t,e,a){"use strict";function n(t){a("BM5o")}var s=a("CNvo"),i=a("MeeV"),r=a("VU/8"),c=n,o=r(s.a,i.a,!1,c,"data-v-255b2dc1",null);e.a=o.exports},BM5o:function(t,e){},CNvo:function(t,e,a){"use strict";e.a={data:function(){return{value:""}},methods:{searchHandler:function(t){this.$store.dispatch("toggleInit");var e=this;this.$http.get("https://api.github.com/search/repositories?q="+this.value+"&page=1&per_page=20").then(function(t){console.log(t.data.items),e.updateRepos(t.data.items)}).catch(function(t){console.log(t)})},updateRepos:function(t){this.$store.dispatch("updateRepos",t)}}}},HSoB:function(t,e,a){"use strict";var n=a("Dd8w"),s=a.n(n),i=a("NYxO"),r=a("TbOw");e.a={computed:s()({},Object(i.b)(["active","repos"])),methods:{reposHandler:function(){this.$store.dispatch("toggleActive","repos")},userHandler:function(){this.$store.dispatch("toggleActive","user")}},components:{Repos:r.a}}},M93x:function(t,e,a){"use strict";function n(t){a("jOvY")}var s=a("xJD8"),i=a("poMD"),r=a("VU/8"),c=n,o=r(s.a,i.a,!1,c,null,null);e.a=o.exports},MeeV:function(t,e,a){"use strict";var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"search"},[a("input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"value"}],attrs:{type:"text",placeholder:"Search Github"},domProps:{value:t.value},on:{keyup:function(e){if(!("button"in e)&&t._k(e.keyCode,"enter",13,e.key))return null;t.searchHandler(e)},input:function(e){e.target.composing||(t.value=e.target.value)}}}),t._v(" "),a("i",{staticClass:"fa fa-search",attrs:{"aria-hidden":"true"},on:{click:t.searchHandler}})])},s=[],i={render:n,staticRenderFns:s};e.a=i},MiD0:function(t,e,a){"use strict";var n=a("Dd8w"),s=a.n(n),i=a("7biW"),r=a("d5Va"),c=a("NYxO");e.a={name:"Index",data:function(){return{}},components:{SearchInput:i.a,ResultList:r.a},computed:s()({},Object(c.b)(["init"]))}},NHnr:function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=a("7+uW"),s=a("M93x"),i=a("YaEn"),r=a("5W1q"),c=(a.n(r),a("mtWM")),o=a.n(c),u=a("l+I4");n.a.config.productionTip=!1,n.a.prototype.$http=o.a,new n.a({el:"#app",router:i.a,store:u.a,template:"",components:{App:s.a}})},TbOw:function(t,e,a){"use strict";function n(t){a("tGZN")}var s=a("1gRa"),i=a("bKzm"),r=a("VU/8"),c=n,o=r(s.a,i.a,!1,c,"data-v-9bb27894",null);e.a=o.exports},YaEn:function(t,e,a){"use strict";var n=a("7+uW"),s=a("/ocq"),i=a("dAjm");n.a.use(s.a),e.a=new s.a({routes:[{path:"/",name:"Index",component:i.a}]})},bKzm:function(t,e,a){"use strict";var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"repos"},[a("header",[a("a",{attrs:{href:t.href,target:"_blank"}},[t._v(t._s(t.name))]),t._v(" "),a("div",{staticClass:"language-container"},[a("i",{staticClass:"fa fa-circle",style:{color:t.color},attrs:{"aria-hidden":"true"}}),t._v(" "),a("span",[t._v(t._s(t.language))])]),t._v(" "),a("div",{staticClass:"star-container"},[a("i",{staticClass:"fa fa-star",attrs:{"aria-hidden":"true"}}),t._v(" "),a("span",[t._v(t._s(t.finalStar))])])]),t._v(" "),a("section",[a("p",[t._v(t._s(t.des))])])])},s=[],i={render:n,staticRenderFns:s};e.a=i},d5Va:function(t,e,a){"use strict";function n(t){a("0cWa")}var s=a("HSoB"),i=a("vAtM"),r=a("VU/8"),c=n,o=r(s.a,i.a,!1,c,"data-v-54ebc2c0",null);e.a=o.exports},dAjm:function(t,e,a){"use strict";function n(t){a("oh1l")}var s=a("MiD0"),i=a("ugie"),r=a("VU/8"),c=n,o=r(s.a,i.a,!1,c,"data-v-20da96e7",null);e.a=o.exports},jOvY:function(t,e){},"l+I4":function(t,e,a){"use strict";var n=a("7+uW"),s=a("NYxO");n.a.use(s.a);var i={init:!0,repos:[],users:[],active:"repos"},r={TOGGLE_INIT:function(t){t.init&&(t.init=!t.init)},UPDATE_REPOS:function(t,e){t.repos=e},UPDATE_USER:function(t,e){t.users=e},TOGGLE_ACTIVE:function(t,e){t.active=e}},c={toggleInit:function(t){t.commit("TOGGLE_INIT")},updateRepos:function(t,e){t.commit("UPDATE_REPOS",e)},updateUsers:function(t,e){t.commit("updateUsers",e)},toggleActive:function(t,e){t.commit("TOGGLE_ACTIVE",e)}};e.a=new s.a.Store({state:i,mutations:r,actions:c})},oh1l:function(t,e){},poMD:function(t,e,a){"use strict";var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{attrs:{id:"app"}},[a("router-view")],1)},s=[],i={render:n,staticRenderFns:s};e.a=i},tGZN:function(t,e){},ugie:function(t,e,a){"use strict";var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"github-app"},[a("i",{staticClass:"fa fa-github",attrs:{"aria-hidden":"true"}}),t._v(" "),a("SearchInput",{staticClass:"search"}),t._v(" "),t.init?t._e():a("ResultList",{staticClass:"datalist"})],1)},s=[],i={render:n,staticRenderFns:s};e.a=i},vAtM:function(t,e,a){"use strict";var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"datalist"},[a("header",[a("span",{staticClass:"repository",class:{selected:"repos"===t.active},on:{click:t.reposHandler}},[t._v("Repository")]),t._v(" "),a("span",{staticClass:"user",class:{selected:"user"===t.active},on:{click:t.userHandler}},[t._v("User")])]),t._v(" "),a("section",t._l(t.repos,function(t,e){return a("Repos",{key:e,attrs:{href:t.html_url,name:t.full_name,language:t.language,star:t.stargazers_count,des:t.description}})}))])},s=[],i={render:n,staticRenderFns:s};e.a=i},xJD8:function(t,e,a){"use strict";e.a={name:"app"}}},["NHnr"]); 2 | //# sourceMappingURL=app.04a1f3ce8696a893e1f4.js.map -------------------------------------------------------------------------------- /GithubSearchEngine/static/js/manifest.c77c5691d7443f0c25b5.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,a){for(var i,u,f,s=0,l=[];s -------------------------------------------------------------------------------- /HorizontalTimeline/imgs/pre.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /HorizontalTimeline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HorizontalTimeline 7 | 8 | 9 | 10 |
11 |
    12 | 13 |
  1. 14 |
    15 | 这是一个水平时间轴，它有有很多优点，容我一一道来。 16 |
    17 |
    2. 18 | 19 |
  2. 20 |
    21 | 响应式设计，在屏幕宽度低于 768px 的情况下，会变成垂直的时间轴。 22 |
    23 |
    3. 24 | 25 |
  3. 26 |
    27 | 支持左滑右滑操作，利用 Hammer.js 实现。 28 |
    29 |
    4. 30 | 31 |
  4. 32 |
    33 | 支持左右方向键，左方向键的键码为 37， 而右方向键为 39。 34 |
    35 |
    5. 36 | 37 |
  5. 38 |
    39 | 底下不用看了，因为都是复制的。 40 |
    41 |
    6. 42 | 43 |
  6. 44 |
    45 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 46 |
    47 |
    7. 48 | 49 |
  7. 50 |
    51 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 52 |
    53 |
    8. 54 | 55 |
  8. 56 |
    57 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 58 |
    59 |
    9. 60 | 61 |
  9. 62 |
    63 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 64 |
    65 |
    10. 66 | 67 |
  10. 68 |
    69 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 70 |
    71 |
    11. 72 | 73 |
  11. 74 |
    75 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 76 |
    77 |
    12. 78 | 79 |
  12. 80 |
    81 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 82 |
    83 |
    13. 84 | 85 |
  13. 86 |
    87 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 88 |
    89 |
    14. 90 | 91 |
  14. 92 |
    93 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 94 |
    95 |
    15. 96 | 97 |
  15. 98 |
    99 | Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi. 100 |
    101 |
    16. 102 |
  16. 103 |
104 |
105 | 108 | 109 | 112 |
113 |
114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /HorizontalTimeline/scripts/index.js: -------------------------------------------------------------------------------- 1 | const timeline = document.querySelector('.timeline ol'), 2 | elH = document.querySelectorAll('.timeline ol div'), 3 | arrows = document.querySelectorAll('.arrows .arrow'), 4 | arrowPrev = document.querySelector('.timeline .arrows .arrow-pre'), 5 | arrowNext = document.querySelector('.timeline .arrows .arrow-next'), 6 | firstItem = document.querySelector('.timeline li:first-child'), 7 | lastItem = document.querySelector('.timeline ol li:last-child'), 8 | xScrolling = 280, 9 | disabledClass = 'disabled'; 10 | 11 | window.addEventListener('load', init, false); 12 | 13 | function init() { 14 | setEqualHeight(elH); 15 | arrowPrev.disabled = true; 16 | animateTl(xScrolling, arrows, timeline); 17 | setSwipeFn(timeline, arrowPrev, arrowNext); 18 | setKeyboardFn(arrowPrev, arrowNext); 19 | } 20 | 21 | function setEqualHeight(el) { 22 | var largestHeight = (el[0] && el[0].offsetHeight) || 0, 23 | length = el.length; 24 | 25 | for(var i = 1; i < length; i++) { 26 | if (el[i].offsetHeight > largestHeight) { 27 | largestHeight = el[i].offsetHeight; 28 | } 29 | } 30 | 31 | for(var i = 0; i < length; i++) { 32 | el[i].style.height = largestHeight + 'px'; 33 | } 34 | } 35 | 36 | function animateTl(scrolling, el, tl) { 37 | for(var i = 0; i < el.length; i++) { 38 | var count = 0; 39 | el[i].addEventListener('click', function() { 40 | 41 | if (!arrowPrev.disabled) { 42 | arrowPrev.disabled = true; 43 | } 44 | 45 | if (!arrowNext.disabled) { 46 | arrowNext.disabled = true; 47 | } 48 | 49 | var sign = (this.classList.contains('arrow-pre')) ? "" : "-"; 50 | 51 | if (count === 0) { 52 | tl.style.transform = "translateX( -" + scrolling + 'px )'; 53 | } else { 54 | var tlStyle = getComputedStyle(tl), 55 | values = parseInt(tlStyle.getPropertyValue('transform').split(',')[4]) + 56 | parseInt(sign + scrolling); 57 | tl.style.transform = 'translateX(' + values + 'px )'; 58 | } 59 | count += 1; 60 | 61 | setTimeout(()=> { 62 | isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false); 63 | isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false); 64 | }, 1100); 65 | }, false); 66 | } 67 | } 68 | 69 | function isElementInViewport(el) { 70 | var rect = el.getBoundingClientRect(); 71 | return ( 72 | rect.top >= 0 && 73 | rect.left >= 0 && 74 | rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 75 | rect.right <= (window.innerWidth || document.documentElement.clientWidth) 76 | ); 77 | } 78 | 79 | function setBtnState(el, flag = true) { 80 | if (flag) { 81 | el.classList.add(disabledClass); 82 | } else { 83 | if (el.classList.contains(disabledClass)) { 84 | el.classList.remove(disabledClass); 85 | } 86 | el.disabled = false; 87 | } 88 | } 89 | 90 | function setSwipeFn(tl, prev, next) { 91 | const hammer = new Hammer(tl); 92 | hammer.on('swipeleft', ()=>{ next.click(); }); 93 | hammer.on('swiperight', ()=>{ prev.click(); }); 94 | } 95 | 96 | function setKeyboardFn(prev, next) { 97 | document.addEventListener('keydown', (e)=> { 98 | if (e.which === 37 || e.which === 39) { 99 | var timelineOffsetTop = timeline.offsetTop, 100 | y = window.pageYOffset; 101 | 102 | if (timelineOffsetTop !== y) { 103 | window.scrollTo(0, timelineOffsetTop); 104 | } 105 | 106 | if (e.which === 37) { 107 | prev.click(); 108 | } 109 | 110 | if (e.which === 39) { 111 | next.click(); 112 | } 113 | } 114 | }); 115 | } 116 | -------------------------------------------------------------------------------- /HorizontalTimeline/styles/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | background-color: #456990; 8 | line-height: 1.5; 9 | } 10 | ::selection { 11 | background-color: #456990; 12 | color: #fff; 13 | } 14 | .timeline { 15 | white-space: nowrap; 16 | overflow-x: hidden; 17 | } 18 | .timeline ol { 19 | font-size: 0; 20 | padding: 250px 0; 21 | width: 100vw; 22 | transition: all 1s; 23 | } 24 | .timeline ol li { 25 | position: relative; 26 | display: inline-block; 27 | width: 160px; 28 | height: 3px; 29 | list-style-type: none; 30 | background-color: #fff; 31 | } 32 | .timeline ol li:last-child { 33 | width: 280px; 34 | } 35 | .timeline ol li:not(:first-child) { 36 | margin-left: 14px; 37 | } 38 | .timeline ol li:not(:last-child)::after { 39 | content: ""; 40 | position: absolute; 41 | top: 50%; 42 | transform: translateY(-50%); 43 | left: calc(101%); 44 | width: 12px; 45 | height: 12px; 46 | border-radius: 50%; 47 | background-color: #F45B69; 48 | } 49 | .timeline ol li div { 50 | position: absolute; 51 | left: calc(107%); 52 | width: 280px; 53 | padding: 15px; 54 | font-size: 1rem; 55 | white-space: normal; 56 | color: #333; 57 | background-color: #fff; 58 | } 59 | .timeline ol li div::before { 60 | content: ''; 61 | position: absolute; 62 | top: 100%; 63 | left: 0; 64 | width: 0; 65 | height: 0; 66 | border-style: solid; 67 | } 68 | .timeline ol li:nth-child(odd) div { 69 | top: -16px; 70 | transform: translateY(-100%); 71 | } 72 | .timeline ol li:nth-child(odd) div::before { 73 | top: 100%; 74 | border-width: 8px 8px 0 0 ; 75 | border-color: #fff transparent transparent transparent; 76 | } 77 | .timeline ol li:nth-child(even) div { 78 | top: 16px; 79 | } 80 | .timeline ol li:nth-child(even) div::before { 81 | top: -8px; 82 | border-width: 0 8px 8px 0; 83 | border-color: transparent transparent #fff transparent; 84 | } 85 | .timeline div.arrows { 86 | display: flex; 87 | justify-content: center; 88 | margin-bottom: 20px; 89 | } 90 | .timeline div.arrows button { 91 | border: none; 92 | background-color: #F45B69; 93 | width: 48px; 94 | height: 48px; 95 | border-radius: 50%; 96 | outline: none; 97 | cursor: pointer; 98 | } 99 | .timeline div.arrows button.arrow-pre { 100 | margin-right: 20px; 101 | } 102 | .timeline div.arrows button.disabled { 103 | opacity: .5; 104 | } 105 | @media screen and (max-width: 768px) { 106 | .timeline ol { 107 | width: auto; 108 | padding: 0; 109 | transform: 0 !important; 110 | } 111 | .timeline ol li { 112 | width: auto; 113 | height: auto; 114 | display: block; 115 | background-color: transparent; 116 | } 117 | .timeline ol li:first-child { 118 | margin-top: 20px; 119 | } 120 | .timeline ol li:not(:first-child) { 121 | margin-left: auto; 122 | } 123 | .timeline ol li div { 124 | width: 94%; 125 | height: auto !important; 126 | margin: 0 auto 25px; 127 | position: static; 128 | } 129 | .timeline ol li:nth-child(odd) div { 130 | transform: none; 131 | } 132 | .timeline ol li:nth-child(odd) div::before, 133 | .timeline ol li:nth-child(even) div::before, 134 | .timeline ol li:not(:last-child)::after { 135 | display: none; 136 | } 137 | .timeline div.arrows { 138 | display: none; 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /HorizontalTimeline/styles/index.less: -------------------------------------------------------------------------------- 1 | @primary-bg-color: #456990; 2 | @circle-bg-color: #F45B69; 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | background-color: @primary-bg-color; 12 | line-height: 1.5; 13 | } 14 | 15 | ::selection { 16 | background-color: @primary-bg-color; 17 | color: #fff; 18 | } 19 | 20 | .timeline { 21 | white-space: nowrap; 22 | overflow-x: hidden; 23 | 24 | ol { 25 | font-size: 0; 26 | padding: 250px 0; 27 | width: 100vw; 28 | transition: all 1s; 29 | 30 | li { 31 | position: relative; 32 | display: inline-block; 33 | width: 160px; 34 | height: 3px; 35 | list-style-type: none; 36 | background-color: #fff; 37 | 38 | &:last-child { 39 | width: 280px; 40 | } 41 | 42 | &:not(:first-child) { 43 | margin-left: 14px; 44 | } 45 | 46 | &:not(:last-child)::after { 47 | content: ""; 48 | position: absolute; 49 | top: 50%; 50 | transform: translateY(-50%); 51 | left: calc(100% + 1px); 52 | width: 12px; 53 | height: 12px; 54 | border-radius: 50%; 55 | background-color: @circle-bg-color; 56 | } 57 | 58 | div { 59 | position: absolute; 60 | left: calc(100% + 7px); 61 | width: 280px; 62 | padding: 15px; 63 | font-size: 1rem; 64 | white-space: normal; 65 | color: #333; 66 | background-color: #fff; 67 | 68 | &::before { 69 | content: ''; 70 | position: absolute; 71 | top: 100%; 72 | left: 0; 73 | width: 0; 74 | height: 0; 75 | border-style: solid; 76 | } 77 | } 78 | 79 | &:nth-child(odd) div { 80 | top: -16px; 81 | transform: translateY(-100%); 82 | 83 | &::before { 84 | top: 100%; 85 | border-width: 8px 8px 0 0 ; 86 | border-color: #fff transparent transparent transparent; 87 | } 88 | } 89 | 90 | &:nth-child(even) div { 91 | top: 16px; 92 | 93 | &::before { 94 | top: -8px; 95 | border-width: 0 8px 8px 0; 96 | border-color: transparent transparent #fff transparent; 97 | } 98 | } 99 | } 100 | } 101 | 102 | div.arrows { 103 | display: flex; 104 | justify-content: center; 105 | margin-bottom: 20px; 106 | button { 107 | border: none; 108 | background-color: @circle-bg-color; 109 | width: 48px; 110 | height: 48px; 111 | border-radius: 50%; 112 | outline: none; 113 | cursor: pointer; 114 | 115 | &.arrow-pre { 116 | margin-right: 20px; 117 | } 118 | 119 | &.disabled { 120 | opacity: .5; 121 | } 122 | } 123 | } 124 | } 125 | 126 | @media screen and (max-width: 768px) { 127 | .timeline ol { 128 | width: auto; 129 | padding: 0; 130 | transform: 0 !important; 131 | 132 | li { 133 | width: auto; 134 | height: auto; 135 | display: block; 136 | background-color: transparent; 137 | 138 | &:first-child { 139 | margin-top: 20px; 140 | } 141 | 142 | &:not(:first-child) { 143 | margin-left: auto; 144 | } 145 | 146 | div { 147 | width: 94%; 148 | height: auto !important; 149 | margin: 0 auto 25px; 150 | position: static; 151 | } 152 | 153 | &:nth-child(odd) div { 154 | transform: none; 155 | } 156 | 157 | &:nth-child(odd) div::before, 158 | &:nth-child(even) div::before, 159 | &:not(:last-child)::after { 160 | display: none; 161 | } 162 | } 163 | } 164 | 165 | .timeline div.arrows { 166 | display: none; 167 | } 168 | } -------------------------------------------------------------------------------- /NotesApp/index.html: -------------------------------------------------------------------------------- 1 | 20171108
-------------------------------------------------------------------------------- /NotesApp/static/fonts/fontawesome-webfont.674f50d.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/NotesApp/static/fonts/fontawesome-webfont.674f50d.eot -------------------------------------------------------------------------------- /NotesApp/static/fonts/fontawesome-webfont.af7ae50.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/NotesApp/static/fonts/fontawesome-webfont.af7ae50.woff2 -------------------------------------------------------------------------------- /NotesApp/static/fonts/fontawesome-webfont.b06871f.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/NotesApp/static/fonts/fontawesome-webfont.b06871f.ttf -------------------------------------------------------------------------------- /NotesApp/static/fonts/fontawesome-webfont.fee66e7.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/NotesApp/static/fonts/fontawesome-webfont.fee66e7.woff -------------------------------------------------------------------------------- /NotesApp/static/js/app.1080b162e94a714b056a.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{"3SBE":function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"toolbar"},[n("i",{staticClass:"fa fa-plus-circle",attrs:{"aria-hidden":"true"},on:{click:t.addNote}}),t._v(" "),n("i",{staticClass:"fa fa-star",class:{favorite:t.activeNote.favorite},attrs:{"aria-hidden":"true"},on:{click:t.favNote}}),t._v(" "),n("i",{staticClass:"fa fa-trash",attrs:{"aria-hidden":"true"},on:{click:t.deleteNote}})])},i=[],o={render:a,staticRenderFns:i};e.a=o},"5W1q":function(t,e){},"8Rkc":function(t,e,n){"use strict";function a(t){n("IoEq")}var i=n("gK9a"),o=n("ziKd"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,"data-v-20caf1e3",null);e.a=r.exports},"9TXF":function(t,e,n){"use strict";function a(t){n("WptB")}var i=n("SH/e"),o=n("3SBE"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,"data-v-729a249e",null);e.a=r.exports},CVDQ:function(t,e){},DIyA:function(t,e){},IoEq:function(t,e){},M93x:function(t,e,n){"use strict";function a(t){n("CVDQ")}var i=n("xJD8"),o=n("QUHz"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,null,null);e.a=r.exports},MiD0:function(t,e,n){"use strict";var a=n("9TXF"),i=n("8Rkc"),o=n("cnC7");e.a={components:{Toolbar:a.a,NodeList:i.a,Editor:o.a}}},NHnr:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n("7+uW"),i=n("M93x"),o=n("YaEn"),c=n("l+I4"),s=n("5W1q");n.n(s);a.a.config.productionTip=!1,new a.a({el:"#app",router:o.a,store:c.a,template:"",components:{App:i.a}})},PAwP:function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement;return(t._self._c||e)("textarea",{staticClass:"editor",attrs:{disabled:t.isEmptyObject(t.activeNote)},domProps:{value:t.activeNote.text},on:{input:t.editNote}})},i=[],o={render:a,staticRenderFns:i};e.a=o},QUHz:function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("router-view")],1)},i=[],o={render:a,staticRenderFns:i};e.a=o},"SH/e":function(t,e,n){"use strict";var a=n("Dd8w"),i=n.n(a),o=n("NYxO");e.a={methods:{addNote:function(){this.$store.dispatch("addNote")},deleteNote:function(){this.$store.dispatch("deleteNote")},favNote:function(){this.$store.dispatch("toggleFavorite")}},computed:i()({},Object(o.b)(["activeNote"]))}},WptB:function(t,e){},YaEn:function(t,e,n){"use strict";var a=n("7+uW"),i=n("/ocq"),o=n("dAjm");a.a.use(i.a),e.a=new i.a({routes:[{path:"/",name:"Index",component:o.a}]})},cnC7:function(t,e,n){"use strict";function a(t){n("DIyA")}var i=n("xkVs"),o=n("PAwP"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,"data-v-e64704ca",null);e.a=r.exports},dAjm:function(t,e,n){"use strict";function a(t){n("hSgI")}var i=n("MiD0"),o=n("vJXo"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,"data-v-c0bf3fc6",null);e.a=r.exports},gK9a:function(t,e,n){"use strict";var a=n("Dd8w"),i=n.n(a),o=n("NYxO");e.a={computed:i()({},Object(o.b)(["notes","activeNote"]),{filterNotes:function(){return"favorite"===this.show?this.notes.filter(function(t){return t.favorite}):this.notes}}),methods:{updateActive:function(t){this.$store.dispatch("updateActiveNote",t)}},data:function(){return{show:"all"}}}},hSgI:function(t,e){},"l+I4":function(t,e,n){"use strict";var a=n("7+uW"),i=n("NYxO");a.a.use(i.a);var o={notes:[],activeNote:{}},c={ADD_NOTE:function(t){var e={text:"New note",favorite:!1};t.notes.push(e),t.activeNote=e},EDIT_NOTE:function(t,e){t.activeNote.text=e},DELETE_NOTE:function(t){var e=t.notes.indexOf(t.activeNote);t.notes.splice(e,1),t.notes.length>0?t.activeNote=t.notes[0]:t.activeNote={}},TOGGLE_FAVORITE:function(t){t.activeNote.favorite=!t.activeNote.favorite},SET_ACTIVE_NOTE:function(t,e){t.activeNote=e}},s={addNote:function(t){t.commit("ADD_NOTE")},editNote:function(t,e){t.commit("EDIT_NOTE",e)},deleteNote:function(t){t.commit("DELETE_NOTE")},toggleFavorite:function(t){t.commit("TOGGLE_FAVORITE")},updateActiveNote:function(t,e){t.commit("SET_ACTIVE_NOTE",e)}};e.a=new i.a.Store({state:o,mutations:c,actions:s})},vJXo:function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"note-app"},[n("Toolbar"),t._v(" "),n("NodeList"),t._v(" "),n("Editor")],1)},i=[],o={render:a,staticRenderFns:i};e.a=o},xJD8:function(t,e,n){"use strict";e.a={name:"app"}},xkVs:function(t,e,n){"use strict";var a=n("Dd8w"),i=n.n(a),o=n("NYxO");e.a={computed:i()({},Object(o.b)(["activeNote"])),methods:{isEmptyObject:function(t){for(var e in t)return!1;return!0},editNote:function(t){this.$store.dispatch("editNote",t.target.value)}}}},ziKd:function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"notelist"},[n("header",[n("p",{staticClass:"header-des"},[t._v("NOTES | GHF")]),t._v(" "),n("div",{staticClass:"btn-group"},[n("button",{class:{selected:"all"===t.show},on:{click:function(e){t.show="all"}}},[t._v("All Notes")]),t._v(" "),n("button",{class:{selected:"favorite"===t.show},on:{click:function(e){t.show="favorite"}}},[t._v("Favorite")])])]),t._v(" "),n("section",[n("ul",t._l(t.filterNotes,function(e,a){return n("li",{key:a,class:{selected:t.activeNote===e},on:{click:function(n){t.updateActive(e)}}},[t._v(t._s(e.text))])}))])])},i=[],o={render:a,staticRenderFns:i};e.a=o}},["NHnr"]); 2 | //# sourceMappingURL=app.1080b162e94a714b056a.js.map -------------------------------------------------------------------------------- /NotesApp/static/js/app.bfcb78925108a0419115.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{"3SBE":function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"toolbar"},[n("i",{staticClass:"fa fa-plus-circle",attrs:{"aria-hidden":"true"},on:{click:t.addNote}}),t._v(" "),n("i",{staticClass:"fa fa-star",class:{favorite:t.activeNote.favorite},attrs:{"aria-hidden":"true"},on:{click:t.favNote}}),t._v(" "),n("i",{staticClass:"fa fa-trash",attrs:{"aria-hidden":"true"},on:{click:t.deleteNote}})])},i=[],o={render:a,staticRenderFns:i};e.a=o},"5W1q":function(t,e){},"8Rkc":function(t,e,n){"use strict";function a(t){n("YDR8")}var i=n("gK9a"),o=n("ziKd"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,"data-v-20caf1e3",null);e.a=r.exports},"9TXF":function(t,e,n){"use strict";function a(t){n("bkat")}var i=n("SH/e"),o=n("3SBE"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,"data-v-729a249e",null);e.a=r.exports},"FM++":function(t,e){},M93x:function(t,e,n){"use strict";function a(t){n("evAj")}var i=n("xJD8"),o=n("QUHz"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,null,null);e.a=r.exports},MiD0:function(t,e,n){"use strict";var a=n("9TXF"),i=n("8Rkc"),o=n("cnC7");e.a={components:{Toolbar:a.a,NodeList:i.a,Editor:o.a}}},NHnr:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n("7+uW"),i=n("M93x"),o=n("YaEn"),c=n("l+I4"),s=n("5W1q");n.n(s);a.a.config.productionTip=!1,new a.a({el:"#app",router:o.a,store:c.a,template:"",components:{App:i.a}})},Oyse:function(t,e){},PAwP:function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement;return(t._self._c||e)("textarea",{staticClass:"editor",attrs:{disabled:t.isEmptyObject(t.activeNote)},domProps:{value:t.activeNote.text},on:{input:t.editNote}})},i=[],o={render:a,staticRenderFns:i};e.a=o},QUHz:function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("router-view")],1)},i=[],o={render:a,staticRenderFns:i};e.a=o},"SH/e":function(t,e,n){"use strict";var a=n("Dd8w"),i=n.n(a),o=n("NYxO");e.a={methods:{addNote:function(){this.$store.dispatch("addNote")},deleteNote:function(){this.$store.dispatch("deleteNote")},favNote:function(){this.$store.dispatch("toggleFavorite")}},computed:i()({},Object(o.b)(["activeNote"]))}},YDR8:function(t,e){},YaEn:function(t,e,n){"use strict";var a=n("7+uW"),i=n("/ocq"),o=n("dAjm");a.a.use(i.a),e.a=new i.a({routes:[{path:"/",name:"Index",component:o.a}]})},bkat:function(t,e){},cnC7:function(t,e,n){"use strict";function a(t){n("FM++")}var i=n("xkVs"),o=n("PAwP"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,"data-v-e64704ca",null);e.a=r.exports},dAjm:function(t,e,n){"use strict";function a(t){n("Oyse")}var i=n("MiD0"),o=n("vJXo"),c=n("VU/8"),s=a,r=c(i.a,o.a,!1,s,"data-v-c0bf3fc6",null);e.a=r.exports},evAj:function(t,e){},gK9a:function(t,e,n){"use strict";var a=n("Dd8w"),i=n.n(a),o=n("NYxO");e.a={computed:i()({},Object(o.b)(["notes","activeNote"]),{filterNotes:function(){return"favorite"===this.show?this.notes.filter(function(t){return t.favorite}):this.notes}}),methods:{updateActive:function(t){this.$store.dispatch("updateActiveNote",t)}},data:function(){return{show:"all"}}}},"l+I4":function(t,e,n){"use strict";var a=n("7+uW"),i=n("NYxO");a.a.use(i.a);var o={notes:[],activeNote:{}},c={ADD_NOTE:function(t){var e={text:"New note",favorite:!1};t.notes.push(e),t.activeNote=e},EDIT_NOTE:function(t,e){t.activeNote.text=e},DELETE_NOTE:function(t){var e=t.notes.indexOf(t.activeNote);t.notes.splice(e,1),t.notes.length>0?t.activeNote=t.notes[0]:t.activeNote={}},TOGGLE_FAVORITE:function(t){t.activeNote.favorite=!t.activeNote.favorite},SET_ACTIVE_NOTE:function(t,e){t.activeNote=e}},s={addNote:function(t){t.commit("ADD_NOTE")},editNote:function(t,e){t.commit("EDIT_NOTE",e)},deleteNote:function(t){t.commit("DELETE_NOTE")},toggleFavorite:function(t){t.commit("TOGGLE_FAVORITE")},updateActiveNote:function(t,e){t.commit("SET_ACTIVE_NOTE",e)}};e.a=new i.a.Store({state:o,mutations:c,actions:s})},vJXo:function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"note-app"},[n("Toolbar"),t._v(" "),n("NodeList"),t._v(" "),n("Editor")],1)},i=[],o={render:a,staticRenderFns:i};e.a=o},xJD8:function(t,e,n){"use strict";e.a={name:"app"}},xkVs:function(t,e,n){"use strict";var a=n("Dd8w"),i=n.n(a),o=n("NYxO");e.a={computed:i()({},Object(o.b)(["activeNote"])),methods:{isEmptyObject:function(t){for(var e in t)return!1;return!0},editNote:function(t){this.$store.dispatch("editNote",t.target.value)}}}},ziKd:function(t,e,n){"use strict";var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"notelist"},[n("header",[n("p",{staticClass:"header-des"},[t._v("NOTES | GHF")]),t._v(" "),n("div",{staticClass:"btn-group"},[n("button",{class:{selected:"all"===t.show},on:{click:function(e){t.show="all"}}},[t._v("All Notes")]),t._v(" "),n("button",{class:{selected:"favorite"===t.show},on:{click:function(e){t.show="favorite"}}},[t._v("Favorite")])])]),t._v(" "),n("section",[n("ul",t._l(t.filterNotes,function(e,a){return n("li",{key:a,class:{selected:t.activeNote===e},on:{click:function(n){t.updateActive(e)}}},[t._v(t._s(e.text))])}))])])},i=[],o={render:a,staticRenderFns:i};e.a=o}},["NHnr"]); 2 | //# sourceMappingURL=app.bfcb78925108a0419115.js.map -------------------------------------------------------------------------------- /NotesApp/static/js/manifest.2587c93be1645cc05390.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,a){for(var i,u,f,s=0,l=[];s 2 | 3 | 4 | 5 | 97 | 98 | 99 |
100 |

曲线阴影

101 |
102 | 103 |
104 |
105 |
106 |
107 |
108 | 109 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 目录中的项目都可以在我的 `Github` 中找到，下面给出各个项目的地址。 2 | 3 | 1. Canvas 滤镜： 在本项目的 CanvasClip 目录下 4 | 5 | 2. HTML5音乐播放器： https://github.com/hwaphon/HTML5MusicPlayer 6 | 7 | 3. HTML5便签小应用： https://github.com/hwaphon/Html5LocalStorage 8 | 9 | 3.1 HTML5便签小应用升级版： https://github.com/hwaphon/Html5LocalStorage 10 | 11 | 4. Canvas 绘制图案： https://github.com/hwaphon/Html5Canvas 12 | 13 | 5. 3D旋转演示：在本项目的 3dRotateDemo 目录下 14 | 15 | 6. 3D翻页效果: 在本项目的 3dPaging 目录下 16 | 17 | 7. hover 效果：在本项目的 TransitionDemo 目录下 18 | 19 | 8. 照片折叠效果: 在本项目的 TransitionDemo 目录下 20 | 21 | 9. 曲线阴影和翘边阴影：在本项目的 PhotoShadow 目录下（不过需要注意的是，父级设置了relative，子元素设置了absolute，且均设置了z-index属性值的时候，父级对子元素的层级有限制（即不论子元素z-index值大小，层级不“正常”显示）。如果将父级的层级设置为：z-index：auto，或者父级不设置z-index属性，则子元素的z-index不受父级限制，即正常显示。） 22 | 23 | 10. 贝塞尔曲线实现弹性效果： 在本项目的 TransitionDemo 目录下 24 | 25 | 11. 3D 旋转球形： 在本项目的 3dRotateDemo 目录下 26 | 27 | 12. 3D 旋转立方体： 在本项目的 3dRotateDemo 目录下 28 | 29 | 13. 自定义日历控件： 在本项目的 Calendar 目录下 30 | 31 | 14. Browse Happy: 在本项目的 browseHappy 目录下 32 | 33 | 15. 拼图游戏: 在本项目的 pintu 目录下 34 | 35 | 16. 垂直时间轴（响应式）: 在本项目的 VerticalTimeline 目录下，详情可查看博客 [Building a Vertical Timeline With CSS and a Touch of JavaScript](https://webdesign.tutsplus.com/tutorials/building-a-vertical-timeline-with-css-and-a-touch-of-javascript--cms-26528) 36 | 37 | 17. 水平时间轴(响应式+支持左滑右滑+支持左右方向键): 在本项目的 HorizontalTimeline 目录下。 38 | 39 | 18. 使用 `Vue` + `Vuex` 实现的 Notes App. 参考地址：[Learn Vuex by Building a Notes App](https://coligo.io/learn-vuex-by-building-notes-app/) 40 | 41 | 19. 使用 `Vue` + `Vuex` + `axios` 实现的一个简单的 `Github` 搜索引擎，用于搜索项目。[源码地址](https://github.com/hwaphon/GithubSearchEngine) 42 | 43 | 20. 简悦天气小程序，[源码地址](https://github.com/hwaphon/WXWeather) 44 | 45 | 21. mpvue 开发的 ZAKER 小程序，[源码地址](https://github.com/hwaphon/mpZAKER) 46 | 47 | 22. CSS 揭秘一书中各种例子的在线展示，[源码地址](https://github.com/hwaphon/cssSecretsDemo) 48 | 49 | 23. `Wepy` 开发的知乎日报小程序，[源码地址](https://github.com/hwaphon/wepy-zhihunews) 50 | 51 | 24. 合租 `TouchWeb`, [源码地址](https://github.com/hwaphon/Vue-Hezu) -------------------------------------------------------------------------------- /Secret/index.html: -------------------------------------------------------------------------------- 1 | 操作系统在线学习平台
-------------------------------------------------------------------------------- /Secret/static/fonts/element-icons.6f0a763.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/Secret/static/fonts/element-icons.6f0a763.ttf -------------------------------------------------------------------------------- /Secret/static/fonts/fontawesome-webfont.674f50d.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/Secret/static/fonts/fontawesome-webfont.674f50d.eot -------------------------------------------------------------------------------- /Secret/static/fonts/fontawesome-webfont.af7ae50.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/Secret/static/fonts/fontawesome-webfont.af7ae50.woff2 -------------------------------------------------------------------------------- /Secret/static/fonts/fontawesome-webfont.b06871f.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/Secret/static/fonts/fontawesome-webfont.b06871f.ttf -------------------------------------------------------------------------------- /Secret/static/fonts/fontawesome-webfont.fee66e7.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/Secret/static/fonts/fontawesome-webfont.fee66e7.woff -------------------------------------------------------------------------------- /Secret/static/js/manifest.117736c4022095c40c01.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,a,c){for(var i,u,f,s=0,l=[];s 2 | 3 | 4 | 5 | 113 | 114 | 115 |
116 | 117 | 118 | 119 | 120 | 121 |
122 | 123 | -------------------------------------------------------------------------------- /TransitionDemo/font/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/TransitionDemo/font/FontAwesome.otf -------------------------------------------------------------------------------- /TransitionDemo/font/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/TransitionDemo/font/fontawesome-webfont.eot -------------------------------------------------------------------------------- /TransitionDemo/font/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/TransitionDemo/font/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /TransitionDemo/font/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/TransitionDemo/font/fontawesome-webfont.woff -------------------------------------------------------------------------------- /TransitionDemo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 60 | 61 | 62 |
63 |
64 | Wild Night 65 |
66 |
67 |
68 | 69 | -------------------------------------------------------------------------------- /TransitionDemo/photo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 71 | 72 | 73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 | -------------------------------------------------------------------------------- /VerticalTimeline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | My New Pen! 9 | 10 | 11 | 12 | 13 |
14 |
    15 |
  • 16 |
    17 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 18 |
    19 |
    • 20 |
  • 21 |
    22 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 23 |
    24 |
    • 25 |
  • 26 |
    27 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 28 |
    29 |
    • 30 |
  • 31 |
    32 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 33 |
    34 |
    • 35 |
  • 36 |
    37 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 38 |
    39 |
    • 40 |
  • 41 |
    42 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 43 |
    44 |
    • 45 |
  • 46 |
    47 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 48 |
    49 |
    • 50 |
  • 51 |
    52 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 53 |
    54 |
    • 55 |
  • 56 |
    57 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 58 |
    59 |
    • 60 |
61 |
62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /VerticalTimeline/scripts/index.js: -------------------------------------------------------------------------------- 1 | function isElementInViewport(el) { 2 | var rect = el.getBoundingClientRect(); 3 | return ( 4 | rect.top >= 0 && 5 | rect.left >= 0 && 6 | rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 7 | rect.right <= (window.innerWidth || document.documentElement.clientWidth) 8 | ); 9 | } 10 | 11 | var items = document.querySelectorAll('.timeline li'); 12 | function callbackFunc() { 13 | var length = items.length; 14 | for(var i = 0; i < length; i++) { 15 | if(isElementInViewport(items[i])) { 16 | items[i].classList.add('in-view'); 17 | } 18 | } 19 | } 20 | 21 | window.addEventListener('load', callbackFunc); 22 | window.addEventListener('scroll', callbackFunc); -------------------------------------------------------------------------------- /VerticalTimeline/styles/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | font-family: sans-serif; 8 | line-height: 1.5; 9 | background-color: #456990; 10 | color: #fff; 11 | } 12 | .timeline ul { 13 | padding-bottom: 24px; 14 | } 15 | .timeline ul li { 16 | list-style: none; 17 | position: relative; 18 | padding-top: 50px; 19 | width: 6px; 20 | margin: 0 auto; 21 | background-color: #fff; 22 | } 23 | .timeline ul li::after { 24 | content: ""; 25 | position: absolute; 26 | left: 50%; 27 | bottom: 0; 28 | transform: translateX(-50%); 29 | width: 30px; 30 | height: 30px; 31 | background-color: #fff; 32 | border-radius: 50%; 33 | } 34 | .timeline ul li.in-view::after { 35 | background-color: #F45B69; 36 | transition: background-color 0.5s ease-in-out; 37 | } 38 | .timeline ul li div { 39 | position: relative; 40 | width: 400px; 41 | padding: 15px; 42 | background-color: #F45B69; 43 | bottom: 0; 44 | visibility: hidden; 45 | opacity: 0; 46 | transition: all 0.5s ease-in-out; 47 | } 48 | .timeline ul li div::before { 49 | content: ""; 50 | position: absolute; 51 | bottom: 7px; 52 | width: 0; 53 | height: 0; 54 | border-style: solid; 55 | } 56 | .timeline ul li:nth-child(odd) div { 57 | left: 45px; 58 | transform: translateX(200px); 59 | } 60 | .timeline ul li:nth-child(odd) div::before { 61 | left: -15px; 62 | border-width: 8px 16px 8px 0; 63 | border-color: transparent #F45B69 transparent transparent; 64 | } 65 | .timeline ul li:nth-child(even) div { 66 | left: -439px; 67 | transform: translateX(-200px); 68 | } 69 | .timeline ul li:nth-child(even) div::before { 70 | right: -15px; 71 | border-width: 8px 0 8px 16px; 72 | border-color: transparent transparent transparent #F45B69; 73 | } 74 | .timeline ul li.in-view div { 75 | transform: none; 76 | visibility: visible; 77 | opacity: 1; 78 | } 79 | @media screen and (max-width: 1000px) { 80 | .timeline ul li div { 81 | width: 250px; 82 | } 83 | .timeline ul li:nth-child(even) div { 84 | left: -289px; 85 | } 86 | } 87 | @media screen and (max-width: 675px) { 88 | .timeline ul li { 89 | margin-left: 48px; 90 | } 91 | .timeline ul li:nth-child(even) div, 92 | .timeline ul li:nth-child(odd) div { 93 | left: 45px; 94 | } 95 | .timeline ul li:nth-child(even) div::before, 96 | .timeline ul li:nth-child(odd) div::before { 97 | left: -15px; 98 | border-width: 8px 16px 8px 0; 99 | border-color: transparent #F45B69 transparent transparent; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /VerticalTimeline/styles/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: sans-serif; 9 | line-height: 1.5; 10 | background-color: #456990; 11 | color: #fff; 12 | } 13 | 14 | .timeline { 15 | ul { 16 | padding-bottom: 24px; 17 | li { 18 | list-style: none; 19 | position: relative; 20 | padding-top: 50px; 21 | width: 6px; 22 | margin: 0 auto; 23 | background-color: #fff; 24 | 25 | &::after { 26 | content: ""; 27 | position: absolute; 28 | left: 50%; 29 | bottom: 0; 30 | transform: translateX(-50%); 31 | width: 30px; 32 | height: 30px; 33 | background-color: #fff; 34 | border-radius: 50%; 35 | } 36 | &.in-view::after { 37 | background-color: #F45B69; 38 | transition: background-color .5s ease-in-out; 39 | } 40 | 41 | 42 | div { 43 | position: relative; 44 | width: 400px; 45 | padding: 15px; 46 | background-color: #F45B69; 47 | bottom: 0; 48 | visibility: hidden; 49 | opacity: 0; 50 | transition: all .5s ease-in-out; 51 | 52 | &::before { 53 | content: ""; 54 | position: absolute; 55 | bottom: 7px; 56 | width: 0; 57 | height: 0; 58 | border-style: solid; 59 | } 60 | } 61 | &:nth-child(odd) div { 62 | left: 45px; 63 | transform: translateX(200px); 64 | 65 | &::before { 66 | left: -15px; 67 | border-width: 8px 16px 8px 0; 68 | border-color: transparent #F45B69 transparent transparent; 69 | } 70 | } 71 | &:nth-child(even) div { 72 | left: -439px; 73 | transform: translateX(-200px); 74 | &::before { 75 | right: -15px; 76 | border-width: 8px 0 8px 16px; 77 | border-color: transparent transparent transparent #F45B69; 78 | } 79 | } 80 | &.in-view div { 81 | transform: none; 82 | visibility: visible; 83 | opacity: 1; 84 | } 85 | } 86 | } 87 | } 88 | 89 | @media screen and(max-width:1000px) { 90 | .timeline ul li div { 91 | width: 250px; 92 | } 93 | 94 | .timeline ul li:nth-child(even) div { 95 | left: -289px; 96 | } 97 | } 98 | 99 | @media screen and (max-width: 675px) { 100 | .timeline ul li { 101 | margin-left: 48px; 102 | 103 | &:nth-child(even) div, &:nth-child(odd) div{ 104 | left: 45px; 105 | 106 | &::before { 107 | left: -15px; 108 | border-width: 8px 16px 8px 0; 109 | border-color: transparent #F45B69 transparent transparent; 110 | } 111 | } 112 | } 113 | } -------------------------------------------------------------------------------- /aside.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/aside.png -------------------------------------------------------------------------------- /browseHappy/css/style.css: -------------------------------------------------------------------------------- 1 | /**************************** 2 | * 基本样式 3 | ****************************/ 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | html, 10 | body { 11 | height: 100%; 12 | font-family: sans-serif; 13 | background-image: url("../imgs/bg.jpg"); 14 | } 15 | /**************************** 16 | * 头部样式 17 | ****************************/ 18 | #header { 19 | background-image: url("../imgs/bg-header.png"); 20 | background-repeat: repeat-x; 21 | background-position: left bottom; 22 | padding: 70px 0; 23 | text-align: center; 24 | } 25 | #header h1 { 26 | font: 800%/1 Impact, Helvetica, sans-serif; 27 | color: #324b4b; 28 | text-transform: uppercase; 29 | } 30 | #header h1 span { 31 | color: #f0d200; 32 | } 33 | #header p { 34 | color: #ffffff; 35 | font-size: 20px; 36 | } 37 | #header p em { 38 | font-weight: bold; 39 | } 40 | /**************************** 41 | * 主体样式 42 | ****************************/ 43 | #main { 44 | display: flex; 45 | flex-flow: row wrap; 46 | padding: 32px 5%; 47 | } 48 | #main .item { 49 | flex: 0 0 192px; 50 | text-align: center; 51 | padding-top: 32px; 52 | transition: transform .3s; 53 | margin-bottom: 16px; 54 | } 55 | #main .item header { 56 | padding: 8px; 57 | } 58 | #main .item header .icon { 59 | width: 125px; 60 | height: 135px; 61 | background-image: url("../imgs/browsehappy-sprite.png"); 62 | margin: 0 auto; 63 | } 64 | #main .item header h2 { 65 | margin-top: 16px; 66 | color: #dc3228; 67 | font: 110% / 1 Impact, Helvetica, sans-serif; 68 | background-color: rgba(255, 255, 255, 0.4); 69 | line-height: 32px; 70 | text-transform: uppercase; 71 | border-radius: 4px; 72 | -webkit-border-radius: 4px; 73 | } 74 | #main .item > p { 75 | height: 80px; 76 | padding: 8px; 77 | } 78 | #main .item p, 79 | #main .item footer p { 80 | margin-top: 8px; 81 | font-size: 13px; 82 | color: #324b4b; 83 | text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7); 84 | } 85 | #main .item footer { 86 | margin-top: 16px; 87 | padding: 8px; 88 | } 89 | #main .item a { 90 | display: inline-block; 91 | width: 100%; 92 | border: none; 93 | background-color: rgba(255, 255, 255, 0.3); 94 | line-height: 24px; 95 | color: #324b4b; 96 | font-size: 12px; 97 | text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7); 98 | margin-top: 8px; 99 | text-decoration: none; 100 | border-radius: 2px; 101 | -webkit-border-radius: 2px; 102 | } 103 | #main .item:hover { 104 | background-color: rgba(255, 255, 255, 0.3); 105 | transform: scale(1.05); 106 | } 107 | #main .item:hover a { 108 | background-color: #1E8585; 109 | color: #fff; 110 | text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.7); 111 | } 112 | #main .item:first-child .icon { 113 | background-position: 0 0; 114 | } 115 | #main .item:nth-child(2) .icon { 116 | background-position: -125px 0; 117 | } 118 | #main .item:nth-child(3) .icon { 119 | background-position: -375px 0; 120 | } 121 | #main .item:nth-child(4) .icon { 122 | background-position: -250px 0; 123 | } 124 | #main .item:nth-child(5) .icon { 125 | background-position: -625px 0; 126 | } 127 | #main .item:nth-child(6) .icon { 128 | background-position: -500px 0; 129 | } 130 | /**************************** 131 | * 页脚样式 132 | ****************************/ 133 | #footer { 134 | padding: 70px 0; 135 | background-image: url("../imgs/bg-footer.png"); 136 | background-position: left top; 137 | background-repeat: repeat-x; 138 | text-align: center; 139 | } 140 | #footer h2 { 141 | color: #f0d200; 142 | font-size: 18px; 143 | } 144 | #footer p { 145 | color: #fff; 146 | font-size: 12px; 147 | margin-top: 12px; 148 | } 149 | #footer .author { 150 | font-size: 18px; 151 | font-weight: bold; 152 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); 153 | } 154 | -------------------------------------------------------------------------------- /browseHappy/css/style.less: -------------------------------------------------------------------------------- 1 | /**************************** 2 | * 基本样式 3 | ****************************/ 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | html, body { 12 | height: 100%; 13 | font-family: sans-serif; 14 | background-image: url("../imgs/bg.jpg"); 15 | } 16 | 17 | .border-radius(@radius: 4px) { 18 | border-radius: @radius; 19 | -webkit-border-radius: @radius; 20 | } 21 | 22 | /**************************** 23 | * 头部样式 24 | ****************************/ 25 | #header { 26 | @h1-color: #324B4B; 27 | @h1-span-color: #F0D200; 28 | @p-color: #fff; 29 | 30 | background-image: url("../imgs/bg-header.png"); 31 | background-repeat: repeat-x; 32 | background-position: left bottom; 33 | padding: 70px 0; 34 | text-align: center; 35 | 36 | h1 { 37 | font: 800%/1 Impact, Helvetica, sans-serif; 38 | color: @h1-color; 39 | text-transform: uppercase; 40 | 41 | span { 42 | color: @h1-span-color; 43 | } 44 | } 45 | 46 | p { 47 | color: @p-color; 48 | font-size: 20px; 49 | 50 | em { 51 | font-weight: bold; 52 | } 53 | } 54 | } 55 | 56 | /**************************** 57 | * 主体样式 58 | ****************************/ 59 | 60 | #main { 61 | @element-space: 16px; 62 | @h2-color: #DC3228; 63 | 64 | display: flex; 65 | flex-flow: row wrap; 66 | padding: @element-space*2 5%; 67 | 68 | .item { 69 | flex: 0 0 192px; 70 | text-align: center; 71 | padding-top: @element-space * 2; 72 | transition: transform .3s; 73 | margin-bottom: @element-space; 74 | 75 | header { 76 | 77 | padding: @element-space / 2; 78 | 79 | .icon { 80 | width: 125px; 81 | height: 135px; 82 | background-image: url("../imgs/browsehappy-sprite.png"); 83 | margin: 0 auto; 84 | } 85 | 86 | h2 { 87 | margin-top: @element-space; 88 | color: @h2-color; 89 | font: 110% /1 Impact, Helvetica, sans-serif; 90 | background-color: rgba(255, 255, 255, 0.4); 91 | line-height: 32px; 92 | text-transform: uppercase; 93 | .border-radius; 94 | } 95 | } 96 | 97 | & > p { 98 | height: @element-space *5; 99 | padding: @element-space / 2; 100 | } 101 | 102 | p, footer p { 103 | margin-top: @element-space / 2; 104 | font-size: 13px; 105 | color: rgb(50, 75, 75); 106 | text-shadow: 1px 1px 1px rgba(255,255,255, .7); 107 | } 108 | 109 | footer { 110 | margin-top: @element-space; 111 | padding: @element-space / 2; 112 | } 113 | 114 | a { 115 | display: inline-block; 116 | width: 100%; 117 | border: none; 118 | background-color: rgba(255, 255, 255, 0.3); 119 | line-height: 24px; 120 | color: rgb(50, 75, 75); 121 | font-size: 12px; 122 | text-shadow: 1px 1px 1px rgba(255,255,255, .7); 123 | margin-top: @element-space / 2; 124 | text-decoration: none; 125 | .border-radius(2px); 126 | } 127 | 128 | &:hover { 129 | background-color: rgba(255, 255, 255, 0.3); 130 | transform: scale(1.05); 131 | } 132 | 133 | &:hover a { 134 | background-color: #1E8585; 135 | color: #fff; 136 | text-shadow: -1px -1px 1px rgba(0, 0,0, .7); 137 | } 138 | } 139 | 140 | .item:first-child { 141 | .icon { 142 | background-position: 0 0; 143 | } 144 | } 145 | 146 | .item:nth-child(2) { 147 | .icon { 148 | background-position: -125px 0; 149 | } 150 | } 151 | 152 | .item:nth-child(3) { 153 | .icon { 154 | background-position: -375px 0; 155 | } 156 | } 157 | 158 | .item:nth-child(4) { 159 | .icon { 160 | background-position: -250px 0; 161 | } 162 | } 163 | 164 | .item:nth-child(5) { 165 | .icon { 166 | background-position: -625px 0; 167 | } 168 | } 169 | 170 | .item:nth-child(6) { 171 | .icon { 172 | background-position: -500px 0; 173 | } 174 | } 175 | } 176 | 177 | /**************************** 178 | * 页脚样式 179 | ****************************/ 180 | 181 | #footer { 182 | @footer-padding-tb: 70px; 183 | @footer-h2-color: #F0D200; 184 | 185 | padding: @footer-padding-tb 0; 186 | background-image: url("../imgs/bg-footer.png"); 187 | background-position: left top; 188 | background-repeat: repeat-x; 189 | text-align: center; 190 | 191 | h2 { 192 | color: @footer-h2-color; 193 | font-size: 18px; 194 | } 195 | 196 | p { 197 | color: #fff; 198 | font-size: 12px; 199 | margin-top: 12px; 200 | } 201 | 202 | .author { 203 | font-size: 18px; 204 | font-weight: bold; 205 | text-shadow: 1px 1px 1px rgba(0, 0, 0, .7); 206 | } 207 | } 208 | 209 | 210 | -------------------------------------------------------------------------------- /browseHappy/imgs/bg-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/browseHappy/imgs/bg-footer.png -------------------------------------------------------------------------------- /browseHappy/imgs/bg-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/browseHappy/imgs/bg-header.png -------------------------------------------------------------------------------- /browseHappy/imgs/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/browseHappy/imgs/bg.jpg -------------------------------------------------------------------------------- /browseHappy/imgs/browsehappy-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/browseHappy/imgs/browsehappy-sprite.png -------------------------------------------------------------------------------- /browseHappy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 |
13 |
14 |
15 |
16 |

17 | Google Chrome 18 |

19 |
20 | 21 |

“谷歌全新推出的高速浏览器”

22 | 23 | 27 |
28 | 29 |
30 |
31 |
32 |

33 | mozilla firefox 34 |

35 |
36 | 37 |

"Firefox 注重你的信息安全。汇聚各种全新特性，给你更好的上网体验。"

38 | 39 | 43 |
44 | 45 |
46 |
47 |
48 |

49 | safari 50 |

51 |
52 | 53 |

"Safari 是苹果公司充满创新设计的产品，可用于 Mac 和 Windows。"

54 | 55 | 59 |
60 | 61 |
62 |
63 |
64 |

65 | opera 66 |

67 |
68 | 69 |

"地球上最强大的浏览器。安全。强大。易用。免费。"

70 | 71 | 75 |
76 | 77 |
78 |
79 |
80 |

81 | microsoft edge 82 |

83 |
84 | 85 |

"The faster, safer browser designed for Windows 10."

86 | 87 | 91 |
92 | 93 |
94 |
95 |
96 |

97 | internet explore 98 |

99 |
100 | 101 |

"来自微软公司的免费浏览器。全新特性帮你控制个人隐私。"

102 | 103 | 107 |
108 |
109 |
110 |

什么是“BROWSE HAPPY”？

111 |

使用老旧浏览器会对您的计算机安全造成威胁。用户可以使用 Browse Happy 来了解主流浏览器，及其版本信息。

112 | 113 |

©高华峰

114 |
115 | 116 | -------------------------------------------------------------------------------- /btnHover/index.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | position: relative; 3 | appearance: none; 4 | background: #f72359; 5 | padding: 1em 2em; 6 | border: none; 7 | color: white; 8 | font-size: 1.2em; 9 | cursor: pointer; 10 | outline: none; 11 | overflow: hidden; 12 | border-radius: 100px; 13 | } 14 | 15 | .btn::before { 16 | --size: 0; 17 | content: ''; 18 | position: absolute; 19 | left: var(--x); 20 | top: var(--y); 21 | width: var(--size); 22 | height: var(--size); 23 | background: radial-gradient(circle closest-side, #4405f7, transparent); 24 | transform: translate(-50%, -50%); 25 | transition: width .2s ease, height .2s ease; 26 | } 27 | 28 | .btn::before:hover { 29 | --size: 400px; 30 | } 31 | 32 | span { 33 | position: relative; 34 | } -------------------------------------------------------------------------------- /btnHover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 鼠标悬浮炫酷效果 6 | 7 | 8 | 9 |
10 | 13 |
14 | 23 | 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /pintu/app.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | 3 | var startButton = document.getElementById('start'); 4 | startButton.addEventListener('click', startHandler, false); 5 | 6 | var timeDisplay = document.getElementById('time'); 7 | 8 | var times = 0, clockTimeId; 9 | 10 | function startHandler() { 11 | clockTimeId = setTimeout(function start() { 12 | times++; 13 | timeDisplay.innerHTML = getClockText(Math.floor(times / 60), times % 60); 14 | clockTimeId = setTimeout(start, 1000); 15 | }, 1000); 16 | } 17 | 18 | var resetButton = document.getElementById('reset'); 19 | resetButton.addEventListener('click', function() { 20 | clearTimeout(clockTimeId); 21 | timeDisplay.innerHTML = getClockText(0,0); 22 | times = 0; 23 | startRandom(); 24 | }, false); 25 | 26 | function getClockText(minutes, seconds) { 27 | 28 | var minutes = minutes >= 10 ? minutes : '0' + minutes, 29 | seconds = seconds >= 10 ? seconds : '0' + seconds; 30 | 31 | return minutes + ':' + seconds; 32 | } 33 | 34 | var direct = [ 35 | [0], 36 | [2, 4], 37 | [1, 3, 5], 38 | [2, 6], 39 | [1, 5, 7], 40 | [2, 4, 6, 8], 41 | [3, 5, 9], 42 | [4, 8], 43 | [7, 9, 5], 44 | [8, 6] 45 | ]; 46 | 47 | var posXY = [ 48 | [0], 49 | [0, 0], 50 | [160, 0], 51 | [320, 0], 52 | [0, 160], 53 | [160, 160], 54 | [320, 160], 55 | [0, 320], 56 | [160, 320], 57 | [320, 320] 58 | ]; 59 | 60 | var nowPos = []; 61 | startRandom(); 62 | 63 | var gameElement = document.getElementById('gameContainer'); 64 | gameElement.addEventListener('click', function(event) { 65 | var target_id = parseInt(event.target.id.toString().replace('d', '')); 66 | 67 | if (target_id !== 9) { 68 | canMove(target_id); 69 | } 70 | }, false); 71 | 72 | 73 | function canMove(id) { 74 | var xIndex = nowPos.indexOf(9); 75 | var yIndex = nowPos.indexOf(id); 76 | 77 | if (!!~direct[yIndex].indexOf(xIndex)) { 78 | move(xIndex, yIndex, 9, id); 79 | if(check()) { 80 | timeDisplay.innerHTML = '你在用时 ' + getClockText(times / 60, times % 60) + ' 后获胜。'; 81 | } 82 | } 83 | } 84 | 85 | function move(xIndex, yIndex, xValue, yValue) { 86 | nowPos[xIndex] = yValue; 87 | nowPos[yIndex] = xValue; 88 | 89 | document.getElementById('d' + xValue).style.left = posXY[yIndex][0] + 'px'; 90 | document.getElementById('d' + xValue).style.top = posXY[yIndex][1] + 'px'; 91 | 92 | document.getElementById('d' + yValue).style.left = posXY[xIndex][0] + 'px'; 93 | document.getElementById('d' + yValue).style.top = posXY[xIndex][1] + 'px'; 94 | } 95 | 96 | function check() { 97 | var result = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 98 | 99 | var flag = true; 100 | 101 | result.forEach(function(value, index) { 102 | if (value !== nowPos[index]) { 103 | flag = false; 104 | } 105 | }); 106 | 107 | return flag; 108 | } 109 | 110 | function startRandom() { 111 | 112 | nowPos = []; 113 | for(var i = 0; i < 9; i++) { 114 | nowPos.push(i + 1); 115 | } 116 | nowPos.sort(function() { 117 | return Math.random() - 0.5; 118 | }); 119 | 120 | nowPos.unshift(0); 121 | 122 | for(var i = 1; i <= 9; i++) { 123 | document.getElementById('d' + nowPos[i]).style.left = posXY[i][0] + 'px'; 124 | document.getElementById('d' + nowPos[i]).style.top = posXY[i][1] + 'px'; 125 | } 126 | } 127 | }; -------------------------------------------------------------------------------- /pintu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pintu 7 | 8 | 9 | 10 |
11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
22 |
23 | 24 |
25 |

用时 00:00

26 |

27 |
28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /pintu/style.css: -------------------------------------------------------------------------------- 1 | *,*::before,*::after { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | width: 480px; 9 | margin: 24px auto; 10 | text-align: center; 11 | } 12 | 13 | .game { 14 | width: 480px; 15 | height: 480px; 16 | background-color: #fff; 17 | margin-bottom: 24px; 18 | position: relative; 19 | } 20 | 21 | div.item { 22 | position: absolute; 23 | width: 160px; 24 | height: 160px; 25 | background-color: #22C7A9; 26 | border: 2px solid #fff; 27 | color: #fff; 28 | line-height: 160px; 29 | font-size: 28px; 30 | font-weight: bold; 31 | transition: all .3s; 32 | } 33 | 34 | div#d1 { 35 | top: 0; 36 | left: 0; 37 | } 38 | 39 | div#d2 { 40 | top: 0; 41 | left: 160px; 42 | } 43 | 44 | div#d3 { 45 | top: 0; 46 | left: 320px; 47 | } 48 | 49 | div#d4 { 50 | top: 160px; 51 | left: 0; 52 | } 53 | 54 | div#d5 { 55 | top: 160px; 56 | left: 160px; 57 | } 58 | 59 | div#d6 { 60 | top: 160px; 61 | left: 320px; 62 | } 63 | 64 | div#d7 { 65 | top: 320px; 66 | left: 0; 67 | } 68 | 69 | div#d8 { 70 | top: 320px; 71 | left: 160px; 72 | } 73 | 74 | div#d9 { 75 | top: 320px; 76 | left: 320px; 77 | background-color: #FCCF4D; 78 | } 79 | 80 | button { 81 | outline: none; 82 | border: none; 83 | background-color: #FCA180; 84 | padding: 8px 24px; 85 | color: #fff; 86 | border-radius: 4px; 87 | cursor: pointer; 88 | margin-top: 8px; 89 | } 90 | 91 | button:hover { 92 | background-color: #F56262; 93 | } 94 | 95 | button#start { 96 | margin-right: 12px; 97 | } 98 | 99 | ::selection { 100 | background-color: transparent; 101 | } -------------------------------------------------------------------------------- /smile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hwaphon/WebProject/828723987f35f93138ef51ba08d58a487d4d029a/smile.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: hwaphon 3 | * @Date: 2017-04-12 16:30:56 4 | * @Last Modified by: hwaphon 5 | * @Last Modified time: 2017-04-15 10:05:57 6 | */ 7 | *, 8 | *::before, 9 | *::after { 10 | box-sizing: border-box; 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | html, 16 | body { 17 | height: 100%; 18 | } 19 | 20 | body { 21 | background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); 22 | background-attachment: fixed; 23 | } 24 | 25 | ul { 26 | position: relative; 27 | 28 | width: 480px; 29 | margin: 24px auto; 30 | 31 | list-style: none; 32 | text-align: center; 33 | } 34 | 35 | li { 36 | font-size: 18px; 37 | line-height: 48px; 38 | 39 | position: relative; 40 | 41 | height: 48px; 42 | margin-bottom: 8px; 43 | padding: 0 18px; 44 | 45 | cursor: pointer; 46 | 47 | border-radius: 8px; 48 | background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); 49 | } 50 | 51 | li::after { 52 | position: absolute; 53 | top: 50%; 54 | right: 18px; 55 | 56 | width: 18px; 57 | height: 18px; 58 | 59 | content: ''; 60 | transform: translateY(-50%); 61 | 62 | background-image: url('smile.png'); 63 | } 64 | 65 | li a { 66 | font-family: 'Timmana', sans-serif; 67 | 68 | position: relative; 69 | 70 | padding-bottom: 4px; 71 | 72 | cursor: pointer; 73 | text-decoration: none; 74 | 75 | color: #fff; 76 | outline: none; 77 | } 78 | 79 | li::before { 80 | position: absolute; 81 | top: 50%; 82 | right: 100%; 83 | 84 | width: 24px; 85 | height: 24px; 86 | 87 | content: ''; 88 | transform: translateY(-50%); 89 | 90 | border: 8px solid #4facfe; 91 | border-radius: 50%; 92 | background-color: transparent; 93 | box-shadow: 0 0 2px rgba(0,0,0,.6) inset; 94 | } 95 | 96 | li a::after { 97 | position: absolute; 98 | bottom: 6px; 99 | left: 100%; 100 | 101 | width: 100%; 102 | height: 2px; 103 | 104 | content: ''; 105 | transition: all .2s ease-out; 106 | 107 | background-color: rgba(255,255,255,0); 108 | } 109 | 110 | li a:hover::after { 111 | left: 0; 112 | 113 | background-color: rgba(255,255,255,1); 114 | } 115 | 116 | .bg { 117 | position: fixed; 118 | 119 | width: 128px; 120 | height: 128px; 121 | } 122 | 123 | #right-bg { 124 | right: 48px; 125 | bottom: 48px; 126 | 127 | background-image: url('aside.png'); 128 | } 129 | 130 | @media screen and (max-width: 800px) { 131 | ul { 132 | width: 61.8%; 133 | } 134 | 135 | #right-bg { 136 | display: none; 137 | } 138 | } -------------------------------------------------------------------------------- /实现细节记录.md: -------------------------------------------------------------------------------- 1 | ## 10. 贝塞尔曲线实现弹性效果 2 | 3 | 可以在 cubic-bezier.com 中生成三次贝塞尔函数中的参数。 在使用动画效果的时候需要注意一个很重要的属性，也就是 `animation-fill-mode`，这一属性规定了元素在动画时间以外的状态。有以下三个参数可选。 4 | 5 | - forwards - 表示动画完成后保留最后一个关键帧中的属性值 6 | - backwards - 表示动画延迟之前就应用第一个关键帧的属性值 7 | - both - 同时包含 `forwards` 和 `backwards` 两种设置 8 | 9 | #### classList 属性 10 | HTML5 新增了一种操作类名的方式，那就是为所有元素添加 `classList` 属性，利用这个属性我们可以方便的给一个元素添加或者移除类，下面来看看常用的四个方法。 11 | 12 | - add(value) - 将给定的字符串值添加到列表中。若已存在，就不添加了 13 | - contains(value) - 表示列表中是否存在给定的值，如果存在则返回 `true`， 否则返回 `false` 14 | - remove(value) - 从列表中删除给定的字符串 15 | - toggle(value) - 如果列表中已经存在了给定的值，删除它；如果列表中没有给定的值，添加它。 16 | 17 | 比如，我想给 `div#test` 添加一个 `move` 类，可以在 `JavaScript` 中使用下面的代码 : 18 | 19 | var element = document.getElementById("test"); 20 | element.classList.add("move"); 21 | 22 | 23 | ## 13. 自定义日历控件 24 | 25 | `new Date().getMonth()` 返回的值在 `[0, 11]` 之间， 0 代表一月。 26 | 27 | `new Date().getDay()` 返回的值在 `[0, 6]` 之间，0 代表星期天。 28 | 29 | --------------------------------------------------------------------------------