2012年度最佳jQuery插件揭曉

refer: http://www.php100.com/html/webkaifa/javascript/2012/1225/11845.html

近日，國外著名博客WDL發佈了2012年度最佳jQuery 插件。jQuery 自2006年發佈以來，經過6年的迅速發展，目前已是最流行和使用最廣泛的JavaScript 框架，這主要歸功於衆多圍繞 jQuery 的技術社區。jQuery 社區的開發者持續不斷的在發佈各種 jQuery 插件，Web 開發人員能夠非常輕鬆把一些驚豔的功能到項目中。

 

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 插件版本；
在線演示     插件下載