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。

在线演示

源码下载

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。