一些前端用的JS插件

Posted 2020-10-05 南瓜壳

整理一些常用的JS库，其中大多数是jQuery相关插件，也有Bootstrap辅助插件及非jQuery插件。其功能涉及：页面布局、图片幻灯片播放、图片像册展示、功能辅助等内容。本篇只是简单介绍插件功能，以后使用到相关插件时再补充介绍插件使用方法的文章。

1. jQuery Easing：jQuery 动画效果扩展
2. jQuery Migrate：jQuery 应用迁移辅助插件
3. Modernizr：专为HTML5和CSS3开发的功能检测类库
4. jQuery Flexslider：响应式 jQuery 内容滚动插件
5. WOW：在页面滚动时展现动感的元素动画效果
6. Sticky：让某个元素一直浮动在页面某个位置
7. Bootstrap Hover Dropdown：Bootstrap鼠标悬停自动下拉
8. jQuery Stellar：基于jQuery的视差滚动插件
9. Owl Carousel：强大实用的jQuery幻灯片插件
10. YTPlayer：基于jQuery的YouTube视频播放插件
11. jQuery Waypoints：jQuery滚动监听插件
12. easyPieChart：轻量级的图表插件
13. Isotope：jQuery智能布局插件
14. jQuery imagesLoaded：jQuery图片加载插件
15. jQuery Countdown：精确到毫秒的jquery倒计时插件
16. jQuery Counterup：jQuery数字动态累加jQuery
17. jqBootstrapValidation：用于Bootstrap表单的JQuery验证框架
18. jQuery Revolution Slider：强大的视差响应幻灯插件

 

1. jQuery Easing：jQuery 动画效果扩展

jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果，jQuery Easing（jquery.easing.js）是一款jQuery动画效果扩展增强插件，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。

jQuery Easing是一款比较老的jQuery插件，在很多网站都有应用，尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧，且有多种动画方案供选择，使用简单，而且免费。

2. jQuery Migrate：jQuery 应用迁移辅助插件

jQuery 版本之间有区别。比如1.9版本对于 live()，die()，toggle()，sub()，$.browser 等等都已经不支持了。 在不改变你网站代码的同时，要使用 1.9 之后的版本，你需要使用 jQuery migrate（jquery-migrate）进行转移、过度。

3. Modernizr：专为html5和CSS3开发的功能检测类库

Modernizr（moderniz.js）是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。

当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的 标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。

4. jQuery Flexslider：响应式 jQuery 内容滚动插件

Flexslider（jquery.flexslider.js）是一款轻量的响应式基于jQuery的内容滚动插件。Flexslider能够帮助你在项目轻松的创建漂亮的内容滚动效果。这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件，值得大家在网站开发中试试。它能让你轻松的创建内容滚动的效果，具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。

5. WOW：在页面滚动时展现动感的元素动画效果

在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。

Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 javascript 视差插件小，类似 Scrollorama（这个非常华丽，但是也更繁杂）。Wow.js 非常容易安装和使用。如果你使用 Wow.js，你可以非常快的启动，执行代码。

6. Sticky：让某个元素一直浮动在页面某个位置

Sticky（sticky.js）一个jQuery插件，使你能够做任何元素在您的网页上总是可见的。jQuery Sticky可以让任意元素固定在页面的某个且保持可见。可以作为顶部固定导航显示插件，滚动网页下来，保持处理滚动元件在视图中，并不会因为页面滚动而消失，也不会被其他元素覆盖。

7. Bootstrap Hover Dropdown：Bootstrap鼠标悬停自动下拉

Bootstrap Hover Dropdown（bootstrap-hover-dropdown.js）插件，用于鼠标悬停时使dropdown元素下拉，增强用户体验

8. jQuery Stellar：基于jQuery的视差滚动插件

jQuery Stellar（ Stellar.js）能帮助轻松的实现网页视差滚动效果,提供任何滚动元素的视差滚动效应。只需给标签添加data属性，然后运行$.stellar()就可以实现酷炫的视差滚动了

9. Owl Carousel：强大实用的jQuery幻灯片插件

Owl Carousel（ owl.carousel.js）是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有以下特点：兼容所有浏览器、支持响应式、支持 CSS3 过度、支持触摸事件、支持 JSON 及自定义 JSON 格式、支持进度条、支持自定义事件、支持延迟加载、支持自适应高度等

10. YTPlayer：基于jQuery的YouTube视频播放插件

YTPlayer（jquery.mb.YTPlayer.js）是一款基于jQuery的YouTube视频播放插件 这个插件能在让你在你的网站播放你喜欢的YouTube视频，或把你的YouTube视频做为你网站的HTML背景。不过这个插件在天朝似乎意义不大。

11. jQuery Waypoints：jQuery滚动监听插件

jQuery Waypoints（Waypoints.js）是一款用于捕获各种滚动事件的插件。 使用Waypoints.js可以在用户滚动滑条的时候，就能触发各种各样的动态效果。比如图片浮现、文字漂移等各种各样的动画等。同时Waypoints还支持固定元素和无限滚动的功能，功力十分强大。

插件介绍：一个元素滚动监听插件 Waypoints

12. easyPieChart：轻量级的图表插件

jQuery East Pie Chart（easypiechart.js）是一个轻量级的jQuery插件，主要用来渲染和制作漂亮的饼图及动画效果，基于与HTML5的canvas元素。您可以通过一组这些选项的初始化函数来设置一个自定义的行为。这个插件支持支持canvas元素所有主流浏览器。 随着excanvas你甚至可以呈现在IE 7 +8的图表

13. Isotope：jQuery智能布局插件

Isotope（jquery.isotope.js）是一款优秀的jquery自适应插件，支持大多数浏览器，需要jquery 1.4.3及其以上版本。你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。同时Isotope还有许多很酷的动画。

14. jQuery imagesLoaded：jQuery图片加载插件

imagesLoaded（jquery.imagesloaded.js）插件是在图片加载成功后才做一系列操作,检测图像是否已经加载，在图片加载成功后才做一系列操作。

插件介绍：图片延时加载插件 imagesLoaded

15. jQuery Countdown：精确到毫秒的jQuery倒计时插件

jQuery Countdown（jquery.countdown）是一款免费的jQuery倒计时插件，使用非常简单，直接下载源文件拷贝里面的代码到你需要使用的页面，然后自定义倒计时的开始时间即可，支持需要IE8+浏览器。

插件介绍：jQuery 倒计时插件 jQuery.countdown

16. jQuery Counterup：jQuery数字动态累加jQuery

jQuery Counterup（jquery.counterup.js）一个jQuery数字显示插件，用于数字从低到高动态累加，可以在一定时间内将数字动态的由0显示到指定的值。

插件介绍：数字累加插件 CounterUp

17. jqBootstrapValidation：用于Bootstrap表单的jQuery验证框架

jqBootstrapValidation（jqBootstrapValidation.js）是一个用于Bootstrap表单的JQuery验证框架。验证直接用data-方式进行代码编写，不需要编写JS格式，支持邮箱验证、数字型最大最小值验证、长度验证、正则表达式验证、异步验证、以及组合式验证、提交出错成功时回调显示。

18. jQuery Revolution Slider：强大的视差响应幻灯插件

jQuery Revolution Slider（jquery.themepunch.revolution.js）是一个具有视差功能的幻灯片插件，此插件是wordpress上目前为至最强大的幻灯片插件，具有自适应功能、可创建全宽幻灯片、具有视差效果，所有幻灯片拥有的功能他全部拥有。

Slider Revolution是codecanyon上销量第一的wordpress幻灯插件，themeforest中wordpress主题使用率最高的幻灯插件。文章缩略图、图片切换、动画效果、3d效果…只有你想不到，没有它做不到，Slider Revolution幻灯插件的强大只有你使用过后才能知道。这也是themeforest众多主题作者把它作为主题内置插件的原因。