你的位置:首页 > Java教程

[Java教程]10款基于jquery的web前端特效及源码下载


1.jQuery时间轴插件:jQuery Timelinr

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

10款基于jquery的web前端特效及源码下载 - 爱七七五八网 - 1

在线演示一

在线演示二

在线演示三

源码下载

2.使用Ctrl+Enter提交表单

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

在线演示

源码下载

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

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

10款基于jquery的web前端特效及源码下载 - 爱七七五八网 - 2

在线演示

源码下载

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

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

10款基于jquery的web前端特效及源码下载 - 爱七七五八网 - 3

在线演示

源码下载

5.日期时间选择器:datetimepicker

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

10款基于jquery的web前端特效及源码下载 - 爱七七五八网 - 4

在线演示

源码下载

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

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

10款基于jquery的web前端特效及源码下载 - 爱七七五八网 - 5

在线演示

源码下载

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

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

10款基于jquery的web前端特效及源码下载 - 爱七七五八网 - 6

在线演示

源码下载

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的web前端特效及源码下载 - 爱七七五八网 - 7

源码下载

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

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

10款基于jquery的web前端特效及源码下载 - 爱七七五八网 - 8

在线演示

源码下载

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