当前位置: 首页 > 科技观察

2012最佳jQuery插件揭晓

时间:2023-03-13 16:37:38 科技观察

期待已久的2012最佳jQuery插件终于发布了。jQuery自2006年发布以来,经过六年的快速发展,如今成为最流行、使用最广泛的JavaScript框架,这主要得益于围绕jQuery的众多技术社区。jQuery社区的开发人员不断发布各种jQuery插件,Web开发人员可以轻松地为他们的项目添加一些令人惊叹的功能。Arctext.jsArctext.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正如它的口号所说:视差从未如此简单,确实可以帮助轻松实现网页的视差滚动效果。在标签中添加data属性(data-stellar-ratio等,使用方法参考帮助文档),然后运行$.stellar()就可以看到炫酷的时差滚动效果。//例如:$(window).stellar();//或:$('#main').stellar();也可以通过设置offset来调整时差效果:$.stellar({horizo??ntalOffset:40,verticalOffset:150});你也可以给元素添加一个数据属性来配置每个元素的偏移量,例如:在线演示插件下载获取turn.js这个jQuery插件可以为页面添加漂亮的过渡效果,类似于书籍或杂志。主要特性支持在iPad和iPhone上运行;简单、美观、强大的API接口;页面可以通过Ajax动态加载;纯HTML5/CSS3渲染页面内容;提供两种漂亮的过渡(transition)效果;配合turn.html4.js,可以在IE8等低版本浏览器中运行。使用非常简单,示例代码:Turn.js

Page1
Page2
Page3
Page4
在线演示插件下载Flexslider2.0FlexSlider是一个轻量级的响应式jQuery内容滚动插件,可以帮助您在项目中轻松制作精美的内容滚动效果。这个插件也是2011年最好的jQuery插件,今年被WooThemes收购,发布了2.0版本,所以继续入选2012年的榜单。主要特点简单的语义标签;支持所有主流浏览器;水平/垂直滑动和淡入淡出动画;支持多个滑块、回调API等;触摸滑动支持硬件加速;自定义导航选项的能力。与最新版本的jQuery兼容。使用非常简单,示例代码:
  • 在线演示插件下载hammer.jsHammer.js是一个基于jQuery的JavaScript库,用于网页中的多点触控。支持六种触摸手势:点击、双击、拖动、按住、滑动和变换。主要特点是快速实现网站中的Touch事件;轻量级,GZIP压缩后只有2KB;专注于功能,专注于多点触控手势;完全独立的库,同时提供jQuery插件版本;详细帮助请参考插件的Github主页,下面是一个简单的例子:$("#element").hammer({//options...}).bind("tap",function(ev){console.log(ev);});在线演示插件下载iPictureiPicture是一个jQuery插件,用于创建交互式照片效果,向图片添加额外的文本注释、视频、链接等。精美DemoBentosdemo汽车demo时尚demo家具demo零基础使用简单三步下载iPicture2,解压到开发目录;打开Wizard页面,上传图片并根据需要设置tooltip,然后复制生成的代码;将代码粘贴到您的网站页面并反映ipicture.js和iPicture.css这两个文件,完成!HelpDocumentationPlugins下载JqueryTransit是一个jQuery插件,用于超平滑的CSS3转换(transformation)和过渡(transitioneffects)。支持的效果:translate(x,y),rotateX(deg),rotateY(deg);旋转(度);rotate3d(x,y,z,deg);尺度(x,[y]);perspective(px);skewX(deg),skewY(deg)可以使用jQuery设置各种CSS变换效果,下面是一个简单的示例代码:$("#box").css({x:'30px'});//上移$("#box").css({y:'60px'});//下移$("#box").css({translate:[60,30]});//右下移动$("#box").css({rotate:'30deg'});//顺时针旋转$("#box").css({scale:2});//Scaleup2x(200%)$("#盒子”)。css({scale:[2,1.5]});//Scalehorizandvertical$("#box").css({skewX:'30deg'});//Skewhorizo??ntally$("#box").css({skewY:'30deg'});//Skewvertical$("#box").css({perspective:100,rotateX:30});//Webkit3drotation$("#box").css({rotateY:30});$("#box").css({rotate3d:[1,1,0,45]});在线演示插件下载SlabText是一款用于制作大而粗的响应式(Responsive)标题的jQuery插件。详细使用方法参考插件主页,下面是一个简单的示例代码:};在线demo插件下载原文链接:http://www.cnblogs.com/lhb25/archive/2012/12/24/best-jquery-plugins-of-2012.html