1.Conditioniz – 探测浏览器并条件加载 JavaScript 和 CSS

Conditioniz 是一个快速、轻量级（3KB）的 JavaScript 工具，用于探测浏览器和分辨率并条件加载 JavaScript 和 CSS 文件。Conditioniz 从它的 jQuery 前身重建，现在速度要快50%。结合类名添加和 Conditionizr 集成的脚本和样式加载功能，允许你为不同的浏览器指定想加载的脚本和样式。浏览器嗅探通常被认为是不可靠的，Conditionizr 的建立就是为了克服这个问题。Conditionizr 的核心功能是检测和实现IE浏览器条件加载脚本和样式。考虑到这一点，使用类似 Google Analytics 检测浏览器的方法。

在线演示

源码下载

2.使用 CSS3 Transforms 构建圆形导航

在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航。教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式。不过不用担心，这里用到的数学知识真的是很简单的。教程使用浅显易懂的语言来介绍数学逻辑，让你能够清晰的理解背后的技术。

在线演示

源码下载

3.MixItUp:基于CSS3 & jQuery的过滤和排序插件

MixItUp 是一款轻量，但功能强大的 jQuery 插件，提供了对分类和有序内容的美丽的动画过滤和排序功能。特别适合用于作品集网站，画廊，图片博客以及任何的分类或有序内容。它是如何工作的？ MixItUp 根据你的过滤条件决定哪些内容隐藏，显示或重新定位，然后应用 CSS3 transitions 平滑动画到新位置。这是一个非常有效的方法，借助了现代浏览器的渲染能力，并避免过多的使用 jQuery 进行 DOM 操作。

在线演示

源码下载

4.令人印象深刻的 jQuery 模态框插件 – iLightBox

模态框能够把用户的注意力吸引到内容上，网络上有很多实现这样功能的插件。 iLightBox 是一个新的替代 jQuery 灯箱效果的插件，它可以显示图像，视频（YouTube，VIimeo，HTML5 视频等）以及其它的 HTML 内容，有一个可选的全屏模式。画廊模式可以以缩略图形式显示其他项目，并允许通过键盘，鼠标滚轮和触摸事件浏览。有支持视网膜呈现的皮肤，可以完全定制，iLightbox 也可用于作为更好看的方案，替代 JavaScript 提示和确认对话框。

在线演示

源码下载

5.Fabric.js – 简单而强大的 JavaScript Canvas 库

Fabric.js 是一个简单而强大的 JavaScript Canvas 库，在 HTML5 Canvas 元素之上提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器。使用 Fabric.js 你可以创建和填充画布上的对象，从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象，修改它们的属性（颜色、透明度，层叠顺序）等等。

在线演示

源码下载

6.优秀的 jQuery 文本输入框插件

文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作，是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站中轻松添加输入框的自动完成和自动提示功能。在这篇文章中，我们使用 jQuery 实现智能输入框光标的位置。它不需要图像，是使用纯粹的 CSS3 实现的，而且实时、准确，这意味着你在添加或删除文本的时候它会自动适应。使用事件代理机制实现，所以不用担心性能问题。

在线演示

源码下载

7.更好用的 jQuery 下拉选择框插件

FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择。FancySelect 使用方便，只要绑定页面上的任何 Select 元素，并调用就 .fancySelect() 就可以了。默认情况下，FancySelect 在移动设备上使用原生的选择功能和风格。

在线演示

源码下载

8.超平滑的 CSS 过渡和变换动画效果插件

Transit 是一款 jQuery 插件，用于实现超平滑的 CSS3 过渡和变换动画效果。借助这款插件，你可以轻松实现 translate、rotate、scale 和 skew 等众多效果。支持的浏览器：IE 10+、Firefox 4+、Safari 5+、Chrome 10+、Opera 11+ 以及 Mobile Safari。

在线演示

源码下载

9.jQuery Flat Shadow – 轻松实现漂亮的长阴影效果

长阴影其实就是扩展了对象的投影，感觉是一种光线照射下的影子，通常采用角度为 45 度的投影，给对象添加了一份立体感。长阴影快速发展为流行的设计趋势，并经常被应用到扁平设计方案的对象。更详细的介绍可以阅读《扁平化设计的最新趋势 – 长阴影》一文，相信看了之后你会长阴影设计有更深的了解。

在线演示

源码下载

10.使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

元素固定效果在网页中应用得很多，比较常见的使用场景有改进导航，显示广告。Sticky-Kit 是一个非常方便的 jQuery 插件，简化了创建/管理粘元素，有复杂的使用功能。这些功能包括：处理多个固定元素，启用/禁用的行为取决于对元素在视口中的位置和回调。它也有一个函数重新计算尺寸，从而简化了在浏览器调整大小时的使用。

在线演示

源码下载

>> 本文固定链接: http://www.i7758.com/archives/874.html

10个web前端jQuery开发者必备的源码组件