jQuery技术

10款web前端基于Jquery的动画源码

字号+ 作者:H5之家 来源:H5之家 2016-12-07 10:00 我要评论( )

10款web前端基于Jquery的动画源码

1.使用 CSS3 动感的图片标题动画效果

在网站中,有很多地方会需要在图片上显示图片标题。使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果。没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作。您可以查看网页的源代码,了解动画是如何工作的。

10款web前端基于Jquery的动画源码

在线演示

源码下载

2.简单的轻量级的 jQuery 仪表板插件

sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板。数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖 动重新排列。 sDashboards 内置渲染 DataTable 和 flotr2 图表支持。它还具有支持侦听表格行点击,图表数据点击和内置数据选择事件。

10款web前端基于Jquery的动画源码

在线演示

源码下载

3.基于 Snap SVG 框架的响应式饼图

Pizza Pie Charts 是一个基于 Adobe 的 Snap SVG 框架的响应式饼图插件。它着重于集成 HTML 标记和 CSS,而不是 JavaScript 对象,当然Pizza Pie Charts 也支持 JavaScript 对象。基于 SVG 的图形显示让饼图在视网膜屏幕或任何高清屏幕的设备都很美观。另外,Pizza Pie Charts 能够自适应宽高,或者根据给出的最大宽度或最大高度显示。

10款web前端基于Jquery的动画源码

在线演示

源码下载

4.基于 HTML5 File API 的文件上传

Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能。在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。此外,它允许用户暂停,恢复,甚至恢复上传不失状态,因为只有目前上传块将被中止,而不是整个上传。Resumable.js 除了 HTML5 文件 API 意外,没有任何外部依赖。

10款web前端基于Jquery的动画源码

在线演示

源码下载

5.轻松实现元素固定效果的 jQuery 插件

粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见。这个插件作用于多页的网站,但是对于单页的布局有额外的功能。借助 CSS,还可以实现当前视图关联的导航菜单的高亮显示功能。

10款web前端基于Jquery的动画源码

在线演示

源码下载

6.实现苹果风格的单页滚动效果

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

10款web前端基于Jquery的动画源码

在线演示

源码下载

7.利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果

Rainyday.js 是一个轻量的 JavaScript 库,利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js 尽可能的模拟现实的雨滴效果,几乎可以以假乱真了。

10款web前端基于Jquery的动画源码

在线演示

源码下载

8.Wrangle:响应式的,触摸友好的多选插件

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

10款web前端基于Jquery的动画源码

在线演示

源码下载

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

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

10款web前端基于Jquery的动画源码

在线演示

源码下载

10.基于TweenMax跟随鼠标单击移动的div

今天给大家分享一款基于TweenMax跟随鼠标单击移动的div。在这款实例中你可以单击任意位置,div会移动到你单击的位置。

10款web前端基于Jquery的动画源码

(责任编辑:幽灵学院)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 基于jQuery的页面便签插件

    基于jQuery的页面便签插件

    2016-12-06 13:02

  • 前端程序员应该知道的 15 个 jQuery 小技巧 码农网

    前端程序员应该知道的 15 个 jQuery 小技巧 码农网

    2016-11-28 17:01

  • FusionCharts中文教程:从评估版升级

    FusionCharts中文教程:从评估版升级

    2016-11-24 18:00

  • GJM :自定义基于 VLC 的视频播放器 [转载],gjmvlc

    GJM :自定义基于 VLC 的视频播放器 [转载],gjmvlc

    2016-11-24 17:02

网友点评