期待已久的2012年度最佳 jQuery 插件揭曉

讓人期待已久的2012年度最佳 jQuery 插件終于發布了。jQuery 自2006年發布以來，經過6年的迅速發展，目前已是最流行和使用最廣泛的 JavaScript 框架，這主要歸功于眾多圍繞 jQuery 的技術社區。jQuery 社區的開發者持續不斷的在發布各種 jQuery 插件，Web 開發人員能夠非常輕松把一些驚艷的功能到項目中。

　　讓人期待已久的2012年度最佳 jQuery 插件終于發布了。jQuery 自2006年發布以來，經過6年的迅速發展，目前已是最流行和使用最廣泛的 JavaScript 框架，這主要歸功于眾多圍繞 jQuery 的技術社區。jQuery 社區的開發者持續不斷的在發布各種 jQuery 插件，Web 開發人員能夠非常輕松把一些驚艷的功能到項目中。推薦閱讀：《2011年度最佳 jQuery 插件》。

Arctext.js

Arctext.js 是基于 Lettering.js 的文字旋轉插件，根據設置的旋轉半徑準確計算每個字母的旋轉弧度并均勻分布。

雖然 CSS3 也能夠實現字符旋轉效果，但是要讓安排每個字母都沿著彎曲路徑排布相當的復雜，Arctext.js 則可以輕松實現。

可以通過設置下面四個參數調整效果：

radius  /* 旋轉的半徑，最小值是字符長度的一半，如果設置為-1，則文本是直的，不會旋轉。默認值是0 */
dir     /* 旋轉方向，1是向下，-1是向上。默認值是1 */
rotate  /* 設置為true表示每個字符都旋轉。默認值是true */
fitText /* 如果想使用fitText插件(http://fittextjs.com/)，則需要設置為true。默認值是false */

在線演示源碼下載

stellar.js

正如它的口號所說：Parallax has never been easier，的確，它能幫助輕松的實現網頁視差滾動效果。

給標簽添加data屬性（data-stellar-ratio等，使用方法參考幫助文檔），然后運行$.stellar()就可以看到很酷的時差滾動效果了。

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

還可以通過設置偏移量來調整時差效果：

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

也可以為元素添加data屬性來配置每個元素的偏移，例如：

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

在線演示插件下載

Get turn.js

這款 jQuery 插件能夠給頁面添加漂亮的過渡（transition）效果，類似于書本或者雜志。

主要特色

? 支持運行于 iPad 和 iPhone；
? 簡單，美觀和強大的 API 接口；
? 可以通過 Ajax 動態加載頁面；
? 純 HTML5/CSS3 呈現頁面內容；
? 提供兩種漂亮的過渡（transition）效果；
? 借助 turn.html4.js，可以在 IE8 等低版本瀏覽器工作。

使用非常簡單，示例代碼：

<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>

在線演示插件下載

Flexslider 2.0

FlexSlider 是一款輕量的響應式 jQuery 內容滾動插件，能夠幫助你在項目輕松的創建漂亮的內容滾動效果。

這款插件也是 2011 年度最佳 jQuery 插件，今年被 WooThemes 收購并發布了2.0版本，因此繼續入選 2012 年度榜單。

主要特色

? 簡單的，語義化的標簽；
? 支持所有主流的瀏覽器；
? 水平/垂直滑動和淡入淡出動畫；
? 支持多個滑塊，回調 API，以及更多；
? 觸摸滑動支持硬件加速；
? 能夠自定義導航選項。
? 兼容最新版本的 jQuery。

使用非常簡單，示例代碼：

<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>

在線演示插件下載

hammer.js

Hammer.js 是一個基于 jQuery，在網頁中實現多點觸摸 JavaScript 庫。

支持 Tap、Double Tap、Drag、Hold、Swipe 和 Transform 六種觸摸手勢。

主要特色

? 在網站中快速實現 Touch 事件；
? 輕量，GZIP 壓縮后只有2KB；
? 功能專注，專用于多點觸摸手勢；
? 完全獨立的庫，也提供了 jQuery 插件版本；

詳細使用幫助可參考插件的Github主頁，下面是簡單示例：

$("#element")
   .hammer({
        // options...
   })
   .bind("tap", function(ev) {
        console.log(ev);
   });

在線演示插件下載

iPicture

iPicture 是一款用于制作交互式照片效果的 jQuery 插件，可以在圖片上添加額外的文本注釋、視頻和鏈接等等。

零基礎使用的三個簡單步驟

下載 iPicture² 并解壓到開發目錄；
打開 Wizard 頁面，上傳圖片并根據需要設置工具提示，然后拷貝生成的代碼；
把代碼粘貼到你的網站頁面中并映入 ipicture.js 和 iPicture.css 兩個文件，搞定！

幫助文檔插件下載

Jquery Transit

實現超平滑的 CSS3 transformations（變換）和 transitions（過渡效果）的 jQuery 插件。

支持的效果：

? translate(x, y)、rotateX(deg)、rotateY(deg)；
? rotate(deg)；
? rotate3d(x, y, z, deg)；
? scale(x, [y])；
? perspective(px)；
? skewX(deg)、skewY(deg)

你可以使用 jQuery 設置各種 CSS 變換效果，下面是簡單的示例代碼：

$("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });

在線演示插件下載

SlabText

一款用于制作大號，加粗的響應式（Responsive）頭條標題的 jQuery 插件。

詳細使用方法參考插件主頁，下面是簡單示例代碼：

// Function to slabtext the H1 headings
function slabTextHeadlines() {
    $("h1").slabText({
        // Don't slabtext the headers if the viewport is under 380px
        "viewportBreakpoint":380
    });
};

在線演示插件下載