contentPreload

├── .gitignore ├── README.md ├── _config.yml ├── components ├── contentPreload │ └── index.html ├── imagePreload │ └── index.html ├── scrollToTop │ ├── goTop.png │ └── index.html └── topNav │ └── index.html ├── index.html └── reset.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .history 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | >预览地址：https://mahoneming.github.io/component/ 2 | >纯html+css+js 复制套用于react、vue、angular、jquery即可 3 | 4 | # imagePreload 5 | >仿pc知乎图片预加载懒加载，图片模糊到清晰加载，渐进式图片加载 6 | >准备一张小图和一张大图，即可 7 | 8 | # contentPreload 9 | >仿pc知乎个人主页选项卡切换波浪加载动画 10 | 11 | # scrollToTop 12 | >当页面较长时显示，点击就滚动到顶部 13 | 14 | # topNav 15 | >仿原生app，顶部透明导航栏，滚动后变色 -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /components/contentPreload/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | contentPreload 9 | 57 | 58 | 59 | 60 |

61 |

62 |

63 |

64 |

65 |

66 |

67 |

68 | 69 | 70 | -------------------------------------------------------------------------------- /components/imagePreload/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | imagePreload 9 | 37 | 38 | 39 | 40 |

41 |

42 |

43 |

44 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /components/scrollToTop/goTop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahoneming/component/ca3e5fa002022c118d50d8d2ab98a6704c667c6a/components/scrollToTop/goTop.png -------------------------------------------------------------------------------- /components/scrollToTop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | scrollToTop 8 | 36 | 37 | 38 |

39 |

请向下滚动

40 |

41 |

42 |

43 |

44 | 57 | 58 | -------------------------------------------------------------------------------- /components/topNav/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | topNav 9 | 10 | 97 | 98 | 99 | 100 |

101 |

102 |

103 | 109 |

110 |

111 |

112 |

113 |

115 |

117 |

119 |

121 |

123 |

125 |

127 |

129 |

131 |

133 |

135 |

137 |

138 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | UI组件 8 | 16 | 17 | 18 |

19 |

建议在手机模式下测试

25 | 26 | -------------------------------------------------------------------------------- /reset.css: -------------------------------------------------------------------------------- 1 | /* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS and IE text size adjust after device orientation change, 6 | * without disabling user zoom. 7 | */ 8 | 9 | html { 10 | font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | /*font-size: 14 / 375 * 100vw;*/ 14 | } 15 | 16 | /** 17 | * Remove default margin. 18 | */ 19 | 20 | body { 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | margin: 0; 24 | } 25 | 26 | /* HTML5 display definitions 27 | ========================================================================== */ 28 | 29 | /** 30 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 31 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 32 | * and Firefox. 33 | * Correct `block` display not defined for `main` in IE 11. 34 | * Correct `block` display not defined in Android 2.1, iOS 3.2 and Opera Mini. 35 | */ 36 | 37 | article, 38 | aside, 39 | details, 40 | figcaption, 41 | figure, 42 | footer, 43 | header, 44 | hgroup, 45 | main, 46 | menu, 47 | nav, 48 | section, 49 | summary { 50 | display: block; 51 | } 52 | 53 | /** 54 | * 1. Correct `inline-block` display not defined in IE 8/9. 55 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 56 | */ 57 | 58 | audio, 59 | canvas, 60 | progress, 61 | video { 62 | display: inline-block; /* 1 */ 63 | vertical-align: baseline; /* 2 */ 64 | } 65 | 66 | /** 67 | * Prevent modern browsers from displaying `audio` without controls. 68 | * Remove excess height in iOS 5 devices. 69 | */ 70 | 71 | audio:not([controls]) { 72 | display: none; 73 | height: 0; 74 | } 75 | 76 | /** 77 | * Address `[hidden]` styling not present in IE 8/9/10. 78 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 79 | */ 80 | 81 | [hidden], 82 | template { 83 | display: none; 84 | } 85 | 86 | /* Links 87 | ========================================================================== */ 88 | 89 | /** 90 | * Remove the gray background color from active links in IE 10. 91 | */ 92 | 93 | a { 94 | background-color: transparent; 95 | text-decoration: none; 96 | } 97 | a[x-apple-data-detectors-type="telephone"] { 98 | color: inherit; 99 | } 100 | 101 | /** 102 | * Improve readability of focused elements when they are also in an 103 | * active/hover state. 104 | */ 105 | 106 | a:active, 107 | a:hover { 108 | outline: 0; 109 | } 110 | 111 | /* Text-level semantics 112 | ========================================================================== */ 113 | 114 | /** 115 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 116 | */ 117 | 118 | abbr[title] { 119 | border-bottom: 1px dotted; 120 | } 121 | 122 | /** 123 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 124 | */ 125 | 126 | b, 127 | strong { 128 | font-weight: bold; 129 | } 130 | 131 | /** 132 | * Address styling not present in Safari and Chrome. 133 | */ 134 | 135 | dfn { 136 | font-style: italic; 137 | } 138 | 139 | /** 140 | * Address variable `h1` font-size and margin within `section` and `article` 141 | * contexts in Firefox 4+, Safari, and Chrome. 142 | */ 143 | 144 | h1 { 145 | font-size: 2em; 146 | margin: 0.67em 0; 147 | } 148 | 149 | /** 150 | * Address styling not present in IE 8/9. 151 | */ 152 | 153 | mark { 154 | background: #ff0; 155 | color: #000; 156 | } 157 | 158 | /** 159 | * Address inconsistent and variable font size in all browsers. 160 | */ 161 | 162 | small { 163 | font-size: 80%; 164 | } 165 | 166 | /** 167 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 168 | */ 169 | 170 | sub, 171 | sup { 172 | font-size: 75%; 173 | line-height: 0; 174 | position: relative; 175 | vertical-align: baseline; 176 | } 177 | 178 | sup { 179 | top: -0.5em; 180 | } 181 | 182 | sub { 183 | bottom: -0.25em; 184 | } 185 | 186 | /* Embedded content 187 | ========================================================================== */ 188 | 189 | /** 190 | * Remove border when inside `a` element in IE 8/9/10. 191 | */ 192 | 193 | img { 194 | border: 0; 195 | } 196 | 197 | /** 198 | * Correct overflow not hidden in IE 9/10/11. 199 | */ 200 | svg { 201 | display: block; 202 | } 203 | svg:not(:root) { 204 | overflow: hidden; 205 | } 206 | 207 | /* Grouping content 208 | ========================================================================== */ 209 | 210 | /** 211 | * Address margin not present in IE 8/9 and Safari. 212 | */ 213 | 214 | figure { 215 | margin: 1em 40px; 216 | } 217 | 218 | /** 219 | * Address differences between Firefox and other browsers. 220 | */ 221 | 222 | hr { 223 | box-sizing: content-box; 224 | height: 0; 225 | } 226 | 227 | /** 228 | * Contain overflow in all browsers. 229 | */ 230 | 231 | pre { 232 | overflow: auto; 233 | } 234 | 235 | /** 236 | * Address odd `em`-unit font size rendering in all browsers. 237 | */ 238 | 239 | code, 240 | kbd, 241 | pre, 242 | samp { 243 | font-family: monospace, monospace; 244 | font-size: 1em; 245 | } 246 | 247 | /* Forms 248 | ========================================================================== */ 249 | 250 | /** 251 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 252 | * styling of `select`, unless a `border` property is set. 253 | */ 254 | 255 | /** 256 | * 1. Correct color not being inherited. 257 | * Known issue: affects color of disabled elements. 258 | * 2. Correct font properties not being inherited. 259 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 260 | */ 261 | 262 | button, 263 | input, 264 | optgroup, 265 | select, 266 | textarea { 267 | color: inherit; /* 1 */ 268 | font: inherit; /* 2 */ 269 | line-height: 1; 270 | font-family: sans-serif; 271 | margin: 0; /* 3 */ 272 | padding: 0; 273 | resize: none; 274 | touch-action: manipulation; 275 | outline: none; 276 | -webkit-appearance: @none; 277 | } 278 | 279 | /** 280 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 281 | */ 282 | 283 | button { 284 | overflow: visible; 285 | } 286 | 287 | /** 288 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 289 | * All other form control elements do not inherit `text-transform` values. 290 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 291 | * Correct `select` style inheritance in Firefox. 292 | */ 293 | 294 | button, 295 | select { 296 | text-transform: none; 297 | user-select: none; 298 | } 299 | 300 | /** 301 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 302 | * and `video` controls. 303 | * 2. Correct inability to style clickable `input` types in iOS. 304 | * 3. Improve usability and consistency of cursor style between image-type 305 | * `input` and others. 306 | */ 307 | 308 | button, 309 | html input[type="button"], /* 1 */ 310 | input[type="reset"], 311 | input[type="submit"] { 312 | -webkit-appearance: button; /* 2 */ 313 | cursor: pointer; /* 3 */ 314 | } 315 | 316 | /** 317 | * Re-set default cursor for disabled elements. 318 | */ 319 | 320 | button[disabled], 321 | html input[disabled] { 322 | cursor: default; 323 | } 324 | 325 | /** 326 | * Remove inner padding and border in Firefox 4+. 327 | */ 328 | 329 | button::-moz-focus-inner, 330 | input::-moz-focus-inner { 331 | border: 0; 332 | padding: 0; 333 | } 334 | 335 | /** 336 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 337 | * the UA stylesheet. 338 | */ 339 | 340 | input { 341 | line-height: normal; 342 | } 343 | 344 | /** 345 | * It's recommended that you don't attempt to style these elements. 346 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 347 | * 348 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 349 | * 2. Remove excess padding in IE 8/9/10. 350 | */ 351 | 352 | input[type="checkbox"], 353 | input[type="radio"] { 354 | box-sizing: border-box; /* 1 */ 355 | padding: 0; /* 2 */ 356 | } 357 | 358 | /** 359 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 360 | * `font-size` values of the `input`, it causes the cursor style of the 361 | * decrement button to change from `default` to `text`. 362 | */ 363 | 364 | input[type="number"]::-webkit-inner-spin-button, 365 | input[type="number"]::-webkit-outer-spin-button { 366 | height: auto; 367 | } 368 | 369 | /** 370 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 371 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 372 | */ 373 | 374 | input[type="search"] { 375 | -webkit-appearance: textfield; /* 1 */ 376 | box-sizing: content-box; /* 2 */ 377 | } 378 | 379 | /** 380 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 381 | * Safari (but not Chrome) clips the cancel button when the search input has 382 | * padding (and `textfield` appearance). 383 | */ 384 | 385 | input[type="search"]::-webkit-search-cancel-button, 386 | input[type="search"]::-webkit-search-decoration { 387 | -webkit-appearance: none; 388 | } 389 | 390 | /** 391 | * Define consistent border, margin, and padding. 392 | */ 393 | 394 | fieldset { 395 | border: 1px solid #c0c0c0; 396 | margin: 0 2px; 397 | padding: 0.35em 0.625em 0.75em; 398 | } 399 | 400 | /** 401 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 402 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 403 | */ 404 | 405 | legend { 406 | border: 0; /* 1 */ 407 | padding: 0; /* 2 */ 408 | } 409 | 410 | /** 411 | * Remove default vertical scrollbar in IE 8/9/10/11. 412 | */ 413 | 414 | textarea { 415 | overflow: auto; 416 | } 417 | 418 | /** 419 | * Don't inherit the `font-weight` (applied by a rule above). 420 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 421 | */ 422 | 423 | optgroup { 424 | font-weight: bold; 425 | } 426 | 427 | /* // Removes webkit border when the element is on focus */ 428 | * { 429 | box-sizing: border-box; 430 | line-height: 1; 431 | outline: none; 432 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 433 | -webkit-touch-callout: none; 434 | /* // Firefox OS */ 435 | background: linear-gradient(to bottom,transparent,transparent); 436 | } 437 | 438 | /* Tables 439 | ========================================================================== */ 440 | 441 | /** 442 | * Remove most spacing between table cells. 443 | */ 444 | 445 | table { 446 | border-collapse: collapse; 447 | border-spacing: 0; 448 | } 449 | 450 | td, 451 | th { 452 | padding: 0; 453 | } --------------------------------------------------------------------------------