【年度盛宴】期待已久的2012年度最佳 jQuery 插件揭曉

　　讓人期待已久的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 插件，能夠在圖片上添加額外的文本註釋、視頻和連接等等。 

精美Demo

• ✓  Bentos demo
• ✓  Cars demo
• ✓  Fashion demo
• ✓  Furniture demo

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

1. 下載 iPicture² 並解壓到開發目錄；
2. 打開 Wizard 頁面，上傳圖片並根據須要設置工具提示，而後拷貝生成的代碼；
3. 把代碼粘貼到你的網站頁面中並映入 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
    });
};

在線演示     插件下載

舒適提示：若是您看了這篇博文，以爲有所收穫，請點擊右下角的【推薦】，給以支持和鼓勵：）

頁面上雪花飛舞的效果實現能夠關注這篇文章《聖誕節，給博客添加浪漫的下雪效果！》，最後，祝朋友們聖誕快樂！！！

您可能感興趣的相關文章

• Web 前端開發人員和設計精華文章推薦
• 2012年度最佳Web前端開發工具和框架
• 精心挑選的精美 jQuery 圖片特效插件
• 精心挑選的優秀jQuery Ajax分頁插件
• 精心挑選的優秀 jQuery 文本特效插件

 

本文連接：期待已久的2012年度最佳 jQuery 插件揭曉

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源