10款绚丽的HTML5和jQuery图片动画特效

1.使用 Web Tracing Framework 分析富 JS 应用的性能

来自谷歌的 Web Tracing Framework 包含一组工具和脚本，用于 JavaScript 相关代码的性能分析。它是重 JavaScript 应用程序的理想选择，而 JavaScript 仅用于简单的交互的网页可能没有必要。有一个手动嵌入选项和一个 Chrome 扩展，用于获取内部浏览器的数据和处理这些数据的命令行工具。

在线演示

源码下载

2.Clank – 快速构建移动 APP 原型的 HTML/CSS 框架

Clank 是一个自由和开放源码的 HTML/CSS 框架，可以帮助你轻松创建本地手机或平板电脑应用程序的原型。它着重于提供一致的用户界面，不会刻意去模仿一个特定的 OS 。该框架是基于组件的，这样我们就可以选择和使用所需的部分，组件包括按钮，表格，滑块，切换等等

在线演示

源码下载

3.Wrangle – 响应式的,触摸友好的多选插件

Wrangle 是一个响应式，触摸友好的选择插件，支持 jQuery 以及 Zepto。Wrangle 为多项选择提供了一个独特的方法：通过画一条贯穿项目的线条来选择项目。它给你的应用程序的一种新的方式进行多重选择：可以用鼠标、手指或手写笔。

在线演示

源码下载

4.One Page Scroll – 实现苹果风格的单页滚动效果

单页滚动网站已经被广泛使用了有一段时间了，它们对于快速提供信息是很有用的。One Page Scroll 是一个 jQuery 插件，简化了创建此类网站的步骤，只需创建 HTML 结构，进行简单设置，然后调用函数就可以了。

在线演示

源码下载

5.Mergely – 免费的在线文档对比和合并工具

任何类型的文件（无论是否代码），我们可能要比较不同的版本，看发生了什么变化。 有些编辑器都有这个内置功能，其中一些则没有。 Mergely 是一个免费使用的 Web 应用程序，帮你你迅速作出文档的差异分析。可以轻松上传要对比的文件（或提交网址），差异内容将被突出显示的，也可以将它们合并。Mergely 也是一个开源 JavaScript 库，你可以将其融入自己的项目。

在线演示

源码下载

6.Device.js – 快速检测平台、操作系统和方向信息

在 Web 项目中，有时候我们需要根据程序运行的环境采取特定操作。Device.js 是一个很小的 JavaScript 库，它简化了编写和平台，操作系统或浏览器相关的条件 CSS 或 JavaScript 代码。

在线演示

源码下载

7.Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库

SVG 是一种很好的 Web 技术方案，可以用来创建互动，在任何大小的屏幕上都会很好看、与分辨率无关的矢量图形。而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操作 DOM 一样操作 SVG 资源。Snap.svg 是专为现代浏览器打造，支持剪裁，遮罩，纹理，渐变，分组等功能。凭借丰富的动画库和易于的事件处理，Snap.svg 可以帮助你轻松实现 SVG 功能。

在线演示

源码下载

8.Offline.js – 自动判断网络连接状态并提醒用户

ffline.js 是一个在用户失去互联网连接的时候自动提醒用户的 JavaScript 库，类似 Gmail 中的效果。它能够捕捉到断网时的 Ajax 请求，在网络连接恢复的时候重新发送请求，这样您的应用程序能够完美的恢复使用。它有几款美丽的主题，不需要任何配置。在现代的浏览器，如 Chrome，Firefox ，Safari 和 IE8+ 测试通过。

在线演示

源码下载

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

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

在线演示

源码下载

10.灵感来自 Google & YouTube 的苗条的进度栏效果

NProgress.js 是纳米级的进度条插件。拥有逼真的的涓涓细流动画效果来告诉你的用户，某些事情正在发生。它的灵感来自于谷歌，YouTube，应用了，这款苗条的进度条是完美的，适用于 Turbolinks，Pjax 以及其他重 Ajax 的应用程序。

在线演示

源码下载

未经允许不得转载：爱前端网 » 10款绚丽的HTML5和jQuery图片动画特效