10款基于jquery的web前端特效及源码下载

1.jQuery时间轴插件:jQuery Timelinr

这是一款可用于展示历史和计划的时间轴插件，尤其比较适合一些网站展示发展历程、大事件等场景。该插件基于jQuery，可以滑动切换、水平和垂直滚动、支持键盘方向键。经过扩展后可以支持鼠标滚轮事件。

2.使用Ctrl+Enter提交表单

我们发表微博或论坛发帖时，在内容输入框中输入完内容后，可以点击提交按钮来发表内容。可是，如果你够懒，你可以不用动鼠标，只需按住键盘上的Ctrl+Enter键，即可提交表单，完成内容发布。当然，由于输入框是一个多行文本输入框textarea，我们知道，在textarea中按Enter(回车)键可以换行，并不能直接提交表单(submit)，而默认情况下，浏览器忽略了Ctrl键。那么我们可以通过Javascript脚本来控制使用Ctrl+Enter键来组合完成表单提交，本文结合示例讲解基于jQuery的Ctrl+Enter提交表单效果。

在线演示

源码下载

3.速度超快的菜单切换效果

这是一个非常流畅的菜单展示效果，应用在亚马逊(amazon.cn)上，当你上下移动鼠标的时候，二级菜单会非常轻快的切换，没有任何延时，给用户如滑丝般的感觉。这种效果借助于一款jQuery插件menu-aim，本文将结合实例讲解如何实现速度超快的菜单效果。

在线演示

源码下载

4.jQuery实现多级手风琴菜单

手风琴菜单一般用于下拉导航，由于外观非常简洁，使用起来跟手风琴一样可以拉伸和收缩而得名，项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单。

在线演示

源码下载

5.日期时间选择器:datetimepicker

我们了解了jquery ui提供的日期选择器:datepicker的使用，那么我们在应用中还会遇到选择日期的同时还要选择时间情况，大多数开发人员可能会使用下拉框实现选择时分秒，而幸运的是有一个日期时间选择器:datetimepicker，它能将datepicker结合在一起，能在选择日期的同时选择时间。

在线演示

源码下载

6.日期选择器:jquery datepicker的使用

在jquery ui中，提供了一个非常实用的日期选择器:datepicker，使用它能非常方便的展现日历中的日期，灵活配置相关选项，包括日期格式、范围等。我们经常在WEB应用中用到datepicker，比如要求用户输入日期进行相关查询的。我们很早之前就应用datepicker到很多项目中，今天整理成文与大家分享。

在线演示

源码下载

7.Flowplayer-一款免费的WEB视频播放器

Flowplayer 是一个开源(GPL 3的)WEB视频播放器。您可以将该播放器嵌入您的网页中，如果您是开发人员，您还可以自由定制和配置播放器相关参数以达到您要的播放效果。本文主要介绍Flowplayer的使用。Flowplayer支持播放flv、swf等流媒体以及图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。

在线演示

源码下载

8.自适应的网格布局-砌墙效果

我们使用新浪微博的时候，在微博精选页面里可以看到大量的微博信息。该页面信息主要是以图片配文字说明，页面使用了自适应网格布局即砌墙效果，图片加载技术，以及滚动加载内容技术。本文先介绍砌墙效果。其实我们做页面布局就相当于砌墙师傅在完成一堵墙的施工。我们在设计页面的时候，假如有很多相同的DIV，装载不同的内容，这些DIV都使用float:left，如果不限制这些DIV的高度，页面布局可能会出现砌墙架空的现象。点击这里查看效果，而经过布局优化后的页面布局效果大不一样，请看DEMO。本文使用David DeSandro写的一个页面布局插件Masonry，该插件基于jQuery库，提供很多参数和方法，可以根据不同的需求定制不同的效果。

在线演示

源码下载

9.构建一个用于产品介绍的WEB应用

为了让用户更好地了解您的产品功能，您在发布新产品或者升级产品功能的时候，不妨使用一个产品介绍的向导，引导用户熟悉产品功能和流程。本文将给您介绍一款优秀的用于产品介绍的WEB应用。就像微博或邮箱这类WEB产品升级一样，使用Guiders.js构建的应用，用户将会看到一些列的弹出层，这些弹出层可以定位到页面上的任意位置，引导用户一步步浏览，最后退出向导。Guiders.js是一款基于jquery的web应用插件，作者是jeff-optimizely。下面我们来介绍如何在实际项目中应用。

源码下载

10.jQuery+CSS实现垂直滚动效果

当要在页面上有限的区域内展示很多内容时，我们通常采用TAB切换、滚动等方式来达到展示效果。本例中，我们利用jQuery和CSS可以使页面内容产生垂直滚动的效果，还支持鼠标滚轮驱动。

在线演示

源码下载

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