2013年60个最好的jQuery插件

2013年中所发布的60个最佳jQuery插件，希望以下插件可以帮助你。

1. Typehead.js

推ter has open sourced a very nice project named Typeahead.js for building smart auto-complete form fields. It comes as a jQuery plugin, shows suggestion as-users-type and can feature top suggestions with the help of styling. The plugin can work with both local or remote datasets and it is optimized for speed as it can prefetch the dataset, store it on the client-side and run the queries quickly.

2. Perfect Scrollbar

Perfect Scrollbar is a lightweight (14kb) jQuery plugin for creating them without any hassle. It doesn’t ruin the default layout or require/apply any CSS changes. The plugin works with containers of any size and re-arranges the positions if a container-resize happens. Also, the design of the scrollbar can be customized completely with CSSand it supports jquery-mousewheel plugin in case you want to make use of it.

3. iLightbox

iLightBox is a fresh alternative to other jQuery lightbox plugins and there is a strong chance that, although it is a paid resource, it may become your favorite. It can present images, videos (油Tube, Vimeo, HTML5 video), other HTML and there is an optional fullscreen mode.

4. Textillate.js

The plugin makes use of Animate.css + Lettering.js and it is capable of creating lots of animations like flash, bounce, shake, pulse, fade, rotate, flip and much more.

5. Lazy Line Painter

Lazy Line Painter is a pretty original jQuery plugin for preparing and presenting SVG path animations using jQuery. It works for any SVG file (any design can be exported with Illustrator in seconds) and simply by drag ‘n’ dropping it to an online generator provided by the plugin. And, after that, just insert that code into any web page and it will work.

6. Elevate Zoom

elevateZoom is a highly-customizable jQuery plugin for creating image-zoom interfaces with ease. It can work with a single high-quality image or two images (a thumb and a high-quality version).

7. Ayaslider

ayaSlider is a flexible jQuery slider plugin with a very simple usage and setup. The slider can display an unlimited number of items where any HTML can be used for the slides. It has few options to define like the easeIn/easeOut values, the delay between each slide and the prev/next selectors.

8. Chardin.js

Chardin.js is a jQuery plugin which does that in a very chic way (inspired from the recent Gmail new composer tour). It uses the information mentioned in “custom data attributes” of the given elements. And, once triggered, it activates an overlay that focuses on the element and displays the info with visual guides (that can be positioned however wanted).

9. Sidr

Sidr is a jQuery plugin for creating “hidden side menus” on-the-fly. It can be set to be displayed at right or left, a single page can have multiple side menus and offers multiple methods (existing or remote content) for loading the content. For responsive layouts, a Sidr menu can be attached to a button (that is displayed for specific screen sizes with media -queries) and it’ll be a very handy navigation solution for small screens.

10. Scroll UP

ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease. To create a visible line to help determine an ideal scroll distance from the top, assign a valid CSS color to the activeOverlay setting.

11. Swipebox

Swipebox is a jQuery lightbox plugin that has support for touch eventsand works well in responsive layouts. It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too.

12. Nested

Nested is a jQuery plugin for generating multi-column grid layouts with zero gaps. The plugin creates a matrix of all elements, builds a multi column grid and tries to fill any gaps by reordering the elements. There are various other solutions out there that does the same. However, Nested applies one small action: it resizes any element at the bottom of the grid to guarantee the gap-free layout.

13. Unslider

Unslider is a tiny jQuery plugin (less than1kb minified and gzipped) for sliding any HTML content. It adapts to responsive layouts out-of-the-box and arranges itself automatically if the size of each slide is different. The slides can be browsed with the help of a bullet navigation or using keyboards.

14. Spectrum

Spectrum is a jQuery colorpicker plugin that probably comes with all the features you are looking for.
It is image-free (only CSS and JS) and can be used for all browsers or only as a polyfill for the input[type=color] of HTML5 . The picker is actually familiar to designers/developers as it is the same one that comes with WebKit DevTools (created by the same developer) but now available as a jQuery plugin.

15. Spoiler Alert

Spoiler Alert is a happy little jQuery plugin to hide spoilers on your site. Don’t spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click. To make your site spoiler free, simply include spoiler.js, then, add this somewhere: $(’spoiler, .spoiler’).spoilerAlert(). To control the maximum and partial blurs, you can pass arguments to the function. Spoiler Alert has been tested in Chrome, Firefox, Safari and Mobile Safari.

16. Jpanel Menu

jPanelMenu is a jQuery plugin that creates a paneled-style menu like the type seen in the mobile versions of 非死book and Google, as well as in many native iPhone applications.
Animation is handled by CSS transitions, for browsers with support. CSS transitions are hardware-accelerated on supporting devices, so the animations are silky smooth.

17. Mixitup

MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It’s perfect for portfolios, galleries, blogs, or any categorized or ordered content.

18. Magnific Popup

Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device. The majority of lightbox plugins require you to define size of it via JS option.

19. Tooltipster

Tooltipster is a powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS. Tooltipster allows you to use any HTML tag you can think of inside your tooltips.

20. Menu Aim

menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu’s contents. This problem is normally solved using timeouts and delays.

21. FlipClock

FlipClock.js is a jQuery plugin which replicates this effect to present anything related to time. It has support for working as a clock, countdown or timer and can be customized completely with CSS. There is an option for auto-start, multiple methods exist for controlling it (start, stop, getTime, setTime..) with their callbacks.

22. Least.js

Least.js is a jQuery-powered image gallery that can display images in a Pinterest-like layout. The images are displayed from an unordered list where their order is randomized on each load. Any clicked image doesn’t load the bigger version in a modal but by sliding other items down and the big version on the top (kind of similar to Google Image search).

23. MMenu

jQuery.mmenu is a slick plugin that brings the same behavior into any -mobile- web layout. It transforms unordered lists with unlimited sub-lists into menu items and has multiple options for customization.

24. Audio Player.js

AudioPlayer.js is a jQuery plugin for quickly placing a HTML5-powered audio player to any web page. The player’s interface is chic (doesn’t use any images for that), has a responsive layout and touch support. It has the major controls (play/pause, volume and duration) and weights only 4kb.

25. Noui Slider

It is lightweight 2.7 kb jquery Range Slider plugin which supports for single or double handles, custom starting values, vertical/horizontal orientation and the ability to get/set values. It also works with touch devices and can customized with css.

26. Windows

Windows is a lightweight jQuery plugin for nicely scrolling the full-screen. It provides a simple and handy API for managing the page/content position to ease the browsing experience.

27. jQuery Swatches

jQuery.swatches is a free to use that turns a one-line div into a sweet color swatch. You can customize the class as you want. Using different classes would allow you to render groups of swatches at individual times by calling swatchify() on a different selector.

28. Transit

Transit is a super-smooth CSS transitions & transformations for jQuery. You can make transition on any CSS property. They will happen much smoother than if you were to use jQuery’s default .animate(). You can easily translate, rotate, scale, skew and etc.

29. Progression .js

Progression.js is a jQuery plugin that gives users real time hints & progress updates as they complete forms. All you have to do is to give your form a unique ID. You then need to add a data attribute of data-progression to each element that needs to be a step in the form progression. Once you have created your form you will need to initiate the plugin.

30. jQuery Tour Bus

jQuery TourBus is a jQuery tour/walkthrough plugin. It takes more of a toolkit approach than some of the alternatives that try to have focusing elements, auto-progress with timers and indicators and etc. Start by including the jQuery plugin and base styles on your page, of course. Then we can define some ‘legs’ of our tour.

31. Pop Easy

Pop Easy is a jQuery plugin for quickly creating completely customizable modals. The plugin is lightweight (2kb) and has support for displaying any HTML element, including videos. Regarding the design, the default modal already has a good-looking interface and it can be changed/improved with CSS.

32. Smint

Smint is a jQuery plugin that can turn any given element into a sticky menu instantly. Also, the plugin has support for smooth scrolling (which is usually used in one-page websites). The plugin is almost plug ‘n’ play and the only customization provided is “scrolling speed”.

33. Fullpage.js

FullPage.js is a simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites). It allows to create fullscren scrolling websites as well as adding some landscape sliders inside the sections of the sit

34. Scrolld.js

Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience.

35. Ferro Slider

FerroSlider is a jQuery slider for creating full-page sliders (or content/image sliders) of almost any type. The contents can be placed in a flexible way, horizontal + vertical, and the plugin will simplify browsing through them easily.

36. One Page Scroll

One Page Scroll, a jQuery plugin, simplifies creating such websites so easy. It requires minimal setup, just create your HTML structure, call the function and you are ready-to-go. Optionally, the easing function, its speed and looping behavior can be set too. And, it has support for SEO-friendly URLs for each page.

37. Wrangle

Wrangle is a responsive, touch-friendly selection plugin for jQuery or Zepto. Wrangle offers a unique method of multiple selection: by drawing a line through items to select them. It gives your app a new way to perform multiple selections: a mouse, a finger or a stylus.

38. Tidy Time

Want to display a time-based update in people-friendly language? TidyTime.js is a jQuery plugin that does just that, converting standard time formats into personable declarations of time.

39. Animate Scroll

AnimateScroll is a simple jQuery plugin for adding easing effects to scrolling. It is possible to customize the style of scrolling (30+ scrolling effects) and scroll speed. There is also a “padding” option where we can manipulate “the position where the scrolling ends”.

40. nProgress

NProgress.js is a nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening. It’s a slim progress bars for Ajax’y applications inspired by Google, 油Tube, and Medium. It’s perfect for Turbolinks, Pjax, and other Ajax-heavy apps.

41. FlowType.js

FlowType.JS is a jQuery plugin which can auto-resize the font-size and line-height (according to the width of the element wrapping it) so that our content is displayed just as we prefer.

41. Glide.js

Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It’s simple, lightweight and fast. Designed to slide, no less, no more.
It works on smartphones, tablets and desktops. It supports Swipe event, Arrows and bullets navigation, Keyboard navigation, Public API with callbacks, Autoplay and Pause on hover. It is released under MIT License.

42. Intention.js

Intention.js, created by Dow Jones, is a jQuery plugin for easily developing responsive layouts. The plugin reduces the need for CSS media queries and provides a highly-flexible solution for restructuring HTML. It has 3 basic manipulations, attribution, class and placement, where they can all be set with HTML attributes.

43. Big Foot

It automatically detects the footnote link and content, turns the link into an easy-to-click button, and puts up a popover when the reader clicks on the footnote button.

44. Stickup

stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.

45. Free Wall

Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layout, images layout, nested grid, fluid grid, metro style layout, pinterest like layout with nice CSS3 animation effects and call back events.

46. Slippry

Slippry is a jQuery image gallery plugin for that has modern features. First of all, it uses HTML5-CSS3 markup and works well with responsive layouts (optional). It can be styled with Sass or CSS and has multiple transition options including Ken Burns effect.

47. SlideMe

SlideMe! is responsive, CSS3 compatible jQuery slider plugin which supports both limited or full screen views. It can be used vertically or horizontally, makes use of CSS3 transitions and has support for pagination.

48. Adaptive Background

Adaptive Backgrounds is a jQuery plugin for extracting dominant colors from images and applying it to its parent element.

49. Dynatable

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it’s not just for tables. The purpose of Dynatable is to provide a simple, extensible API, which makes viewing and interacting with larger datasets easy.

50. jQuery Label Better

jQuery Label Better helps you label your form input like a boss with beautiful animation and without taking up space. The uniqueness about this plugin is that all you have to do is add a placeholder text, and we will show the label only when the user needs it.

51. Maplace.js

Maplace.js is a small Google Maps Javascript plugin for jQuery that helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map. It requires jQuery and Google Maps API v3 so you need to have both in your page.

52. Auto Fix Anything

Auto Fix Anything is a little plugin will let you automatically fix position of any container on your website with one JS call. With this plugin you can dynamically fix a container within the viewport.

53. Ion.Sound

Ion.Sound is a jQuery plugin for playing sounds on events. It has been tested on Google Chrome, Mozilla Firefox, Opera, Safari, IE(9.0+) and mobile browsers. Ion.Sound freely distributed under terms of MIT license.

54. jQuery Interactive 3D

jQuery Interactive 3D is a plugin that allows us to accomplish a similar functionality using multiple images. It is so easy to use and works with a simple function and a list of specifically-named images.

55. Super Simple Text Rotator

This jQuery plugin, by Pete R., makes such text-rotating so easy and fun. It works by simply storing the “to-be-rotated content” inside a span with class rotate and separating them with commas. The plugin handles the rest.

56. jQuery.Pin

jQuery.Pin makes it simple to pin text to your pages, so that it stays put as you scroll. It also works with other elements, like navigation, and can be set to stick only to certain parts of the page.

57. JInvertScroll

jInvertScroll is a jQuery plugin that manipulates the default scrolling behavior and forces a horizontal scroll. The plugin is lightweight (less than1kb) and works with almost no setup. Adding a specific class to wrapper elements and calling a JS function is enough.

58. Clndr.js

CLNDR.js is a jQuery plugin for creating calendars and customizing them however we want. The plugin doesn’t generate any markup but uses an Underscore.js HTML template to fill with data.

59. Power Ranger

Power Ranger is a lightweight jQuery plugin which helps users to resize number (ranged)inputs based on length of characters.

60. Allofthelights.js

Allofthelights.js is a jQuery plugin that can change the opacity of the whole webpage but leave the video player. This is for helping the user to easily focus on the video and there is built-in support for 油Tube, Vimeo, DailyMotion.. and custom players can be added too.