10个web前端基于jQuery和css3动画插件及源码

1.jQuery横向手风琴图片展示插件

今天我们要来介绍一款非常酷的jQuery插件，它是一款横向的手风琴图片展示切换插件，每一张图片初始都是水平层叠在一起，点击图片后即可切换至下一张，并且在图片切换时出现水平移动的动画特效。另外你可以定义任意数量的图片应用在这个手风琴图片插件中。

在线演示

源码下载

2.纯css3实现的鼠标经过按钮特效

今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。

在线演示

源码下载

3.FreeIconMaker – 在线创建免费和时尚的图标

在设计一个网站或 Web 应用程序时，你不能否认网页设计工具的重要性，这些工具有助于简化您的任务和完成您的项目。FreeIconMaker.com 是一个免费的在线图标制作工具，您也可以创建自己的模板并与他人分享。

在线演示

源码下载

4.jQuery横向手风琴图片滑块插件

这次我们要来分享一款非常不错的jQuery横向手风琴图片滑块插件，首先它是基于jQuery开发的，因此，将会兼容大部分的浏览器；其次，这款jQuery图片滑块插件可以自动播放，也可以鼠标滑过时切换，是一款效果非常不错的jQuery手风琴图片插件。

在线演示

源码下载

5.jQuery全屏滚动插件fullPage.js演示

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（查看），QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：支持鼠标滚动，支持前进后退和键盘控制，多个回调函数，支持手机、平板触摸事件，支持 CSS3 动画，支持窗口缩放，窗口缩放时自动调整，设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

在线演示

源码下载

6.vTicker – jQuery垂直滚动插件

vTicker 是一款非常小巧的 jQuery 垂直滚动插件，压缩后只有 2KB。vTicker 支持自定义滚动时间、间隔时间、显示个数、滚动方向（向上/向下）、容器高度等等，但它对 HTML 结构有点小“苛刻”——容器里面只能是 ul 标签。不过如果你仅仅是需要一个垂直滚动效果的话，vTicker 仍然是一个很好的选择，毕竟它是如此的小巧方便。

在线演示

源码下载

7.SlipHover – 创建一个动画遮罩层显示标题或描述

SlipHover 是一个基于 jQuery 的插件，它能够感知鼠标移动方向，并在相应的方向（或反方向）以动画的方式显示出一个遮罩层，用来显示标题或描述，应用到幻灯片或相册中是个不错的选择。SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。合理的搭配，相信能让你的幻灯片或相册更加的上档次。

在线演示

源码下载

8.ResizeEnd – 窗口大小调整后处理事件插件

ResizeEnd 是一个小巧的 jQuery 插件，它能够在浏览器窗口大小改变后处理一些事情。它虽然是一个非常简单的插件，但多思考思考，它也有勇武之地，比如在响应式设计方面。

在线演示

源码下载

9.multiscroll.js – jQuery左右垂直反向滚动插件

也许你已经知道 fullpage.js 是一个非常优秀插件，很多优秀的公司都在使用它，比如猪八戒、网易等等。今天我们再介绍一款该插件作者开发的另一款插件——multiscroll.js。multiscroll.js 和 fullpage.js 有点类似，也是页面全屏滚动，只不过 fullpage.js 是整屏滚动，而 multiscroll.js 是分成左右两个面板，垂直反向滚动合在一起。

在线演示

源码下载

10.onepage-scroll – jQuery单页/全屏滚动插件

单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件，如之间介绍的 fullPage.js 和 Scrollify，今天再介绍一款 jQuery 单页/全屏滚动插件——onepage-scroll。

在线演示

源码下载

未经允许不得转载：爱前端网 » 10个web前端基于jQuery和css3动画插件及源码