让人期待已久的2012年度最佳 jQuery 插件终于发布了。jQuery 自2006年发布以来,经过6年的迅速发展,目前已是最流行和使用最广泛的JavaScript 框架,这主要归功于众多围绕 jQuery 的技术社区。jQuery 社区的开发者持续不断的在发布各种 jQuery 插件,Web 开发人员能够非常轻松把一些惊艳的功能到项目中。推荐阅读:《2011年度最佳 jQuery 插件》。
Arctext.js
Arctext.js 是基于 Lettering.js 的文字旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布。
虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路径排布相当的复杂,Arctext.js 则可以轻松实现。
可以通过设置下面四个参数调整效果:
1 2 3 4 | 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()就可以看到很酷的时差滚动效果了。
1 2 3 4 | // For example: $(window).stellar(); // or: $( '#main' ).stellar(); |
还可以通过设置偏移量来调整时差效果:
1 2 3 4 | $.stellar({ horizontalOffset: 40, verticalOffset: 150 }); |
也可以为元素添加data属性来配置每个元素的偏移,例如:
1 2 3 | < div data-stellar-ratio = "2" data-stellar-horizontal-offset = "40" data-stellar-vertical-offset = "150" > |
Get turn.js
这款 jQuery 插件能够给页面添加漂亮的过渡(transition)效果,类似于书本或者杂志。