2012年度最佳jQuery插件揭晓

2023-9-17

让人期待已久的2012年度最佳 jQuery 插件终于发布了。jQuery 自2006年发布以来，经过6年的迅速发展，目前已是最流行和使用最广泛的 JavaScript 框架，这主要归功于众多围绕 jQuery 的技术社区。jQuery 社区的开发者持续不断的在发布各种 jQuery 插件，Web 开发人员能够非常轻松把一些惊艳的功能到项目中。

Arctext.js

Arctext.js 是基于 Lettering.js 的文字旋转插件，根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布。

虽然 CSS3 也能够实现字符旋转效果，但是要让安排每个字母都沿着弯曲路径排布相当的复杂，Arctext.js 则可以轻松实现。

可以通过设置下面四个参数调整效果：

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

在线演示     源码下载

stellar.js

正如它的口号所说：Parallax has never been easier，的确，它能帮助轻松的实现网页视差滚动效果。

给标签添加data属性（data-stellar-ratio等，使用方法参考帮助文档），然后运行$.stellar()就可以看到很酷的时差滚动效果了。

 
 
 
 
    
  
  
  
  
  1. // For example:  
    2. 
  
  
  
  
  2. $(window).stellar();  
    3. 
  
  
  
  
  3. // or:  
    4. 
  
  
  
  
  4. $('#main').stellar(); 
    5.

还可以通过设置偏移量来调整时差效果：

 
 
 
 
    
  
  
  
  
  1. $.stellar({  
    2. 
  
  
  
  
  2.   horizontalOffset: 40,  
    3. 
  
  
  
  
  3.   verticalOffset: 150  
    4. 
  
  
  
  
  4. }); 
    5.

也可以为元素添加data属性来配置每个元素的偏移，例如：

 
 
 
 
    
  
  
  
  
  1. <div data-stellar-ratio="2" 
    2. 
  
  
  
  
  2.      data-stellar-horizontal-offset="40" 
    3. 
  
  
  
  
  3.      data-stellar-vertical-offset="150"> 
    4.

在线演示     插件下载

Get turn.js

这款 jQuery 插件能够给页面添加漂亮的过渡（transition）效果，类似于书本或者杂志。

主要特色

支持运行于 iPad 和 iPhone；

简单，美观和强大的 API 接口；

可以通过 Ajax 动态加载页面；

纯 HTML5/CSS3 呈现页面内容；

提供两种漂亮的过渡（transition）效果；

借助 turn.html4.js，可以在 IE8 等低版本浏览器工作。

使用非常简单，示例代码：

 
 
 
 
    
  
  
  
  
  1. <div id="flipbook">  
    2. 
  
  
  
  
  2.     <div class="hard"> Turn.js </div>   
    3. 
  
  
  
  
  3.     <div class="hard"></div>  
    4. 
  
  
  
  
  4.     <div> Page 1 </div>  
    5. 
  
  
  
  
  5.     <div> Page 2 </div>  
    6. 
  
  
  
  
  6.     <div> Page 3 </div>  
    7. 
  
  
  
  
  7.     <div> Page 4 </div>  
    8. 
  
  
  
  
  8.     <div class="hard"></div>  
    9. 
  
  
  
  
  9.     <div class="hard"></div>  
    10. 
  
  
  
  
  10. </div>  
    11. 
  
  
  
  
  11. <script type="text/javascript">  
    12. 
  
  
  
  
  12.     $("#flipbook").turn({  
    13. 
  
  
  
  
  13.         width: 400,  
    14. 
  
  
  
  
  14.         height: 300,  
    15. 
  
  
  
  
  15.         autoCenter: true 
    16. 
  
  
  
  
  16.     });  
    17. 
  
  
  
  
  17. </script> 
    18.

在线演示     插件下载

Flexslider 2.0

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件，能够帮助你在项目轻松的创建漂亮的内容滚动效果。

这款插件也是 2011 年度最佳 jQuery 插件，今年被 WooThemes 收购并发布了2.0版本，因此继续入选 2012 年度榜单。

主要特色

简单的，语义化的标签；

支持所有主流的浏览器；

水平/垂直滑动和淡入淡出动画；

支持多个滑块，回调 API，以及更多；

 触摸滑动支持硬件加速；

 能够自定义导航选项。

 兼容最新版本的 jQuery。

使用非常简单，示例代码：

 
 
 
 
    
  
  
  
  
  1. <div class="flexslider">  
    2. 
  
  
  
  
  2.   <ul class="slides">  
    3. 
  
  
  
  
  3.     <li>  
    4. 
  
  
  
  
  4.       <img src="slide1.jpg" />  
    5. 
  
  
  
  
  5.     </li>  
    6. 
  
  
  
  
  6.     <li>  
    7. 
  
  
  
  
  7.       <img src="slide2.jpg" />  
    8. 
  
  
  
  
  8.     </li>  
    9. 
  
  
  
  
  9.     <li>  
    10. 
  
  
  
  
  10.       <img src="slide3.jpg" />  
    11. 
  
  
  
  
  11.     </li>  
    12. 
  
  
  
  
  12.   </ul>  
    13. 
  
  
  
  
  13. </div>  
    14. 
  
  
  
  
  14.    
    15. 
  
  
  
  
  15. <script type="text/javascript" charset="utf-8">  
    16. 
  
  
  
  
  16.   $(window).load(function() {  
    17. 
  
  
  
  
  17.     $('.flexslider').flexslider();  
    18. 
  
  
  
  
  18.   });  
    19. 
  
  
  
  
  19. </script> 
    20.

在线演示     插件下载

hammer.js

Hammer.js 是一个基于 jQuery，在网页中实现多点触摸 JavaScript 库。

支持 Tap、Double Tap、Drag、Hold、Swipe 和 Transform 六种触摸手势。 

主要特色

在网站中快速实现 Touch 事件；

轻量，GZIP 压缩后只有2KB；

功能专注，专用于多点触摸手势；

完全独立的库，也提供了 jQuery 插件版本；

详细使用帮助可参考插件的Github主页，下面是简单示例：

 
 
 
 
    
  
  
  
  
  1. $("#element")  
    2. 
  
  
  
  
  2.    .hammer({  
    3. 
  
  
  
  
  3.         // options...  
    4. 
  
  
  
  
  4.    })  
    5. 
  
  
  
  
  5.    .bind("tap", function(ev) {  
    6. 
  
  
  
  
  6.         console.log(ev);  
    7. 
  
  
  
  
  7.    }); 
    8.

在线演示     插件下载

iPicture

iPicture 是一款用于制作交互式照片效果的 jQuery 插件，可以在图片上添加额外的文本注释、视频和链接等等。 

精美Demo

Bentos demo

Cars demo

Fashion demo

Furniture demo

零基础使用的三个简单步骤

下载 iPicture² 并解压到开发目录；

打开 Wizard 页面，上传图片并根据需要设置工具提示，然后拷贝生成的代码；

把代码粘贴到你的网站页面中并映入 ipicture.js 和 iPicture.css 两个文件，搞定！

帮助文档     插件下载

[[106740]]

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 变换效果，下面是简单的示例代码：

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

在线演示     插件下载

SlabText

一款用于制作大号，加粗的响应式（Responsive）头条标题的 jQuery 插件。

详细使用方法参考插件主页，下面是简单示例代码：

 
 
 
 
    
  
  
  
  
  1. // Function to slabtext the H1 headings  
    2. 
  
  
  
  
  2. function slabTextHeadlines() {  
    3. 
  
  
  
  
  3.     $("h1").slabText({  
    4. 
  
  
  
  
  4.         // Don't slabtext the headers if the viewport is under 380px  
    5. 
  
  
  
  
  5.         "viewportBreakpoint":380  
    6. 
  
  
  
  
  6.     });  
    7. 
  
  
  
  
  7. }; 
    8.

在线演示     插件下载

原文链接：http://www.cnblogs.com/lhb25/archive/2012/12/24/best-jquery-plugins-of-2012.html

版权声明：
作者：后浪云
链接：https://www.idc.net/help/382975/
文章版权归作者所有，未经允许请勿转载。
THE END
Copyright © 2025 后浪云 网站地图