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

标签: 期待 jquery 插件 | 发表时间:2012-12-24 22:30 | 作者:梦想天空(山边小溪)
出处:http://www.cnblogs.com/lhb25/

  让人期待已久的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 */

在线演示     源码下载

8 jQuery Plugins for Typography

 

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

在线演示     插件下载

jquery plugins

 

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>

在线演示      插件下载

Responsive jQuery Slider Plugins

 

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

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

  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
});
};

在线演示      插件下载

温馨提示:如果您看了这篇博文,觉得有所收获,请点击右下角的【 推荐】,给以支持和鼓励:)

页面上雪花飞舞的效果实现可以关注这篇文章《 圣诞节,给博客添加浪漫的下雪效果!》,最后,祝朋友们圣诞快乐!!!

您可能感兴趣的相关文章

 

本文链接: 期待已久的2012年度最佳 jQuery 插件揭晓

编译来源: 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

本文链接

相关 [期待 jquery 插件] 推荐:

20个最让人期待的 jQuery 相册插件

- Pei - 博客园-首页原创精华区
  jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择. 其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以帮助你在网站中加入一些很酷的效果. 今天,本文收集了20个最让人期待的 jQuery 相册插件分享给大家,记得分享和推荐一下 :).

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

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

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

常用JQuery插件整理

- xxg - 博客园-首页原创精华区
  虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来.   jquery.HooRay(哈哈,自己写的插件是必须有的).   jquery UI(官方的UI插件,功能很多,但我只用少数几个).   artDialog(很欣赏这个插件,又强大又美观).

2010年最佳jQuery插件

- seenxu - 博客园新闻频道
在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来. WDL的作者从大量的优秀 jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best. 2010年最佳jQuery插件(排名不分先后):. 一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容.

[原]jQuery ListBox Plugin(ListBox插件)

- We_Get - 博客园-首页原创精华区
转载请注明作者(think8848)和出处(http://think8848.cnblogs.com). 未经作者同意,请勿擅自修改本文内容. 这两天项目中要用到类似于ListBox的功能了,本以为有很多jQuery插件,没有想到的是,居然没有搜到好用的,咋办呢,自已动手丰衣足食吧,于是花了一个晚上的时间做出来一个,上效果图:.

JQuery图表插件——Highcharts

- We_Get - 博客园-首页原创精华区
因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO. 先上三个图,分别是曲线、柱状、扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意. 第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的. 可以下载DEMO逐一试试就知道效果怎么样了,上图就应用了两个样式.

jquery Dialog - 弹出窗插件

- Bloger - 博客园-首页原创精华区
    分享几个jquery Dialog弹出窗插件.     1)Zebra_Dialog是一个可灵活配置的对话框jQuery插件,大小只有4KB,要求jQuery 1.5.2+支持. 可用于替换JavaScript原始的“alert” 和“confirmation”对话框. 这个插件使用jQuery Plugin Boilerplate构建.

jQuery 插件autocomplete 应用

- Bloger - 博客园-首页原创精华区
  项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能.   autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件).

jquery插件的开发

- - CSDN博客推荐文章
插件的概念大家并不陌生了,插件可以很方便我们进行代码开发,大大节约了我们的开发时间. 以前我用jquery都是自己洗一大把的代码,复用性不高维护也不方便. 因此自己学着开发了2个简单的jquery插件. 下面先看下jquery插件的分类. jQuery开发分为两种:. 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法.