闲来无事, 做这么些年前端了, 给大家推荐几个自己目前用的最多的而且功能又很强大的第三方插件.
1,Swiper(轮播插件)
这是我用到现在功能最全面, 性能最流畅的轮播插件, 包含了各种轮播动效, 还提供了相应的方法和回调, 可以更全面的操作页面. 可同时兼容 pc 端和移动端.
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <link rel="stylesheet" type="text/CSS" href="http://www.swiper.com.cn/dist/css/swiper.min.css">
- <style type="text/css">
- .swiper-container{
- width: 600px;
- height: 400px;
- color: #fff;
- text-align: center;
- line-height: 400px;
- font-size: 25px;
- }
- .swiper-wrapper,.swiper-slide{
- width: 100%;
- height: 100%;
- }
- .slide1{
- background:#FB6753;
- }
- .slide2{
- background: #FC8B53;
- }
- .slide3{
- background: #FDD55A;
- }
- </style>
- </head>
- <body>
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide slide1">Slide 1</div>
- <div class="swiper-slide slide2">Slide 2</div>
- <div class="swiper-slide slide3">Slide 3</div>
- </div>
- </div>
- <script src='http://www.swiper.com.cn/dist/js/swiper.min.js'></script>
- <script type="text/javascript">
- var mySwiper = new Swiper ('.swiper-container', {
- loop: true,
- effect : 'cube'
- })
- </script>
- </body>
- </html>
看, 写一个 3D 的轮播就是这么简单, 还兼容移动端. 地址: http://www.swiper.com.cn/ http://www.swiper.com.cn/
2,Moment.js(日期处理类库)
这是一款很强大的操作日期的控件. 什么日期格式化, 相对时间, 日历时间, 国际化等等包罗万象. 一行代码就能搞定你要的结果.
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <body>
- <script src='http://momentjs.cn/downloads/moment.min.js'></script>
- <script type="text/javascript">
- moment().format('MMMM Do YYYY, h:mm:ss a'); // 三月 30 日 2017, 4:11:00 下午
- moment().format('dddd'); // 星期四
- moment().format("MMM Do YY"); // 3 月 30 日 17
- moment().format('YYYY [escaped] YYYY'); // 2017 escaped 2017
- moment().format();
- document.write(moment().format('MMMM Do YYYY, h:mm:ss a'))
- </script>
- </body>
- </html>
这里我就打印了一个, 别的大家可以自己去官网看, 它的 API 有很多. 地址: http://momentjs.cn/docs/ http://momentjs.cn/docs/
3,Underscore.js
Underscore 一个 JavaScript 实用库, 提供了一整套函数式编程的实用功能, 但是没有扩展任何 JavaScript 内置对象. 它封装了有很多实用的方法, 能同时操作对象, 数组, 数组对象, 对象数组等等, 能大大的提高编程效率, 而不需要你自己去写什么继承, call, 闭包. Demo 就不写啦, 这个去官网直接看就行了, 有很多.
PS: 如果你的前端水平停滞不前, 把这个库的源码都看一遍, 保证能更上一个台阶 (大神自动忽略).
地址: http://www.css88.com/doc/underscore/ http://www.css88.com/doc/underscore/
4,Ant Design
ant design 是阿里团队开发的一个基于 React 的 UI 库, 所以使用它, 就要有 React 的基础. 你有没有想过只要一天就能搞定一个后台管理系统的, 包括数据 (前提是后端给的接口不坑爹), 而且页面还很美观. 用 ant design 就能做到, 结合 React 高效开发.
地址: https://ant.design/index-cn https://ant.design/index-cn
5,Smooth-scrollbar
这是一款很优秀的美化滚动条的类库, 有你之前没想过的滚动阻尼等属性, 同时兼容 pc 和移动. 让你的滚动更加的顺滑, 说是没感觉的, 直接体验一下就知道了.
同时, 大家都知道微信浏览器有一个问题, 就是不能实时的触发 onscroll 方法, 用这个类库就可以了, 它提供模拟的 onscroll 方法, 能实时触发, 能做出比微信更流畅的滚动效果. 有没有觉得微信滑倒底部超出再弹回的效果不错, 这个库可以轻松帮你实现, 还可以改变各种系数. 而且它还有对应的 React 和 Angular 的组件, 不要太好.(Demo 的图片比较大, 大家稍等一下就会出来)
PS: 它的 js 在官网还是用 webpack 打包的, 扒了半天才扒下来 = - =.
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style type="text/css">
- div{
- width: 600px;
- height: 600px;
- border: 1px solid #e0e0e0;
- }
- img{
- display: block;
- }
- </style>
- <script src='http://www.joudee.com/smooth-scrollbar.js'></script>
- </head>
- <body>
- <div data-scrollbar>
- <img src="http://idiotwu.github.io/smooth-scrollbar/images/your_diary.jpg" height="1080" width="1920">
- </div>
- <script type="text/javascript">
- Scrollbar.initAll({overscrollEffect:'bounce', overscrollEffectColor:'#87ceeb'});
- </script>
- </body>
- </html>
地址: http://idiotwu.github.io/smooth-scrollbar/ http://idiotwu.github.io/smooth-scrollbar/
还有别的明天再更啦!!!
来源: http://www.qdfuns.com/article/24933/967c8377fe0ea79edb8bbd9ac36da796.html