期待已久的2012年度最佳 jQuery 插件揭晓-阿里云开发者社区

开发者社区> 秋天风景> 正文

期待已久的2012年度最佳 jQuery 插件揭晓

简介:   让人期待已久的2012年度最佳 jQuery 插件终于发布了。jQuery 自2006年发布以来,经过6年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架,这主要归功于众多围绕 jQuery 的技术社区。
+关注继续查看

  让人期待已久的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 插件揭晓

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

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10014 0
Sidr – 创建侧栏和响应式菜单的最佳 jQuery 插件
  侧栏隐藏菜单是一个很好的方式,使得用户可以在需要的时候查看导航选项。而且这种方式对于响应式布局非常完美,因为节省空间。Sidr 是创建侧栏和响应式菜单的最佳 jQuery 插件,提供了多种菜单的显示方案。
724 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10880 0
【推荐】用于UI和表单设计的10款jQuery插件
本文搜集了一些有用的用户界面和架构设计工具。包含架构验证器、文件上传以及UI工具包。 1.A Better Form 这款插件有助于清除垃圾评论、垃圾邮件和自动提交表单。 在线演示 2.3 State Switch Plugin 此款插件可切换至三种状态。
1233 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13814 0
Mybatis-Generator(MBG)教程与Idea的MBG插件
简介 Mybatis Generator(MBG),下面我们统称为MBG,是一个Mybatis和iBatis的代码生成器。他可以内省数据库的表(或多个表)然后生成可以用来访问(多个)表的基础对象。
2179 0
【直播回顾】蚂蚁金服高级开发工程师萧恺:IDEA 插件开发入门教程
IDEA 插件开发入门教程 如何新建插件项目 实现一个小功能 如何运行调试 进阶的一些方法 写入操作 插件配置
2198 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2394
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载