demo

├── .gitignore ├── LICENSE ├── README.md ├── demo-animate.html ├── demo-hover.html ├── ec-css-animate.css ├── ec-css-hover.css ├── ec-do.js ├── gulpfile.js ├── package.json └── reset.css /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | sass 4 | 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 chenhuiYj 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ec-css 2 | 基于css3开发的代码库，包括日常使用的hover过渡效果，动画效果，以及预设动画 3 | 4 | ## hover过渡，动画效果 5 | 引入ec-css-hover.css文件。然后参考demo-hover.html的效果，进行设置class即可 6 | 7 | ## 预设动画效果 8 | 引入ec-css-animate.css文件。然后参考demo-animate.html的效果，进行设置class即可 9 | 10 | ## 使用方法 11 | 直接引入.css文件即可。详细栗子可查看demo-hover.html和demo-animate.html 12 | 13 | # LICENSE 14 | MIT 15 | -------------------------------------------------------------------------------- /demo-animate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo 6 | 7 | 8 | 63 | 64 | 65 |

66 |

67 |

68 |

69 | 无限执行 70 | 反向动画 71 | 停止 72 |

73 |

127 | 128 | 129 | 194 | -------------------------------------------------------------------------------- /demo-hover.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo 6 | 7 | 8 | 30 | 31 | 32 |

33 |

几个组合效果

34 | arrow-b 35 | radius 36 | fade-m-out 37 |

38 |

39 |

鼠标效果简单动画(hover effect)

78 |

79 |

鼠标颜色效果(主要利用:after :before实现)

102 |

103 |

鼠标效果较复杂动画(hover effect)

114 |

115 |

鼠标效果较复杂动画-无限执行(hover effect)

123 |

124 |

鼠标效果箭头效果

134 | 135 | -------------------------------------------------------------------------------- /ec-css-animate.css: -------------------------------------------------------------------------------- 1 | /*version 1.0.0*/ 2 | /*动画效果*/ 3 | .ec-bounce-in-l { 4 | animation: bounce-in-l 1s ease; 5 | } 6 | @keyframes bounce-in-l { 7 | 0%, 60%, 75%, 90%, to { 8 | animation-timing-function: cubic-bezier(.215, .61, .355, 1) 9 | } 10 | 0% { 11 | opacity: 0; 12 | transform: translate3d(-3000px, 0, 0) 13 | } 14 | 60% { 15 | opacity: 1; 16 | transform: translate3d(25px, 0, 0) 17 | } 18 | 75% { 19 | transform: translate3d(-10px, 0, 0) 20 | } 21 | 90% { 22 | transform: translate3d(5px, 0, 0) 23 | } 24 | to { 25 | -webkit-transform: none; 26 | transform: none 27 | } 28 | } 29 | .ec-bounce-in-r { 30 | animation: bounce-in-r 1s ease; 31 | } 32 | @keyframes bounce-in-r { 33 | 0%, 60%, 75%, 90%, to { 34 | animation-timing-function: cubic-bezier(.215, .61, .355, 1) 35 | } 36 | 0% { 37 | opacity: 0; 38 | transform: translate3d(3000px, 0, 0) 39 | } 40 | 60% { 41 | opacity: 1; 42 | transform: translate3d(-25px, 0, 0) 43 | } 44 | 75% { 45 | transform: translate3d(10px, 0, 0) 46 | } 47 | 90% { 48 | transform: translate3d(-5px, 0, 0) 49 | } 50 | to { 51 | -webkit-transform: none; 52 | transform: none 53 | } 54 | } 55 | .ec-bounce-in-b{ 56 | animation: bounce-in-b 1s; 57 | } 58 | .ec-bounce-in-t{ 59 | animation: bounce-in-t 1s; 60 | } 61 | @keyframes bounce-in-t { 62 | from, 60%, 75%, 90%, to { 63 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 64 | } 65 | 66 | 0% { 67 | opacity: 0; 68 | transform: translate3d(0, -3000px, 0); 69 | } 70 | 71 | 60% { 72 | opacity: 1; 73 | transform: translate3d(0, 25px, 0); 74 | } 75 | 76 | 75% { 77 | transform: translate3d(0, -10px, 0); 78 | } 79 | 80 | 90% { 81 | transform: translate3d(0, 5px, 0); 82 | } 83 | 84 | to { 85 | transform: none; 86 | } 87 | } 88 | @keyframes bounce-in-b{ 89 | from, 60%, 75%, 90%, to { 90 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 91 | } 92 | 93 | 0% { 94 | opacity: 0; 95 | transform: translate3d(0, 3000px, 0); 96 | } 97 | 98 | 60% { 99 | opacity: 1; 100 | transform: translate3d(0, -25px, 0); 101 | } 102 | 103 | 75% { 104 | transform: translate3d(0, 10px, 0); 105 | } 106 | 107 | 90% { 108 | transform: translate3d(0, -5px, 0); 109 | } 110 | 111 | to { 112 | transform: none; 113 | } 114 | } 115 | @keyframes bounce-out-b { 116 | 20% { 117 | transform: translate3d(0, 10px, 0); 118 | } 119 | 120 | 40%, 45% { 121 | opacity: 1; 122 | transform: translate3d(0, -20px, 0); 123 | } 124 | 125 | to { 126 | opacity: 0; 127 | transform: translate3d(0, 2000px, 0); 128 | } 129 | } 130 | 131 | .ec-bounce-out-b { 132 | animation: bounce-out-b 1s; 133 | } 134 | 135 | @keyframes bounce-out-l { 136 | 20% { 137 | opacity: 1; 138 | transform: translate3d(20px, 0, 0); 139 | } 140 | 141 | to { 142 | opacity: 0; 143 | transform: translate3d(-2000px, 0, 0); 144 | } 145 | } 146 | 147 | .ec-bounce-out-l { 148 | animation: bounce-out-l 1s; 149 | } 150 | 151 | @keyframes bounce-out-r { 152 | 20% { 153 | opacity: 1; 154 | transform: translate3d(-20px, 0, 0); 155 | } 156 | 157 | to { 158 | opacity: 0; 159 | transform: translate3d(2000px, 0, 0); 160 | } 161 | } 162 | 163 | .ec-bounce-out-r { 164 | animation: bounce-out-r 1s; 165 | } 166 | 167 | @keyframes bounce-out-t { 168 | 20% { 169 | transform: translate3d(0, -10px, 0); 170 | } 171 | 172 | 40%, 45% { 173 | opacity: 1; 174 | transform: translate3d(0, 20px, 0); 175 | } 176 | 177 | to { 178 | opacity: 0; 179 | transform: translate3d(0, -2000px, 0); 180 | } 181 | } 182 | 183 | .ec-bounce-out-t { 184 | animation: bounce-out-t 1s; 185 | } 186 | 187 | /*心跳效果*/ 188 | .ec-pulse { 189 | animation: pulse 1s linear; 190 | } 191 | .ec-pulse-shrink { 192 | animation: pulse .5s linear; 193 | } 194 | @keyframes pulse { 195 | 25% { 196 | transform: scale(1.1); 197 | } 198 | 75% { 199 | transform: scale(0.9); 200 | } 201 | } 202 | .ec-flash { 203 | animation: flash .5s ease; 204 | } 205 | /*摇摆*/ 206 | .ec-swing { 207 | animation: swing .5s ease; 208 | } 209 | @keyframes swing { 210 | 20% { 211 | transform: rotate(15deg); 212 | } 213 | 40% { 214 | transform: rotate(-10deg); 215 | } 216 | 60% { 217 | transform: rotate(5deg); 218 | } 219 | 80% { 220 | transform: rotate(-5deg); 221 | } 222 | 100% { 223 | transform: rotate(0); 224 | } 225 | } 226 | /*摇摆*/ 227 | .ec-wobble-t{ 228 | transform-origin: 0 100%; 229 | } 230 | 231 | .ec-wobble-b{ 232 | transform-origin: 100% 0; 233 | } 234 | 235 | .ec-wobble,.ec-wobble-t,.ec-wobble-b { 236 | animation: wobblex 1s ease-in-out; 237 | } 238 | 239 | @keyframes wobblex { 240 | 16.65% { 241 | -webkit-transform: skew(-12deg); 242 | transform: skew(-12deg); 243 | } 244 | 33.3% { 245 | -webkit-transform: skew(10deg); 246 | transform: skew(10deg); 247 | } 248 | 49.95% { 249 | -webkit-transform: skew(-6deg); 250 | transform: skew(-6deg); 251 | } 252 | 66.6% { 253 | -webkit-transform: skew(4deg); 254 | transform: skew(4deg); 255 | } 256 | 83.25% { 257 | -webkit-transform: skew(-2deg); 258 | transform: skew(-2deg); 259 | } 260 | 100% { 261 | -webkit-transform: skew(0); 262 | transform: skew(0); 263 | } 264 | } 265 | /*闪烁*/ 266 | @keyframes flash { 267 | 0%, 50%, 100% { 268 | opacity: 1; 269 | } 270 | 25%, 75% { 271 | opacity: 0; 272 | } 273 | } 274 | .ec-rubber-band { 275 | animation: rubber-band 1s; 276 | } 277 | .ec-rubber-band-fast { 278 | animation: rubber-band .5s; 279 | } 280 | @keyframes rubber-band { 281 | from { 282 | transform: scale3d(1, 1, 1); 283 | } 284 | 285 | 30% { 286 | transform: scale3d(1.25, 0.75, 1); 287 | } 288 | 289 | 40% { 290 | transform: scale3d(0.75, 1.25, 1); 291 | } 292 | 293 | 50% { 294 | transform: scale3d(1.15, 0.85, 1); 295 | } 296 | 297 | 65% { 298 | transform: scale3d(.95, 1.05, 1); 299 | } 300 | 301 | 75% { 302 | transform: scale3d(1.05, .95, 1); 303 | } 304 | 305 | to { 306 | transform: scale3d(1, 1, 1); 307 | } 308 | } 309 | /*仿闹钟振铃效果*/ 310 | .ec-shake-time{ 311 | animation: shake-time 1s ease; 312 | } 313 | 314 | @keyframes shake-time { 315 | 0% { 316 | transform: scale(1); 317 | } 318 | 10%, 20% { 319 | transform: scale(0.9) rotate(-3deg); 320 | } 321 | 30%, 50%, 70%, 90% { 322 | transform: scale(1.1) rotate(3deg); 323 | } 324 | 40%, 60%, 80% { 325 | transform: scale(1.1) rotate(-3deg); 326 | } 327 | 100% { 328 | transform: scale(1) rotate(0); 329 | } 330 | } 331 | 332 | /*弹跳变化*/ 333 | .ec-bounce{ 334 | animation: bounce 1s ease; 335 | } 336 | 337 | @keyframes bounce { 338 | 0%, 20%, 50%, 80%, 100% { 339 | transform: translateY(0); 340 | } 341 | 40% { 342 | transform: translateY(-30px); 343 | } 344 | 60% { 345 | transform: translateY(-15px); 346 | } 347 | } 348 | 349 | /*震动*/ 350 | .ec-shake { 351 | animation: shake .5s ease; 352 | } 353 | 354 | @keyframes shake { 355 | 0%, 100% { 356 | transform: translateX(0); 357 | } 358 | 10%, 30%, 50%, 70%, 90% { 359 | transform: translateX(-10px); 360 | } 361 | 20%, 40%, 60%, 80% { 362 | transform: translateX(10px); 363 | } 364 | } 365 | /*透明度进入*/ 366 | @keyframes fade-in { 367 | from { 368 | opacity: 0; 369 | } 370 | 371 | to { 372 | opacity: 1; 373 | } 374 | } 375 | 376 | .ec-fade-in { 377 | animation: fade-in 1s; 378 | } 379 | 380 | @keyframes ec-fade-in-b { 381 | from { 382 | opacity: 0; 383 | transform: translate3d(0, -100%, 0); 384 | } 385 | 386 | to { 387 | opacity: 1; 388 | transform: none; 389 | } 390 | } 391 | 392 | .ec-fade-in-b { 393 | animation: ec-fade-in-b 1s; 394 | } 395 | 396 | @keyframes ec-fade-in-l { 397 | from { 398 | opacity: 0; 399 | transform: translate3d(-100%, 0, 0); 400 | } 401 | 402 | to { 403 | opacity: 1; 404 | transform: none; 405 | } 406 | } 407 | 408 | .ec-fade-in-l { 409 | animation: ec-fade-in-l 1s; 410 | } 411 | 412 | @keyframes ec-fade-in-r { 413 | from { 414 | opacity: 0; 415 | transform: translate3d(100%, 0, 0); 416 | } 417 | 418 | to { 419 | opacity: 1; 420 | transform: none; 421 | } 422 | } 423 | 424 | .ec-fade-in-r { 425 | animation: ec-fade-in-r 1s; 426 | } 427 | 428 | @keyframes ec-fade-in-t { 429 | from { 430 | opacity: 0; 431 | transform: translate3d(0, 100%, 0); 432 | } 433 | 434 | to { 435 | opacity: 1; 436 | transform: none; 437 | } 438 | } 439 | 440 | .ec-fade-in-t { 441 | animation: ec-fade-in-t 1s; 442 | } 443 | 444 | @keyframes ec-fade-out { 445 | from { 446 | opacity: 1; 447 | } 448 | 449 | to { 450 | opacity: 0; 451 | } 452 | } 453 | 454 | .ec-fade-out { 455 | animation: ec-fade-out 1s; 456 | } 457 | 458 | @keyframes ec-fade-out-b { 459 | from { 460 | opacity: 1; 461 | } 462 | 463 | to { 464 | opacity: 0; 465 | transform: translate3d(0, 100%, 0); 466 | } 467 | } 468 | 469 | .ec-fade-out-b { 470 | animation: ec-fade-out-b 1s; 471 | } 472 | 473 | @keyframes ec-fade-out-l { 474 | from { 475 | opacity: 1; 476 | } 477 | 478 | to { 479 | opacity: 0; 480 | transform: translate3d(-100%, 0, 0); 481 | } 482 | } 483 | 484 | .ec-fade-out-l { 485 | animation: ec-fade-out-l 1s; 486 | } 487 | 488 | 489 | @keyframes ec-fade-out-r { 490 | from { 491 | opacity: 1; 492 | } 493 | 494 | to { 495 | opacity: 0; 496 | transform: translate3d(100%, 0, 0); 497 | } 498 | } 499 | 500 | .ec-fade-out-r { 501 | animation: ec-fade-out-r 1s; 502 | } 503 | 504 | @keyframes ec-fade-out-t { 505 | from { 506 | opacity: 1; 507 | } 508 | 509 | to { 510 | opacity: 0; 511 | transform: translate3d(0, -100%, 0); 512 | } 513 | } 514 | 515 | .ec-fade-out-t { 516 | animation: ec-fade-out-t 1s; 517 | } 518 | /*旋转进出*/ 519 | @keyframes rotate-in{ 520 | 0%{opacity:0;transform:rotate(-200deg);} 521 | 100%{opacity:1;transform:rotate(0);} 522 | } 523 | .ec-rotate-in { 524 | animation: rotate-in 1s; 525 | } 526 | @keyframes rotate-in-lt{ 527 | 0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} 528 | 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 529 | } 530 | .ec-rotate-in-lt { 531 | animation: rotate-in-lt 1s; 532 | } 533 | @keyframes rotate-in-lb{ 534 | 0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} 535 | 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 536 | } 537 | .ec-rotate-in-lb { 538 | animation: rotate-in-lb 1s; 539 | } 540 | @keyframes rotate-in-rt{ 541 | 0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} 542 | 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 543 | } 544 | .ec-rotate-in-rt { 545 | animation: rotate-in-rt 1s; 546 | } 547 | @keyframes rotate-in-rb{ 548 | 0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} 549 | 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 550 | } 551 | .ec-rotate-in-rb { 552 | animation: rotate-in-rb 1s; 553 | } 554 | 555 | .ec-rotate-out { 556 | animation: rotate-out 1s; 557 | } 558 | @keyframes rotate-out{ 559 | 0%{transform-origin:center center;transform:rotate(0);opacity:1;} 560 | 100%{transform-origin:center center;transform:rotate(200deg);opacity:0;} 561 | } 562 | .ec-rotate-out-lt { 563 | animation: rotate-out-lt 1s; 564 | } 565 | @keyframes rotate-out-lt{ 566 | 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 567 | 100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} 568 | } 569 | .ec-rotate-out-lb { 570 | animation: rotate-out-lb 1s; 571 | } 572 | @keyframes rotate-out-lb{ 573 | 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 574 | 100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} 575 | } 576 | .ec-rotate-out-rt { 577 | animation: rotate-out-rt 1s; 578 | } 579 | @keyframes rotate-out-rt{ 580 | 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 581 | 100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} 582 | } 583 | .ec-rotate-out-rb { 584 | animation: rotate-out-rb 1s; 585 | } 586 | @keyframes rotate-out-rb{ 587 | 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 588 | 100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} 589 | } 590 | /*翻转进出*/ 591 | @keyframes flip-in-x { 592 | from { 593 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 594 | animation-timing-function: ease-in; 595 | opacity: 0; 596 | } 597 | 598 | 40% { 599 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 600 | animation-timing-function: ease-in; 601 | } 602 | 603 | 60% { 604 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 605 | opacity: 1; 606 | } 607 | 608 | 80% { 609 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 610 | } 611 | 612 | to { 613 | transform: perspective(400px); 614 | } 615 | } 616 | 617 | .ec-flip-in-x { 618 | animation: flip-in-x 1s; 619 | } 620 | 621 | @keyframes flip-in-y { 622 | from { 623 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 624 | animation-timing-function: ease-in; 625 | opacity: 0; 626 | } 627 | 628 | 40% { 629 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 630 | animation-timing-function: ease-in; 631 | } 632 | 633 | 60% { 634 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 635 | opacity: 1; 636 | } 637 | 638 | 80% { 639 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 640 | } 641 | 642 | to { 643 | transform: perspective(400px); 644 | } 645 | } 646 | 647 | .ec-flip-in-y { 648 | animation: flip-in-y 1s; 649 | } 650 | 651 | @keyframes flip-out-x { 652 | from { 653 | transform: perspective(400px); 654 | } 655 | 656 | 30% { 657 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 658 | opacity: 1; 659 | } 660 | 661 | to { 662 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 663 | opacity: 0; 664 | } 665 | } 666 | 667 | .ec-flip-out-x { 668 | animation: flip-out-x 1s; 669 | } 670 | 671 | @keyframes flip-out-y { 672 | from { 673 | transform: perspective(400px); 674 | } 675 | 676 | 30% { 677 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 678 | opacity: 1; 679 | } 680 | 681 | to { 682 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 683 | opacity: 0; 684 | } 685 | } 686 | 687 | .ec-flip-out-y { 688 | animation: flip-out-y 1s; 689 | } 690 | 691 | @keyframes light-speed-in { 692 | from { 693 | transform: translate3d(100%, 0, 0) skewX(-30deg); 694 | opacity: 0; 695 | } 696 | 697 | 60% { 698 | transform: skewX(20deg); 699 | opacity: 1; 700 | } 701 | 702 | 80% { 703 | transform: skewX(-5deg); 704 | opacity: 1; 705 | } 706 | 707 | to { 708 | transform: none; 709 | opacity: 1; 710 | } 711 | } 712 | 713 | .ec-light-speed-in { 714 | animation: light-speed-in 1s ease-out; 715 | } 716 | 717 | @keyframes light-speed-out { 718 | from { 719 | opacity: 1; 720 | } 721 | 722 | to { 723 | transform: translate3d(100%, 0, 0) skewX(30deg); 724 | opacity: 0; 725 | } 726 | } 727 | 728 | .ec-light-speed-out { 729 | animation: light-speed-out ease-in 1s; 730 | } 731 | /*无限次数执行动画*/ 732 | .ec-infinite{ 733 | animation-iteration-count: infinite; 734 | } 735 | 736 | .ec-alternate { 737 | animation-direction: alternate; 738 | } -------------------------------------------------------------------------------- /ec-css-hover.css: -------------------------------------------------------------------------------- 1 | /*version 1.0.0*/ 2 | /* 3 | * 简单鼠标动作 this effect base 当前元素简单变化设置鼠标动作利用过渡实现 4 | */ 5 | .ech-border, .ech-shadow, .ech-border-in, .ech-shadow-in,.ech-shadow-write, .ech-radius, .ech-rectangle, .ech-fade-out, .ech-fade-in, .ech-t, .ech-b, .ech-l, .ech-r, .ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180, .ech-shadow-big, .ech-big, .ech-small { 6 | transition: all .4s; 7 | } 8 | /*大小变化*/ 9 | .ech-big:hover{ 10 | transform: scale(1.2); 11 | } 12 | .ech-small:hover{ 13 | transform: scale(.9); 14 | } 15 | /*形状变化*/ 16 | .ech-skew-l:hover { 17 | transform: skew(-15deg); 18 | } 19 | 20 | .ech-skew-r:hover { 21 | transform: skew(15deg); 22 | } 23 | 24 | .ech-skew-l-t:hover { 25 | transform: skew(-15deg); 26 | 27 | } 28 | 29 | .ech-skew-r-t:hover { 30 | transform: skew(15deg); 31 | } 32 | 33 | .ech-skew-l-b:hover { 34 | transform: skew(15deg); 35 | } 36 | 37 | .ech-skew-r-b:hover { 38 | transform: skew(-15deg); 39 | } 40 | 41 | /*旋转*/ 42 | .ech-grow-rotate-l:hover { 43 | transform: scale(1.1) rotate(4deg); 44 | } 45 | .ech-grow-rotate-r:hover { 46 | transform: scale(1.1) rotate(-4deg); 47 | } 48 | .ech-rotate-5:hover { 49 | transform: rotate(-5deg); 50 | } 51 | .ech-rotate-15:hover { 52 | transform: rotate(-15deg); 53 | } 54 | 55 | .ech-rotate-30:hover { 56 | transform: rotate(-30deg); 57 | } 58 | 59 | .ech-rotate-60:hover { 60 | transform: rotate(-60deg); 61 | } 62 | 63 | .ech-rotate-90:hover { 64 | transform: rotate(-90deg); 65 | } 66 | 67 | .ech-rotate-180:hover { 68 | transform: rotate(-180deg); 69 | } 70 | .ech-rotate5:hover { 71 | transform: rotate(5deg); 72 | } 73 | .ech-rotate15:hover { 74 | transform: rotate(15deg); 75 | } 76 | 77 | .ech-rotate30:hover { 78 | transform: rotate(30deg); 79 | } 80 | 81 | .ech-rotate60:hover { 82 | transform: rotate(60deg); 83 | } 84 | 85 | .ech-rotate90:hover { 86 | transform: rotate(90deg); 87 | } 88 | 89 | .ech-rotate180:hover { 90 | transform: rotate(180deg); 91 | } 92 | 93 | .ech-rotate360:hover { 94 | transform: rotate(360deg); 95 | } 96 | 97 | /*位移*/ 98 | .ech-t:hover { 99 | transform: translate3d(0, -10px, 0); 100 | } 101 | 102 | .ech-b:hover { 103 | transform: translate3d(0, 10px, 0); 104 | } 105 | 106 | .ech-l:hover { 107 | transform: translate3d(-10px, 0, 0); 108 | } 109 | 110 | .ech-r:hover { 111 | transform: translate3d(10px, 0, 0); 112 | } 113 | 114 | /*边框*/ 115 | .ech-border:hover { 116 | box-shadow: 0 0 0 4px #09f, 0 0 1px transparent; 117 | } 118 | 119 | .ech-border-in:hover { 120 | box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent; 121 | } 122 | 123 | /*阴影变化*/ 124 | .ech-shadow:hover { 125 | box-shadow: 0 0 10px #333; 126 | } 127 | 128 | .ech-shadow-in:hover { 129 | box-shadow: inset 0 0 10px #333; 130 | } 131 | 132 | .ech-shadow-write:hover { 133 | box-shadow: inset 0 0 20px #fff; 134 | } 135 | 136 | .ech-shadow-big:hover { 137 | box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); 138 | transform: scale(1.1); 139 | } 140 | 141 | /*圆角变化*/ 142 | .ech-radius { 143 | border-radius: 10px; 144 | } 145 | 146 | .ech-radius:hover { 147 | border-radius: 0; 148 | } 149 | 150 | .ech-rectangle:hover { 151 | border-radius: 10px; 152 | } 153 | 154 | /*透明度变化*/ 155 | .ech-fade-out:hover { 156 | opacity: .6; 157 | } 158 | 159 | .ech-fade-in { 160 | opacity: .5; 161 | } 162 | 163 | .ech-fade-in:hover { 164 | opacity: 1; 165 | } 166 | 167 | /* 168 | * 当前元素较复杂动画，利用动画实现 169 | */ 170 | .ech-wobble-t, .ech-skew-r-t, .ech-skew-l-t { 171 | transform-origin: 0 100%; 172 | } 173 | 174 | .ech-wobble-b, .ech-skew-r-b, .ech-skew-l-b { 175 | transform-origin: 100% 0; 176 | } 177 | 178 | .ech-wobble-c:hover, .ech-wobble-t:hover,.ech-wobble-b:hover { 179 | animation: wobble-x 1s ease-in-out; 180 | } 181 | 182 | @keyframes wobble-x { 183 | 16.65% { 184 | -webkit-transform: skew(-12deg); 185 | transform: skew(-12deg); 186 | } 187 | 33.3% { 188 | -webkit-transform: skew(10deg); 189 | transform: skew(10deg); 190 | } 191 | 49.95% { 192 | -webkit-transform: skew(-6deg); 193 | transform: skew(-6deg); 194 | } 195 | 66.6% { 196 | -webkit-transform: skew(4deg); 197 | transform: skew(4deg); 198 | } 199 | 83.25% { 200 | -webkit-transform: skew(-2deg); 201 | transform: skew(-2deg); 202 | } 203 | 100% { 204 | -webkit-transform: skew(0); 205 | transform: skew(0); 206 | } 207 | } 208 | 209 | @keyframes wobble { 210 | 16.65% { 211 | -webkit-transform: skew(-12deg); 212 | transform: skew(-12deg); 213 | } 214 | 33.3% { 215 | -webkit-transform: skew(10deg); 216 | transform: skew(10deg); 217 | } 218 | 49.95% { 219 | -webkit-transform: skew(-6deg); 220 | transform: skew(-6deg); 221 | } 222 | 66.6% { 223 | -webkit-transform: skew(4deg); 224 | transform: skew(4deg); 225 | } 226 | 83.25% { 227 | -webkit-transform: skew(-2deg); 228 | transform: skew(-2deg); 229 | } 230 | 100% { 231 | -webkit-transform: skew(0); 232 | transform: skew(0); 233 | } 234 | } 235 | 236 | /*大小变化*/ 237 | .ech-pulse:hover{ 238 | animation: pulse 1s infinite alternate linear; 239 | } 240 | 241 | /*心跳效果*/ 242 | @keyframes pulse { 243 | 25% { 244 | -webkit-transform: scale(1.1); 245 | transform: scale(1.1); 246 | } 247 | 75% { 248 | -webkit-transform: scale(0.9); 249 | transform: scale(0.9); 250 | } 251 | } 252 | 253 | .ech-pulse-shrink:hover{ 254 | animation: pulse-shrink .5s infinite alternate linear; 255 | } 256 | 257 | @keyframes pulse-shrink { 258 | to { 259 | -webkit-transform: scale(0.9); 260 | transform: scale(0.9); 261 | } 262 | } 263 | 264 | /*仿闹钟振铃效果*/ 265 | .ech-shake-time:hover { 266 | animation: shake-time 1s ease; 267 | } 268 | 269 | @keyframes shake-time { 270 | 0% { 271 | transform: scale(1); 272 | } 273 | 10%, 20% { 274 | transform: scale(0.9) rotate(-3deg); 275 | } 276 | 30%, 50%, 70%, 90% { 277 | transform: scale(1.1) rotate(3deg); 278 | } 279 | 40%, 60%, 80% { 280 | transform: scale(1.1) rotate(-3deg); 281 | } 282 | 100% { 283 | transform: scale(1) rotate(0); 284 | } 285 | } 286 | 287 | /*弹跳变化*/ 288 | .ech-bounce:hover { 289 | animation: bounce 1s ease; 290 | } 291 | 292 | @keyframes bounce { 293 | 0%, 20%, 50%, 80%, 100% { 294 | transform: translateY(0); 295 | } 296 | 40% { 297 | transform: translateY(-30px); 298 | } 299 | 60% { 300 | transform: translateY(-15px); 301 | } 302 | } 303 | 304 | /*闪烁变化*/ 305 | .ech-flash:hover { 306 | animation: flash .5s ease; 307 | } 308 | 309 | @keyframes flash { 310 | 0%, 50%, 100% { 311 | opacity: 1; 312 | } 313 | 25%, 75% { 314 | opacity: 0; 315 | } 316 | } 317 | 318 | /*震动*/ 319 | .ech-shake:hover { 320 | animation: shake .5s ease; 321 | } 322 | 323 | @keyframes shake { 324 | 0%, 100% { 325 | transform: translateX(0); 326 | } 327 | 10%, 30%, 50%, 70%, 90% { 328 | transform: translateX(-10px); 329 | } 330 | 20%, 40%, 60%, 80% { 331 | transform: translateX(10px); 332 | } 333 | } 334 | 335 | /*摇摆*/ 336 | .ech-swing:hover { 337 | animation: swing .5s ease alternate; 338 | } 339 | 340 | @keyframes swing { 341 | 20% { 342 | transform: rotate(15deg); 343 | } 344 | 40% { 345 | transform: rotate(-10deg); 346 | } 347 | 60% { 348 | transform: rotate(5deg); 349 | } 350 | 80% { 351 | transform: rotate(-5deg); 352 | } 353 | 100% { 354 | transform: rotate(0); 355 | } 356 | } 357 | 358 | /*摇晃*/ 359 | .ech-wobble:hover { 360 | animation: wobble 1s ease; 361 | } 362 | 363 | @keyframes wobble { 364 | 0% { 365 | transform: translateX(0); 366 | } 367 | 15% { 368 | transform: translateX(-100px) rotate(-5deg); 369 | } 370 | 30% { 371 | transform: translateX(80px) rotate(3deg); 372 | } 373 | 45% { 374 | transform: translateX(-65px) rotate(-3deg); 375 | } 376 | 60% { 377 | transform: translateX(40px) rotate(2deg); 378 | } 379 | 75% { 380 | transform: translateX(-20px) rotate(-1deg); 381 | } 382 | 100% { 383 | transform: translateX(0); 384 | } 385 | } 386 | 387 | /*当前元素作用于 after before*/ 388 | .ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out, .ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l { 389 | position: relative; 390 | transition: all .3s; 391 | z-index: 1; 392 | } 393 | 394 | .ech-fade:before, .ech-fade-t:before, .ech-fade-b:before, .ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before, .ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after, .ech-fade-m-in:after, .ech-fade-c-out:before { 395 | position: absolute; 396 | transition: all .3s; 397 | content: ""; 398 | display: block; 399 | background: #09f; 400 | z-index: -1; 401 | width: 100%; 402 | height: 100%; 403 | } 404 | 405 | .ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before, .ech-bounce-l:before { 406 | transition: all .3s; 407 | transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4); 408 | position: absolute; 409 | content: ""; 410 | display: block; 411 | background: #09f; 412 | z-index: -1; 413 | width: 100%; 414 | height: 100%; 415 | } 416 | 417 | /*背景颜色和文字变化*/ 418 | .ech-fade:before { 419 | top: 0; 420 | left: 0; 421 | transform: scaleX(1); 422 | opacity: 0; 423 | } 424 | 425 | .ech-fade:hover:before { 426 | opacity: 1; 427 | } 428 | 429 | /*颜色左右变化*/ 430 | .ech-fade-l:before, .ech-bounce-l:before { 431 | top: 0; 432 | right: 0; 433 | transform-origin: 0 50%; 434 | transform: scaleX(0); 435 | } 436 | 437 | .ech-fade-r:before, .ech-bounce-r:before { 438 | top: 0; 439 | left: 0; 440 | transform-origin: 100% 50%; 441 | transform: scaleX(0); 442 | } 443 | 444 | /*颜色上下变化*/ 445 | .ech-fade-t:before, .ech-bounce-t:before { 446 | bottom: 0; 447 | left: 0; 448 | transform-origin: 50% 0; 449 | transform: scaleY(0); 450 | } 451 | 452 | .ech-fade-b:before, .ech-bounce-b:before { 453 | top: 0; 454 | left: 0; 455 | transform-origin: 50% 100%; 456 | transform: scaleY(0); 457 | } 458 | 459 | /*垂直居中出去*/ 460 | .ech-fade-m-out:before { 461 | top: 0; 462 | bottom: 0; 463 | left: 0; 464 | margin: auto; 465 | transform: scaleY(0); 466 | } 467 | 468 | /*水平居中出去*/ 469 | .ech-fade-c-out:before { 470 | top: 0; 471 | right: 0; 472 | bottom: 0; 473 | left: 0; 474 | margin: auto; 475 | transform: scaleX(0); 476 | } 477 | 478 | 479 | /*水平居中进来*/ 480 | .ech-fade-c-in:before { 481 | top: 0; 482 | left: 0; 483 | transform-origin: 0 50%; 484 | transform: scaleX(0); 485 | } 486 | 487 | .ech-fade-c-in:after { 488 | top: 0; 489 | right: 0; 490 | transform-origin: 100% 50%; 491 | transform: scaleX(0); 492 | } 493 | 494 | /*垂直居中进来*/ 495 | .ech-fade-m-in:before { 496 | top: 0; 497 | left: 0; 498 | transform-origin: 50% 0; 499 | transform: scaleY(0); 500 | } 501 | 502 | .ech-fade-m-in:after { 503 | bottom: 0; 504 | left: 0; 505 | transform-origin: 50% 100%; 506 | transform: scaleY(0); 507 | } 508 | 509 | /*上划线和下划线变化*/ 510 | /*初始化:after:before大小*/ 511 | .ech-overline-r:before, .ech-overline-l:before, .ech-underline-l:before, .ech-underline-r:before, .ech-underline-c:before, .ech-overline-c:before, .ech-underline-c:after, .ech-overline-c:after, .ech-underline-c-out:before, .ech-overline-c-out:before { 512 | position: absolute; 513 | transition: all .3s; 514 | content: ""; 515 | display: block; 516 | background: #09f; 517 | z-index: -1; 518 | height: 4px; 519 | width: 100%; 520 | transform: scaleX(0); 521 | } 522 | 523 | /*上划线左右出来*/ 524 | .ech-overline-r:before { 525 | top: 0; 526 | left: 0; 527 | transform-origin: 100% 50%; 528 | } 529 | 530 | .ech-overline-l:before { 531 | top: 0; 532 | right: 0; 533 | transform-origin: 0 50%; 534 | } 535 | 536 | /*下划线左右出来*/ 537 | .ech-underline-r:before { 538 | bottom: 0; 539 | left: 0; 540 | transform-origin: 100% 50%; 541 | 542 | } 543 | 544 | .ech-underline-l:before { 545 | bottom: 0; 546 | right: 0; 547 | transform-origin: 0% 50%; 548 | } 549 | 550 | /**上划线下划线居中进来**/ 551 | .ech-overline-c:before { 552 | top: 0; 553 | transform-origin: 0 50%; 554 | } 555 | 556 | .ech-overline-c:after { 557 | top: 0; 558 | transform-origin: 100% 50%; 559 | } 560 | 561 | .ech-underline-c:before { 562 | bottom: 0; 563 | transform-origin: 0 50%; 564 | } 565 | 566 | .ech-underline-c:after { 567 | bottom: 0; 568 | transform-origin: 100% 50%; 569 | } 570 | 571 | .ech-overline-c:before, .ech-underline-c:before { 572 | left: 0; 573 | } 574 | 575 | .ech-overline-c:after, .ech-underline-c:after { 576 | right: 0; 577 | } 578 | 579 | /*上划线下划线-居中出去 */ 580 | .ech-overline-c-out:before { 581 | top: 0; 582 | left: 0; 583 | right: 0; 584 | margin: auto; 585 | } 586 | 587 | .ech-underline-c-out:before { 588 | bottom: 0; 589 | left: 0; 590 | right: 0; 591 | margin: auto; 592 | } 593 | 594 | .ech-fade-t:hover:before, .ech-fade-b:hover:before, .ech-fade-m-out:hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before { 595 | transform: scaleY(1); 596 | } 597 | 598 | .ech-fade:hover, .ech-fade-t:hover, .ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover, .ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover, .ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover, .ech-bounce-r:hover, .ech-bounce-l:hover { 599 | color: #fff; 600 | } 601 | 602 | .ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after { 603 | transform: scaleY(.51); 604 | } 605 | 606 | .ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after, .ech-overline-c:hover:after, .ech-overline-c:hover:before, .ech-underline-c:hover:after, .ech-underline-c:hover:before { 607 | transform: scaleX(.51); 608 | } 609 | 610 | .ech-fade-l:hover:before, .ech-fade-r:hover:before,.ech-fade-c-out:hover:before, .ech-bounce-l:hover:before, .ech-bounce-r:hover:before, .ech-overline-l:hover:before, .ech-overline-r:hover:before, .ech-underline-l:hover:before, .ech-underline-r:hover:before, .ech-underline-c-out:hover:before, .ech-overline-c-out:hover:before { 611 | transform: scaleX(1); 612 | } 613 | 614 | /*箭头效果*/ 615 | .ech-arrow-l:before, .ech-arrow-r:before, .ech-arrow-t:before, .ech-arrow-b:before, .ech-arrow-l-move:before, .ech-arrow-r-move:before, .ech-arrow-t-move:before, .ech-arrow-b-move:before { 616 | position: absolute; 617 | transition: all .3s; 618 | content: ""; 619 | display: block; 620 | z-index: -1; 621 | border-style: solid; 622 | margin: auto; 623 | width: 0; 624 | height: 0; 625 | } 626 | 627 | .ech-arrow-l:before, .ech-arrow-l-move:before { 628 | left: 0; 629 | top: 0; 630 | bottom: 0; 631 | border-width: 10px 10px 10px 0; 632 | border-color: transparent #ccc transparent transparent; 633 | } 634 | 635 | .ech-arrow-r:before, .ech-arrow-r-move:before { 636 | right: 0; 637 | top: 0; 638 | bottom: 0; 639 | border-width: 10px 0 10px 10px; 640 | border-color: transparent transparent transparent #ccc; 641 | } 642 | 643 | .ech-arrow-t:before, .ech-arrow-t-move:before { 644 | left: 0; 645 | top: 0; 646 | right: 0; 647 | border-width: 0 10px 10px 10px; 648 | border-color: transparent transparent #ccc transparent; 649 | } 650 | 651 | .ech-arrow-b:before, .ech-arrow-b-move:before { 652 | left: 0; 653 | bottom: 0; 654 | right: 0; 655 | border-width: 10px 10px 0 10px; 656 | border-color: #ccc transparent transparent transparent; 657 | } 658 | 659 | .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move { 660 | transition: transform .3s; 661 | } 662 | 663 | .ech-arrow-l-move:hover { 664 | transform: translateX(10px); 665 | } 666 | 667 | .ech-arrow-r-move:hover { 668 | transform: translateX(-10px); 669 | } 670 | 671 | .ech-arrow-t-move:hover { 672 | transform: translateY(10px); 673 | } 674 | 675 | .ech-arrow-b-move:hover { 676 | transform: translateY(-10px); 677 | } 678 | 679 | .ech-arrow-l-move:hover:before, .ech-arrow-l:hover:before { 680 | transform: translateX(-10px); 681 | } 682 | 683 | .ech-arrow-r-move:hover:before, .ech-arrow-r:hover:before { 684 | transform: translateX(10px); 685 | } 686 | 687 | .ech-arrow-t-move:hover:before, .ech-arrow-t:hover:before { 688 | transform: translateY(-10px); 689 | } 690 | 691 | .ech-arrow-b-move:hover:before, .ech-arrow-b:hover:before { 692 | transform: translateY(10px); 693 | } 694 | /*无限次数执行动画*/ 695 | .ech-infinite:hover { 696 | animation-iteration-count: infinite; 697 | } 698 | /* 699 | * 700 | * child effect 当前元素子元素变化，鼠标移动到当前元素，子元素发生变化 701 | * 702 | * */ 703 | /*右上揭盖效果*/ 704 | .ech-rotate-r .ech-rotate-r-do { 705 | transform-origin: 95% 40%; 706 | } 707 | 708 | .ech-rotate-r:hover .ech-rotate-r-do { 709 | transform: rotate(-120deg); 710 | } 711 | 712 | /*向上揭盖效果*/ 713 | .ech-rotate3d-t .ech-rotate3d-t-do { 714 | transform-origin: 50% 0; 715 | } 716 | 717 | .ech-rotate3d-t:hover .ech-rotate3d-t-do { 718 | transform: rotate3d(1, 0, 0, 180deg); 719 | } 720 | 721 | /*从0-1放大效果*/ 722 | .ech-scale1:hover .ech-scale1-do { 723 | transform: scale(1); 724 | } -------------------------------------------------------------------------------- /ec-do.js: -------------------------------------------------------------------------------- 1 | /*1.1.2*/ 2 | var ecDo = { 3 | //去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格 4 | trim: function (str, type) { 5 | switch (type) { 6 | case 1: 7 | return str.replace(/\s+/g, ""); 8 | case 2: 9 | return str.replace(/(^\s*)|(\s*$)/g, ""); 10 | case 3: 11 | return str.replace(/(^\s*)/g, ""); 12 | case 4: 13 | return str.replace(/(\s*$)/g, ""); 14 | default: 15 | return str; 16 | } 17 | }, 18 | /*type 19 | 1:首字母大写 20 | 2：首页母小写 21 | 3：大小写转换 22 | 4：全部大写 23 | 5：全部小写 24 | * */ 25 | //changeCase('asdasd',1) 26 | //Asdasd 27 | changeCase: function (str, type) { 28 | function ToggleCase(str) { 29 | var itemText = "" 30 | str.split("").forEach( 31 | function (item) { 32 | if (/^([a-z]+)/.test(item)) { 33 | itemText += item.toUpperCase(); 34 | } else if (/^([A-Z]+)/.test(item)) { 35 | itemText += item.toLowerCase(); 36 | } else { 37 | itemText += item; 38 | } 39 | }); 40 | return itemText; 41 | } 42 | 43 | switch (type) { 44 | case 1: 45 | return str.replace(/\b\w+\b/g, function (word) { 46 | return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase(); 47 | 48 | }); 49 | case 2: 50 | return str.replace(/\b\w+\b/g, function (word) { 51 | return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase(); 52 | }); 53 | case 3: 54 | return ToggleCase(str); 55 | case 4: 56 | return str.toUpperCase(); 57 | case 5: 58 | return str.toLowerCase(); 59 | default: 60 | return str; 61 | } 62 | }, 63 | //字符串循环复制 64 | //repeatStr(str->字符串, count->次数) 65 | //repeatStr('123',3) 66 | //"123123123" 67 | repeatStr: function (str, count) { 68 | var text = ''; 69 | for (var i = 0; i < count; i++) { 70 | text += str; 71 | } 72 | return text; 73 | }, 74 | //字符串替换(字符串,要替换的字符或者正则表达式（不要写g）,替换成什么) 75 | replaceAll: function (str, AFindText, ARepText) { 76 | raRegExp = new RegExp(AFindText, "g"); 77 | return str.replace(raRegExp, ARepText); 78 | }, 79 | //字符替换* 80 | //replaceStr(字符串,字符格式, 替换方式,替换的字符（默认*）) 81 | replaceStr: function (str, regArr, type, ARepText) { 82 | var regtext = '', 83 | Reg = null, 84 | replaceText = ARepText || '*'; 85 | //replaceStr('18819322663',[3,5,3],0) 86 | //188*****663 87 | //repeatStr是在上面定义过的（字符串循环复制），大家注意哦 88 | if (regArr.length === 3 && type === 0) { 89 | regtext = '(\\w{' + regArr[0] + '})\\w{' + regArr[1] + '}(\\w{' + regArr[2] + '})' 90 | Reg = new RegExp(regtext); 91 | var replaceCount = this.repeatStr(replaceText, regArr[1]); 92 | return str.replace(Reg, '$1' + replaceCount + '$2') 93 | } 94 | //replaceStr('asdasdasdaa',[3,5,3],1) 95 | //***asdas*** 96 | else if (regArr.length === 3 && type === 1) { 97 | regtext = '\\w{' + regArr[0] + '}(\\w{' + regArr[1] + '})\\w{' + regArr[2] + '}' 98 | Reg = new RegExp(regtext); 99 | var replaceCount1 = this.repeatStr(replaceText, regArr[0]); 100 | var replaceCount2 = this.repeatStr(replaceText, regArr[2]); 101 | return str.replace(Reg, replaceCount1 + '$1' + replaceCount2) 102 | } 103 | //replaceStr('1asd88465asdwqe3',[5],0) 104 | //*****8465asdwqe3 105 | else if (regArr.length === 1 && type == 0) { 106 | regtext = '(^\\w{' + regArr[0] + '})' 107 | Reg = new RegExp(regtext); 108 | var replaceCount = this.repeatStr(replaceText, regArr[0]); 109 | return str.replace(Reg, replaceCount) 110 | } 111 | //replaceStr('1asd88465asdwqe3',[5],1,'+') 112 | //"1asd88465as+++++" 113 | else if (regArr.length === 1 && type == 1) { 114 | regtext = '(\\w{' + regArr[0] + '}$)' 115 | Reg = new RegExp(regtext); 116 | var replaceCount = this.repeatStr(replaceText, regArr[0]); 117 | return str.replace(Reg, replaceCount) 118 | } 119 | }, 120 | //检测字符串 121 | //checkType('165226226326','phone') 122 | //false 123 | //大家可以根据需要扩展 124 | checkType: function (str, type) { 125 | switch (type) { 126 | case 'email': 127 | return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str); 128 | case 'phone': 129 | return /^1[3|4|5|7|8][0-9]{9}$/.test(str); 130 | case 'tel': 131 | return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str); 132 | case 'number': 133 | return /^[0-9]$/.test(str); 134 | case 'english': 135 | return /^[a-zA-Z]+$/.test(str); 136 | case 'text': 137 | return /^\w+$/.test(str); 138 | case 'chinese': 139 | return /^[\u4E00-\u9FA5]+$/.test(str); 140 | case 'lower': 141 | return /^[a-z]+$/.test(str); 142 | case 'upper': 143 | return /^[A-Z]+$/.test(str); 144 | default: 145 | return true; 146 | } 147 | }, 148 | //检测密码强度 149 | //checkPwd('12asdASAD') 150 | //3(强度等级为3) 151 | checkPwd: function (str) { 152 | var nowLv = 0; 153 | if (str.length < 6) { 154 | return nowLv 155 | } 156 | if (/[0-9]/.test(str)) { 157 | nowLv++ 158 | } 159 | if (/[a-z]/.test(str)) { 160 | nowLv++ 161 | } 162 | if (/[A-Z]/.test(str)) { 163 | nowLv++ 164 | } 165 | if (/[\.|-|_]/.test(str)) { 166 | nowLv++ 167 | } 168 | return nowLv; 169 | }, 170 | //随机码 171 | //count取值范围0-36 172 | 173 | //randomWord(10) 174 | //"2584316588472575" 175 | 176 | //randomWord(14) 177 | //"9b405070dd00122640c192caab84537" 178 | 179 | //randomWord(36) 180 | //"83vhdx10rmjkyb9" 181 | 182 | randomWord: function (count) { 183 | return Math.random().toString(count).substring(2); 184 | }, 185 | 186 | //查找字符串 187 | countStr: function (str, strSplit) { 188 | return str.split(strSplit).length - 1 189 | }, 190 | //var strTest='sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967' 191 | //countStr(strTest,'blog') 192 | //6 193 | 194 | /*数组*/ 195 | //数组去重 196 | removeRepeatArray: function (arr) { 197 | return arr.filter(function (item, index, self) { 198 | return self.indexOf(item) == index; 199 | }); 200 | //es6 201 | //return Array.from(new Set(arr)) 202 | }, 203 | //数组顺序打乱 204 | upsetArr: function (arr) { 205 | return arr.sort(function () { 206 | return Math.random() - 0.5 207 | }); 208 | }, 209 | 210 | //数组最大值 211 | //这一块的封装，主要是针对数字类型的数组 212 | maxArr: function (arr) { 213 | return Math.max.apply(null, arr); 214 | }, 215 | //数组最小值 216 | minArr: function (arr) { 217 | return Math.min.apply(null, arr); 218 | }, 219 | 220 | //这一块的封装，主要是针对数字类型的数组 221 | //求和 222 | sumArr: function (arr) { 223 | return arr.reduce(function(pre,cur){return pre+cur}) 224 | }, 225 | 226 | //平均值,小数点可能会有很多位，这里不做处理，处理了使用就不灵活了！ 227 | covArr: function (arr) { 228 | return this.sumArr(arr) / arr.length; 229 | }, 230 | //从数组中随机获取元素 231 | randomOne: function (arr) { 232 | return arr[Math.floor(Math.random() * arr.length)]; 233 | }, 234 | 235 | //回数组（字符串）一个元素出现的次数 236 | //getEleCount('asd56+asdasdwqe','a') 237 | //3 238 | //getEleCount([1,2,3,4,5,66,77,22,55,22],22) 239 | //2 240 | getEleCount: function (obj, ele) { 241 | var num = 0; 242 | for (var i = 0, len = obj.length; i < len; i++) { 243 | if (ele == obj[i]) { 244 | num++; 245 | } 246 | } 247 | return num; 248 | }, 249 | 250 | //返回数组（字符串）出现最多的几次元素和出现次数 251 | //arr, rank->长度，默认为数组长度，ranktype，排序方式，默认降序 252 | //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2]) 253 | //默认情况，返回所有元素出现的次数 254 | //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3) 255 | //传参（rank=3），只返回出现次数排序前三的 256 | //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],null,1) 257 | //传参（ranktype=1,rank=null），升序返回所有元素出现次数 258 | //getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3,1) 259 | //传参（rank=3，ranktype=1），只返回出现次数排序（升序）前三的 260 | getCount: function (arr, rank, ranktype) { 261 | var obj = {}, 262 | k, arr1 = [] 263 | //记录每一元素出现的次数 264 | for (var i = 0, len = arr.length; i < len; i++) { 265 | k = arr[i]; 266 | if (obj[k]) { 267 | obj[k]++; 268 | } else { 269 | obj[k] = 1; 270 | } 271 | } 272 | //保存结果{el-'元素'，count-出现次数} 273 | for (var o in obj) { 274 | arr1.push({el: o, count: obj[o]}); 275 | } 276 | //排序（降序） 277 | arr1.sort(function (n1, n2) { 278 | return n2.count - n1.count 279 | }); 280 | //如果ranktype为1，则为升序，反转数组 281 | if (ranktype === 1) { 282 | arr1 = arr1.reverse(); 283 | } 284 | var rank1 = rank || arr1.length; 285 | return arr1.slice(0, rank1); 286 | }, 287 | 288 | //得到n1-n2下标的数组 289 | //getArrayNum([0,1,2,3,4,5,6,7,8,9],5,9) 290 | //[5, 6, 7, 8, 9] 291 | //getArrayNum([0,1,2,3,4,5,6,7,8,9],2) 不传第二个参数,默认返回从n1到数组结束的元素 292 | //[2, 3, 4, 5, 6, 7, 8, 9] 293 | getArrayNum: function (arr, n1, n2) { 294 | var arr1=arr.slice(n1,n2); 295 | return arr1; 296 | }, 297 | 298 | //筛选数组 299 | //删除值为'val'的数组元素 300 | //removeArrayForValue(['test','test1','test2','test','aaa'],'test','%') 301 | //["aaa"] 带有'test'的都删除 302 | //removeArrayForValue(['test','test1','test2','test','aaa'],'test') 303 | //["test1", "test2", "aaa"] //数组元素的值全等于'test'才被删除 304 | removeArrayForValue: function (arr, val, type) { 305 | arr.filter(function (item) { 306 | return type === '%' ? item.indexOf(val) !== -1 : item !== val 307 | }) 308 | }, 309 | /*对象及其他*/ 310 | //适配rem 311 | getFontSize: function () { 312 | var doc = document, 313 | win = window; 314 | var docEl = doc.documentElement, 315 | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 316 | recalc = function () { 317 | var clientWidth = docEl.clientWidth; 318 | if (!clientWidth) return; 319 | //如果屏幕大于750（750是根据我效果图设置的，具体数值参考效果图），就设置clientWidth=750，防止font-size会超过100px 320 | if (clientWidth > 750) { 321 | clientWidth = 750 322 | } 323 | //设置根元素font-size大小 324 | docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; 325 | }; 326 | //屏幕大小改变，或者横竖屏切换时，触发函数 327 | win.addEventListener(resizeEvt, recalc, false); 328 | //文档加载完成时，触发函数 329 | doc.addEventListener('DOMContentLoaded', recalc, false); 330 | }, 331 | //到某一个时间的倒计时 332 | //getEndTime('2017/7/22 16:0:0') 333 | //"剩余时间6天 2小时 28 分钟20 秒" 334 | getEndTime: function (endTime) { 335 | var startDate = new Date(); //开始时间，当前时间 336 | var endDate = new Date(endTime); //结束时间，需传入时间参数 337 | var t = endDate.getTime() - startDate.getTime(); //时间差的毫秒数 338 | var d = 0, 339 | h = 0, 340 | m = 0, 341 | s = 0; 342 | if (t >= 0) { 343 | d = Math.floor(t / 1000 / 3600 / 24); 344 | h = Math.floor(t / 1000 / 60 / 60 % 24); 345 | m = Math.floor(t / 1000 / 60 % 60); 346 | s = Math.floor(t / 1000 % 60); 347 | } 348 | return "剩余时间" + d + "天 " + h + "小时 " + m + " 分钟" + s + " 秒"; 349 | }, 350 | //随进产生颜色 351 | randomColor: function () { 352 | //randomNumber是下面定义的函数 353 | //写法1 354 | //return 'rgb(' + this.randomNumber(255) + ',' + this.randomNumber(255) + ',' + this.randomNumber(255) + ')'; 355 | 356 | //写法2 357 | return '#' + Math.random().toString(16).substring(2).substr(0, 6); 358 | 359 | //写法3 360 | //var color='#',_index=this.randomNumber(15); 361 | //for(var i=0;i<6;i++){ 362 | //color+='0123456789abcdef'[_index]; 363 | //} 364 | //return color; 365 | }, 366 | //随机返回一个范围的数字 367 | randomNumber: function (n1, n2) { 368 | //randomNumber(5,10) 369 | //返回5-10的随机整数，包括5，10 370 | if (arguments.length === 2) { 371 | return Math.round(n1 + Math.random() * (n2 - n1)); 372 | } 373 | //randomNumber(10) 374 | //返回0-10的随机整数，包括0，10 375 | else if (arguments.length === 1) { 376 | return Math.round(Math.random() * n1) 377 | } 378 | //randomNumber() 379 | //返回0-255的随机整数，包括0，255 380 | else { 381 | return Math.round(Math.random() * 255) 382 | } 383 | }, 384 | //设置url参数 385 | //setUrlPrmt({'a':1,'b':2}) 386 | //a=1&b=2 387 | setUrlPrmt: function (obj) { 388 | var _rs = []; 389 | for (var p in obj) { 390 | if (obj[p] != null && obj[p] != '') { 391 | _rs.push(p + '=' + obj[p]) 392 | } 393 | } 394 | return _rs.join('&'); 395 | }, 396 | //获取url参数 397 | //getUrlPrmt('segmentfault.com/write?draftId=122000011938') 398 | //Object{draftId: "122000011938"} 399 | getUrlPrmt: function (url) { 400 | url = url ? url : window.location.href; 401 | var _pa = url.substring(url.indexOf('?') + 1), 402 | _arrS = _pa.split('&'), 403 | _rs = {}; 404 | for (var i = 0, _len = _arrS.length; i < _len; i++) { 405 | var pos = _arrS[i].indexOf('='); 406 | if (pos == -1) { 407 | continue; 408 | } 409 | var name = _arrS[i].substring(0, pos), 410 | value = window.decodeURIComponent(_arrS[i].substring(pos + 1)); 411 | _rs[name] = value; 412 | } 413 | return _rs; 414 | }, 415 | 416 | //现金额大写转换函数 417 | //upDigit(168752632) 418 | //"人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整" 419 | //upDigit(1682) 420 | //"人民币壹仟陆佰捌拾贰元整" 421 | //upDigit(-1693) 422 | //"欠人民币壹仟陆佰玖拾叁元整" 423 | upDigit: function (n) { 424 | var fraction = ['角', '分', '厘']; 425 | var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']; 426 | var unit = [ 427 | ['元', '万', '亿'], 428 | ['', '拾', '佰', '仟'] 429 | ]; 430 | var head = n < 0 ? '欠人民币' : '人民币'; 431 | n = Math.abs(n); 432 | var s = ''; 433 | for (var i = 0; i < fraction.length; i++) { 434 | s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, ''); 435 | } 436 | s = s || '整'; 437 | n = Math.floor(n); 438 | for (var i = 0; i < unit[0].length && n > 0; i++) { 439 | var p = ''; 440 | for (var j = 0; j < unit[1].length && n > 0; j++) { 441 | p = digit[n % 10] + unit[1][j] + p; 442 | n = Math.floor(n / 10); 443 | } 444 | s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s; 445 | //s = p + unit[0][i] + s; 446 | } 447 | return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整'); 448 | }, 449 | //清除对象中值为空的属性 450 | //filterParams({a:"",b:null,c:"010",d:123}) 451 | //Object {c: "010", d: 123} 452 | filterParams: function (obj) { 453 | var _newPar = {}; 454 | for (var key in obj) { 455 | if ((obj[key] === 0 || obj[key]) && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') { 456 | _newPar[key] = obj[key]; 457 | } 458 | } 459 | return _newPar; 460 | }, 461 | //cookie 462 | //设置cookie 463 | setCookie: function (name, value, iDay) { 464 | var oDate = new Date(); 465 | oDate.setDate(oDate.getDate() + iDay); 466 | document.cookie = name + '=' + value + ';expires=' + oDate; 467 | }, 468 | //获取cookie 469 | getCookie: function (name) { 470 | var arr = document.cookie.split('; '); 471 | for (var i = 0; i < arr.length; i++) { 472 | var arr2 = arr[i].split('='); 473 | if (arr2[0] == name) { 474 | return arr2[1]; 475 | } 476 | } 477 | return ''; 478 | }, 479 | //删除cookie 480 | removeCookie: function (name) { 481 | this.setCookie(name, 1, -1); 482 | }, 483 | /*DOM*/ 484 | //检测对象是否有哪个类名 485 | hasClass: function (obj, classStr) { 486 | if(obj.className&&this.trim(obj.className,1)!==""){ 487 | var arr = obj.className.split(/\s+/); //这个正则表达式是因为class可以有多个,判断是否包含 488 | return (arr.indexOf(classStr) == -1) ? false : true; 489 | } 490 | else{ 491 | return false; 492 | } 493 | 494 | }, 495 | //添加类名 496 | addClass: function (obj, classStr) { 497 | if((this.istype(obj,'array')||this.istype(obj,'elements'))&&obj.length>=1){ 498 | for(var i=0,len=obj.length;i1){ 513 | for(var i=0,len=obj.length;i

708 | //

709 | //

.... 710 | //data-src储存src的数据，到需要加载的时候把data-src的值赋值给src属性，图片就会加载。 711 | //详细可以查看testLoadImg.html 712 | 713 | //window.onload = function() { 714 | // loadImg('load-img',100); 715 | // window.onscroll = function() { 716 | // loadImg('load-img',100); 717 | // } 718 | //} 719 | loadImg: function (className, num) { 720 | var _className = className || 'ec-load-img', _num = num || 0,_this=this; 721 | var oImgLoad = document.getElementsByClassName(_className); 722 | for (var i = 0, len = oImgLoad.length; i < len; i++) { 723 | if (document.documentElement.clientHeight + document.body.scrollTop > oImgLoad[i].offsetTop - _num && !oImgLoad[i].isLoad) { 724 | //记录图片是否已经加载 725 | oImgLoad[i].isLoad = true; 726 | //设置过渡，当图片下来的时候有一个图片透明度变化 727 | oImgLoad[i].style.cssText = "transition: ''; opacity: 0;" 728 | if (oImgLoad[i].dataset) { 729 | this.aftLoadImg(oImgLoad[i], oImgLoad[i].dataset.src, function (o) { 730 | setTimeout(function () { 731 | if (o.isLoad) { 732 | _this.removeClass(o, _className); 733 | o.style.cssText = ""; 734 | } 735 | }, 1000) 736 | }); 737 | } else { 738 | this.aftLoadImg(oImgLoad[i], oImgLoad[i].getAttribute("data-src"), function (o) { 739 | setTimeout(function () { 740 | if (o.isLoad) { 741 | _this.removeClass(o, _className); 742 | o.style.cssText = ""; 743 | } 744 | }, 1000) 745 | }); 746 | } 747 | (function (i) { 748 | setTimeout(function () { 749 | oImgLoad[i].style.cssText = "transition:all 1s; opacity: 1;"; 750 | }, 16) 751 | })(i); 752 | } 753 | } 754 | }, 755 | //7.对象数组的排序 756 | //var arr=[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:5,b:9},{a:4,b:2,c:5},{a:4,b:5,c:7}] 757 | //arraySort(arr2,'a,b') a是第一排序条件，b是第二排序条件 758 | arraySort: function (arr, sortText) { 759 | if (!sortText) { 760 | return arr 761 | } 762 | var _sortText = sortText.split(',').reverse(), _arr = arr.slice(0); 763 | for (var i = 0, len = _sortText.length; i < len; i++) { 764 | _arr.sort(function (n1, n2) { 765 | return n1[_sortText[i]] - n2[_sortText[i]] 766 | }) 767 | } 768 | return _arr; 769 | }, 770 | //8.数组扁平化 771 | steamroller: function (arr) { 772 | var newArr = []; 773 | for (var i = 0; i < arr.length; i++) { 774 | if (Array.isArray(arr[i])) { 775 | // 如果是数组，调用(递归)steamroller 将其扁平化 776 | // 然后再 push 到 newArr 中 777 | newArr.push.apply(newArr, steamroller(arr[i])); 778 | } else { 779 | // 不是数组直接 push 到 newArr 中 780 | newArr.push(arr[i]); 781 | } 782 | } 783 | return newArr; 784 | }, 785 | //另一种写法 786 | //steamroller([1,2,[4,5,[1,23]]]) 787 | //[1, 2, 4, 5, 1, 23] 788 | /* 789 | * i=0 newArr.push(arr[i]) [1] 790 | * i=1 newArr.push(arr[i]) [1,2] 791 | * i=2 newArr = newArr.concat(steamroller(arr[i])); 执行到下面 792 | * 第一次i=2进入后 i=0, newArr.push(arr[i]); [4] 793 | * 第一次i=2进入后 i=1, newArr.push(arr[i]); [4，5] 794 | * * i=2 newArr = newArr.concat(steamroller(arr[i])); 执行到下面 795 | * 第二次i=2进入后 i=0, newArr.push(arr[i]); [1] 796 | * 第二次i=2进入后 i=1, newArr.push(arr[i]); [1，23] 执行到下面 797 | * 第二次循环完，回到第一次进入后 newArr = newArr.concat(steamroller(arr[i])); [4,5].concat([1,23]) [4,5,1,23] 798 | * 然后回到第一次 [1,2].concat([4,5,1,23]) 799 | */ 800 | // steamroller: function (arr) { 801 | // var newArr = []; 802 | // for (var i = 0; i < arr.length; i++) { 803 | // if (Array.isArray(arr[i])) { 804 | // // 如果是数组，调用(递归)steamroller 将其扁平化 805 | // // 然后再 push 到 newArr 中 806 | // newArr = newArr.concat(steamroller(arr[i])); 807 | // } else { 808 | // // 不是数组直接 push 到 newArr 中 809 | // newArr.push(arr[i]); 810 | // } 811 | // } 812 | // return newArr; 813 | // }, 814 | //创建正则字符 815 | createKeyExp: function (strArr) { 816 | var str = ""; 817 | for (var i = 0; i < strArr.length; i++) { 818 | if (i != strArr.length - 1) { 819 | str = str + strArr[i] + "|"; 820 | } else { 821 | str = str + strArr[i]; 822 | } 823 | } 824 | return "(" + str + ")"; 825 | }, 826 | //关键字加标签（多个关键词用空格隔开） 827 | //ecDo.findKey('守侯我oaks接到了来自下次你离开快乐吉祥留在开城侯','守侯开','i') 828 | //"守侯我oaks接到了来自下次你离开快乐吉祥留在开城侯" 829 | findKey: function (str, key, el) { 830 | var arr = null, 831 | regStr = null, 832 | content = null, 833 | Reg = null, 834 | _el = el || 'span'; 835 | arr = key.split(/\s+/); 836 | //alert(regStr); // 如：(前端|过来) 837 | regStr = this.createKeyExp(arr); 838 | content = str; 839 | //alert(Reg);// /如：(前端|过来)/g 840 | Reg = new RegExp(regStr, "g"); 841 | content = content; 842 | //过滤html标签替换标签，往关键字前后加上标签 843 | content=content.replace(/<\/?[^>]*>/g, '') 844 | return content.replace(Reg, "<" + _el + ">$1"); 845 | }, 846 | //数据类型判断 847 | //ecDo.istype([],'array') 848 | //true 849 | //ecDo.istype([]) 850 | //'[object Array]' 851 | istype: function (o, type) { 852 | if(_type){ 853 | var _type = type.toLowerCase(); 854 | } 855 | switch (_type) { 856 | case 'string': 857 | return Object.prototype.toString.call(o) === '[object String]'; 858 | case 'number': 859 | return Object.prototype.toString.call(o) === '[object Number]'; 860 | case 'boolean': 861 | return Object.prototype.toString.call(o) === '[object Boolean]'; 862 | case 'undefined': 863 | return Object.prototype.toString.call(o) === '[object Undefined]'; 864 | case 'null': 865 | return Object.prototype.toString.call(o) === '[object Null]'; 866 | case 'function': 867 | return Object.prototype.toString.call(o) === '[object Function]'; 868 | case 'array': 869 | return Object.prototype.toString.call(o) === '[object Array]'; 870 | case 'object': 871 | return Object.prototype.toString.call(o) === '[object Object]'; 872 | case 'nan': 873 | return isNaN(o); 874 | case 'elements': 875 | return Object.prototype.toString.call(o).indexOf('HTML')!==-1 876 | default: 877 | return Object.prototype.toString.call(o) 878 | } 879 | }, 880 | //找出最长单词 (Find the Longest word in a String) 881 | //longestWord('Find the Longest word in a String') 882 | //7 883 | //longestWord('Find|the|Longest|word|in|a|String','|') 884 | //7 885 | longestWord: function (str, splitType) { 886 | var _splitType = splitType || /\s+/g, 887 | _max = 0; 888 | var strArr = str.split(_splitType); 889 | strArr.forEach(function (item) { 890 | if (_max < item.length) { 891 | _max = item.length 892 | } 893 | }) 894 | return _max; 895 | }, 896 | //句中单词首字母大写 (Title Case a Sentence) 897 | //这个我也一直在纠结，英文标题，即使是首字母大写，也未必每一个单词的首字母都是大写的，但是又不知道哪些应该大写，哪些不应该大写 898 | //ecDo.titleCaseUp('this is a title') 899 | //"This Is A Title" 900 | titleCaseUp: function (str, splitType) { 901 | var _splitType = splitType || /\s+/g; 902 | var strArr = str.split(_splitType), 903 | result = "",_this=this 904 | strArr.forEach(function (item) { 905 | result += _this.changeCase(item, 1) + ' '; 906 | }) 907 | return this.trim(result, 4) 908 | }, 909 | //5.手机类型判断 910 | browserInfo: function (type) { 911 | switch (type) { 912 | case 'android': 913 | return navigator.userAgent.toLowerCase().indexOf('android') !== -1 914 | case 'iphone': 915 | return navigator.userAgent.toLowerCase().indexOf('iphone') !== -1 916 | case 'ipad': 917 | return navigator.userAgent.toLowerCase().indexOf('ipad') !== -1 918 | case 'weixin': 919 | return navigator.userAgent.toLowerCase().indexOf('MicroMessenger') !== -1 920 | default: 921 | return navigator.userAgent.toLowerCase() 922 | } 923 | }, 924 | //过滤字符串(html标签，表情，特殊字符) 925 | //字符串，替换内容（special-特殊字符,html-html标签,emjoy-emjoy表情,word-小写字母，WORD-大写字母，number-数字,chinese-中文），要替换成什么，默认'',保留哪些特殊字符 926 | //如果需要过滤多种字符，type参数使用,分割，如下栗子 927 | //过滤字符串的html标签，大写字母，中文，特殊字符，全部替换成*,但是特殊字符'%'，'?'，除了这两个，其他特殊字符全部清除 928 | //var str='asd 654a大蠢sasdasdASDQWEXZC6d5#%^*^&*^%^&*$\\"\'#@!()*/-())_\'":"{}?

啊实打实大蠢猪自行车这些课程'; 929 | // ecDo.filterStr(str,'html,WORD,chinese,special','*','%?') 930 | //"asd 654a**sasdasd*********6d5#%^*^&*^%^&*$\"'#@!()*/-())_'":"{}?*****************" 931 | filterStr:function(str,type,restr,spstr){ 932 | var typeArr=type.split(','),_str=str; 933 | for(var i=0,len=typeArr.length;i]*>/g, _restr);break; 958 | case 'emjoy': _str=_str.replace(/[^\u4e00-\u9fa5|\u0000-\u00ff|\u3002|\uFF1F|\uFF01|\uff0c|\u3001|\uff1b|\uff1a|\u3008-\u300f|\u2018|\u2019|\u201c|\u201d|\uff08|\uff09|\u2014|\u2026|\u2013|\uff0e]/g,_restr);break; 959 | case 'word': _str=_str.replace(/[a-z]/g,_restr);break; 960 | case 'WORD': _str=_str.replace(/[A-Z]/g,_restr);break; 961 | case 'number':_str= _str.replace(/[0-9]/g,_restr);break; 962 | case 'chinese': _str=_str.replace(/[\u4E00-\u9FA5]/g,_restr);break; 963 | } 964 | } 965 | return _str; 966 | } 967 | } 968 | 969 | 970 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | let gulp = require('gulp'); 3 | let sass = require('gulp-sass'); 4 | let cleanCSS = require('gulp-clean-css'); 5 | /** 6 | * 编译sass文件 7 | */ 8 | gulp.task('sass', function () { 9 | return gulp.src('./*.scss') 10 | .pipe(sass().on('error', sass.logError)) 11 | .pipe(gulp.dest('./dist/css')); 12 | }); 13 | /** 14 | * 运行任务 15 | */ 16 | gulp.task('default', ['sass'], function () { 17 | gulp.watch('./src/sass/**/*.scss', ['sass']); 18 | }); 19 | /** 20 | * 压缩css 21 | */ 22 | gulp.task('minify-css',() => { 23 | return gulp.src('./dist/css/**/*.css') 24 | .pipe(cleanCSS({compatibility: 'ie9'})) 25 | .pipe(gulp.dest('./dist/css')); 26 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ec-css", 3 | "version": "1.0.0", 4 | "description": "ec-css ", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "browser-sync start --server --files '*.css,*.html'" 9 | }, 10 | "devDependencies": { 11 | "browser-sync": "^2.18.12", 12 | "gulp": "^3.9.1", 13 | "gulp-clean-css": "^3.7.0", 14 | "gulp-sass": "^3.1.0", 15 | "node-sass": "^4.5.3" 16 | }, 17 | "author": "chen", 18 | "license": "ISC" 19 | } 20 | -------------------------------------------------------------------------------- /reset.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:auto}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle} --------------------------------------------------------------------------------