jquery Plugin: 2012 Best jquery Plugin

Article Introduction: the long-awaited 2012 best jquery plugin was unveiled.

Recently, the famous foreign blog Wdl released the 2012 best JQuery plug-ins. Since its release in 2006, JQuery has been the most popular and widely used JavaScript framework for more than 6 years, thanks largely to the many technical communities around JQuery. Developers of the jquery community are constantly publishing various jquery plug-ins, and WEB developers can easily bring some stunning features to the project.

Arctext.js

Arctext.js is based on the lettering.js of the text rotation plug-in, according to the set radius of rotation to accurately calculate the rotation of each letter of the arc and evenly distributed.

Although CSS3 can also achieve character rotation, arctext.js can be easily implemented by arranging each letter to be quite complex along a curved path.

You can adjust the effect by setting the following four parameters:

1 2 3 4

radius /* 旋转的半径，最小值是字符长度的一半，如果设置为-1，则文本是直的，不会旋转。默认值是0 */ dir /* 旋转方向，1是向下，-1是向上。默认值是1 */ rotate /* 设置为true表示每个字符都旋转。默认值是true */ fitText /* 如果想使用fitText插件(http://fittextjs.com/)，则需要设置为true。默认值是false */

Online Demo Source Download

Stellar.js

As its slogan says: Parallax has never been easier, indeed, it can help to achieve the Web page parallax scrolling effect easily.

Add the data attribute to the tag (data-stellar-ratio, use the method reference Help document), and then run $.stellar () to see the cool jet lag effect.

1 2 3 4

// For example: $(window).stellar(); // or: $("#main").stellar();

You can also adjust the slack effect by setting the offset:

1 2 3 4

$.stellar({ horizontalOffset: 40, verticalOffset: 150 });

You can also add a data property to an element to configure the offset for each element, for example:

1 2 3

<div data-stellar-ratio="2" data-stellar-horizontal-offset="40" data-stellar-vertical-offset="150">

Online Demo plugin Download

Get Turn.js

This jQuery plugin can add a nice transition (transition) effect to a page, similar to a book or magazine.

Main Features

• ✓ supports running on the IPad and IPhone;
• ✓ Simple, beautiful and powerful API interface;
• ✓ can dynamically load pages via Ajax;
• ✓ Pure HTML5/CSS3 renders page content;
• ✓ offers two beautiful Transitions (transition) effects;
• ✓ with Turn.html4.js, you can work in a lower-version browser such as IE8.

Very simple to use, sample code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16-17

<div id="flipbook"> <div class="hard"> Turn.js div> <div class="hard">div> <div> Page 1 div> <div> Page 2 div> <div> Page 3 div> <div> Page 4 div> <div class="hard">div> <div class="hard">div> div> <script type="text/javascript"> $("#flipbook").turn({ width: 400, height: 300, autoCenter: true }); script>

Online Demo plugin Download

Flexslider 2.0

Flexslider is a lightweight, responsive jQuery content scrolling plugin that can help you easily create beautiful content scrolling effects on your project.

The plug-in is also the 2011 best jQuery Plug-in, this year was WooThemes acquisition and release of the 2.0 version, so continue to be selected in the 2012 annual list.

Main Features

• ✓ Simple, semantically labeled;
• ✓ supports all the mainstream browsers;
• ✓ Horizontal/Vertical slide and fade animation;
• ✓ supports multiple sliders, callback APIs, and more;
• ✓ Touch sliding supports hardware acceleration;
• ✓ can customize navigation options.
• ✓ Compatible with the latest version of JQuery.

Very simple to use, sample code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> li> <li> <img src="slide2.jpg" /> li> <li> <img src="slide3.jpg" /> li> ul> div> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $(".flexslider").flexslider(); }); script>

Online Demo plugin Download

Hammer.js

Hammer.js is a JavaScript library based on JQuerythat implements multi-touch in Web pages.

Support Tap, Double Tap, Drag, Hold, swipe and Transform six kinds of touch gestures.

Main Features

• ✓ In the website quickly realize touch event;
• ✓ Light volume, GZIP compressed only 2KB;
• ✓ function focused, dedicated to multi-touch gestures;
• ✓ Completely independent library, also provides the JQuery plug-in version;

Online Demo plugin Download

IPicture

IPicture is a jQuery plugin for interactive photo effects that adds additional annotations to the picture.

Jquery Transit

Implementation of the Super smooth CSS3 Transformations (transform) and transitions (transition effect) of the jQuery plug-in, the latest version: v0.1.3.

Slabtext

A jQuery plugin used to make large, bold, responsive headline headlines.