20个最让人期待的 jQuery 相册插件
- Pei - 博客园-首页原创精华区 jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择. 其中，jQuery 最令人印象深刻的应用之一就是对图片的处理，它可以帮助你在网站中加入一些很酷的效果. 今天，本文收集了20个最让人期待的 jQuery 相册插件分享给大家，记得分享和推荐一下 :).
【年度盛宴】期待已久的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 是基于 Lettering.js 的文字旋转插件，根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布。
虽然 CSS3 也能够实现字符旋转效果，但是要让安排每个字母都沿着弯曲路径排布相当的复杂，Arctext.js 则可以轻松实现。
可以通过设置下面四个参数调整效果：
radius /* 旋转的半径，最小值是字符长度的一半，如果设置为-1，则文本是直的，不会旋转。默认值是0 */
dir /* 旋转方向，1是向下，-1是向上。默认值是1 */
rotate /* 设置为true表示每个字符都旋转。默认值是true */
fitText /* 如果想使用fitText插件(http://fittextjs.com/)，则需要设置为true。默认值是false */
dir /* 旋转方向，1是向下，-1是向上。默认值是1 */
rotate /* 设置为true表示每个字符都旋转。默认值是true */
fitText /* 如果想使用fitText插件(http://fittextjs.com/)，则需要设置为true。默认值是false */
正如它的口号所说：Parallax has never been easier，的确，它能帮助轻松的实现网页视差滚动效果。
给标签添加data属性（data-stellar-ratio等，使用方法参考 帮助文档），然后运行$.stellar()就可以看到很酷的时差滚动效果了。
// For example:
$(window).stellar();
// or:
$('#main').stellar();
$(window).stellar();
// or:
$('#main').stellar();
还可以通过设置偏移量来调整时差效果：
$.stellar({
horizontalOffset: 40,
verticalOffset: 150
});
horizontalOffset: 40,
verticalOffset: 150
});
也可以为元素添加data属性来配置每个元素的偏移，例如：
<div data-stellar-ratio="2"
data-stellar-horizontal-offset="40"
data-stellar-vertical-offset="150">
data-stellar-horizontal-offset="40"
data-stellar-vertical-offset="150">
这款 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>
<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 是一款轻量的响应式 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>
<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 是一个基于 jQuery，在网页中实现多点触摸 JavaScript 库。
支持 Tap、Double Tap、Drag、Hold、Swipe 和 Transform 六种触摸手势。
主要特色
- ✓ 在网站中快速实现 Touch 事件；
- ✓ 轻量，GZIP 压缩后只有2KB；
- ✓ 功能专注，专用于多点触摸手势；
- ✓ 完全独立的库，也提供了 jQuery 插件版本；
详细使用帮助可参考插件的 Github主页，下面是简单示例：
$("#element")
.hammer({
// options...
})
.bind("tap", function(ev) {
console.log(ev);
});
.hammer({
// options...
})
.bind("tap", function(ev) {
console.log(ev);
});
iPicture 是一款用于制作交互式照片效果的 jQuery 插件，可以在图片上添加额外的文本注释、视频和链接等等。
精美Demo
零基础使用的三个简单步骤
- 下载 iPicture² 并解压到开发目录；
- 打开 Wizard 页面，上传图片并根据需要设置工具提示，然后拷贝生成的代码；
- 把代码粘贴到你的网站页面中并映入 ipicture.js 和 iPicture.css 两个文件，搞定！
实现超平滑的 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] });
$("#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] });
一款用于制作大号，加粗的响应式（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
});
};
function slabTextHeadlines() {
$("h1").slabText({
// Don't slabtext the headers if the viewport is under 380px
"viewportBreakpoint":380
});
};
温馨提示：如果您看了这篇博文，觉得有所收获，请点击右下角的【 推荐】，给以支持和鼓励：）
页面上雪花飞舞的效果实现可以关注这篇文章《 圣诞节，给博客添加浪漫的下雪效果！》，最后，祝朋友们圣诞快乐！！！
您可能感兴趣的相关文章
本文链接： 期待已久的2012年度最佳 jQuery 插件揭晓
编译来源： 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
hide
相关 [期待 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(...),相当于静态方法.