- 浏览: 104291 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
刀心60:
"查看当前虚拟机VBxoManage list vm ...
VBoxManage 命令详解 -
tjzx:
...
jquery上传图片预览 -
abc3720:
不行的啊 我试了下
Dialect does not support identity key generation -
tourney:
...
Dialect does not support identity key generation -
kfw5313:
我需要 邮箱是kfw5313@yahoo.com.cn,谢谢! ...
struts2的国际化!配置心得
1.导航类 5
(1)Horizontal accordion: jQuery 5
(2)jQuery-Horizontal Accordion 5
(3)jQuery plugin: Accordion 5
(4)Accordion Menu script 6
(5)模仿ext的tab选项卡 6
(6) 8
(7)De-Constructing Accordion and Hover Effects with jQuery 8
(8)导航到页内指定位置 8
(10) Sexy Drop Down Menu w/ jQuery & CSS 9
(11) A Different Top Navigation 9
(12)Sliding Jquery Menu Tutorial 9
(13)Animated Drop Down Menu with jQuery 10
14. jQuery UI错误!未找到索引项。 Potato Menu 10
15. Make a Mega Drop-Down Menu with jQuery 10
(16)Superfish v1.4.8 – jQuery menu plugin by Joel Birch 11
(17)jQuery (mb)Menu 2.7 11
(18) jQuery File Tree 11
19.jQuery & CSS Example – Dropdown Menu 12
20. Reinventing a Drop Down with CSS and jQuery 12
21. Simple jQuery Dropdowns 12
22. Styling Drop Down Boxes with jQuery 13
23. jQuery iPod-style Drilldown Menu 13
24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready 13
25. mcDropdown jQuery Plug-in v1.2.07 14
26. jQuery Drop Line Tabs 14
27. Cut & Paste jQuery Mega Menu 14
28. jdMenu Hierarchical Menu Plugin 15
2.消息提示类 15
(1)Facebox 15
(2)SimpleModal 16
(3)jTip 16
(4)BetterTip 16
(5)clueTip 17
(6)jQuery lightBox plugin 17
(7)jQuery Impromptu 18
(8) jQuery.UI Messenger"Outlook like message notification Widget 18
(9)FancyBox 18
(10)Coda Popup Bubbles 19
(11)jGrowl 19
(12)jqWindowsEngine 19
(13)jQuery Alert Dialogs 20
(14)BeautyTips 21
(15)Facebook/Xiaonei 风格模态框 21
3.图片展示类 21
(1)imgAreaSelect 21
(2)Easy Slide 22
(3)Easy News 22
(4)jQZoom 23
(5)jCarousel Lite 24
(6)jCarousel 24
(7)Spacegallery-Jquery 24
(8)jQuery Slider Gallery 25
(9)jQuery Cycle Plugin 25
(10)Zoomimage 26
(11)prettyPhoto 26
(12)ThickBox 27
(13)Galleria 28
(14)jQuery Flash Plugin 28
(15)jQuery.SerialScroll 29
(16)InnerFade 29
(17)NyroModal 29
(18)CrossSlide 30
(19)Magnify 30
(20)Img Notes 31
(21)FancyZoom 31
(22)Jcrop 32
(23)Galleriffic 32
(24)Image Upload and Auto Crop 33
(25)prettyGallery 33
(26)jQuery.popeye 33
(27)s3Slider 34
(28)Pirobox 35
(29)Simple Controls Gallery 35
(30)Agile Carousel 35
(31)jQuery Plugin-Page Peel 36
(32)Easy Slider 36
(33)imgPreview 37
(34)Jquery Fade In.Fade Out 37
(35)Captify 37
(36)jParallax 38
(37)jQuery---运用图片预加载技术打造幻灯片 39
(38)jQuery pageSlide 39
(39)Creating a Slick Auto-Playing Featured Content Slider 40
(40)Portfolio Layout Idea Using jQuery 40
(41)jQuery---图片先模糊后清楚 41
(42)使用jQuery实现网页报纸 41
(43)jQuery购物网站产品展示. 41
(44)Gallerific 42
(45)ZoomImage 43
(46)EasySlider 43
(47)The Slider from Barack Obama’s website 44
(48)CodaSlider 44
(49)jQuery Slider II 44
(50)Beautiful Slider 热点图书:www.hotbook.cn 45
(51)LoopedSlider 45
(52)SpaceGallery 46
(53)jQuery Popeye 46
(54)Noobslide 热点图书:www.hotbook.cn 47
(55)Accessible News Slider 热点图书:www.hotbook.cn 47
(56)SmoothGallery 热点图书:www.hotbook.cn 47
(57)jQuery Multimedia Portfolio 48
(58)s3Slider 48
(59)fxMarquee 48
(60)商品放大镜效果 49
(61)PageSlide 50
64.不错的图片分类展示或者文字展示效果 52
67.利用z-index做的图片展示效果 53
4.自动填充类 53
(1)AutoComplete-JQuery 53
(2)Facebook like Autocomplete 54
(3)jQuery Autocomplete Mod 54
(4)jqac 54
(5)jQuery Tag Suggestion 54
(6)Autocomplete-jQuery ajax 54
(7)jQuery.Suggest 55
(8)Autocomplete- jQuery plugin 55
(9)jQuery plugin: Autocomplete 55
(10)jSuggest 55
(11)jQuery Live Ajax Search Plug-in 56
(12)ddcombobox 56
5.分页类 58
(1)jQuery Pagination 58
(2)pager jQuery plug-in 58
(3)JQuery Pager 59
6.编辑器类 59
(1)jwysiwyg 59
(2)Damn Small Rich Text Editor 59
(3)xhEditor 60
7.表格类 60
(1)Flexigrid 60
(2)Ingrid 60
(3)jQuery Grid 61
(4)tableHover 61
(5)JQuery.Resizer 62
(6)tablesorter 62
(7)csv2table 62
(8)tableFormSynch 63
8.色彩选择器类 63
(1) Farbtastic 63
(2)jQuery Color Picker 64
(3)iColorPicker 64
9.数据验证类 65
1. jQuery plugin: Validation 65
2. Masked Input Plugin 65
3 jVal 66
10.报表类 66
1. 66
2. Flot 66
3. jQchart 67
4 jquery.sparkline 67
5. jQuery Google Charts (演示地址) 68
6. jqPlot (演示地址) 68
11.上传类 68
1. jqUploader 68
2. jQuery Multiple File Upload Plugin 68
3. jQuery: Ajax file upload 68
12.日期时间类 69
1. jQuery UI Datepicker 69
2. Date Picker 69
3. Date Range Picker 69
13.圆角效果类 70
1. jQuery Corner 70
2. JQuery Curvy Corners 70
3. jQuery Corner 71
4. jQuery Corners 71
14.评价类 72
(1)Creating a Dynamic Poll with jQuery and PHP 72
(3) jQuery Ajax Rater Plugin 73
4. Star Rating widget 73
5. jQuery Star Rating Plugin 73
6. Ajax Poll 73
7.jQuery 投票调查组件 74
15.虚拟键盘类 75
1. 75
2.jQuery 虚拟键盘 76
3.Virtual keyboard 虚拟键盘 76
16.Form元件扩展 76
(1)jQuery.combobox 76
(2)jquery button:对按钮的扩展 77
(3)ContextMenu 77
(4) 77
(5)在链接旁边加一个小图标效果 78
6 jNice 78
7. jQuery calculate 78
8. jQuery select box 78
9. prettyCheckboxes 79
10. jGrow 79
11. jQuery Form Plugin 79
12. mcDropdown jQuery Plug-in 80
13. Create A Slider From A Select Box 80
14. TextArea Resizer 80
15. jQuery MultiSelect 81
16. Editable(jQuery Editable Plugin) 81
17. NicejForm 81
18. jScrollPane 82
19.利用jQuery制作类似skype的按钮效果. 82
20.jCheckbox: 82
(21)jQuery asmSelect 感谢博览群书 友情提供 83
17.游戏类 83
1.连连看 83
18.代码高亮类 83
1. beautyOfCode (演示地址) 83
2. Chili (演示地址) 83
3. Highlight plugin (演示地址) 84
1.导航类
(1)Horizontal accordion: jQuery
基于jQuery开发,非常简单的水平方向折叠控件。
(2)jQuery-Horizontal Accordion
具有XBOX360 blade界面风格的水平方向Accordion。
(3)jQuery plugin: Accordion
用于创建 折叠菜单的jQuery插件。
(4)Accordion Menu script
基于jQuery开发的可折叠菜单。
(5)模仿ext的tab选项卡
TabPanel(选项卡组件)
参数说明
renderTo<渲染到某容器string | jQuery object | NULL>
将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。
items<选项卡元素集合array>
选项卡组件渲染后就会显示的选项卡元素集合,具体参数请查看选项卡元素。
width<宽度string | number>
选项卡组件的总宽度,默认400px。
height<高度string | number>
选项卡组件中页面显示层的高度,默认300px。
border<是否显示边框string>
嵌套显示选项卡时,会出现重复边框的情况,影响美观,将border设置为”none”,则可以避免,默认显示边框,不接受除”none”之外的参数值。
active<渲染后默认激活哪个选项卡元素number>
下标以0为开始,默认为0。
maxLength<最多显示几个选项卡元素number>
-1为无限,默认为-1。
tabs<获得选项卡组件所有的选项卡元素return array>
可根据需要获得选项卡组件的所有选项卡元素。
公共方法
addTab(添加一个选项卡元素object)
动态向选项卡组件中添加一个选项卡元素。
flush(刷新选项卡元素的内容string | number)
将选项卡元素的内容刷新,参数可以为选项卡元素的ID或下标。
show(显示选项卡元素string | number)
显示制定选项卡元素,参数可以为选项卡元素的ID或下标。
Kill(关闭选项卡元素string | number)
关闭选项卡元素,参数可以为选项卡元素的ID或下标。
getTabsCount()<获得选项卡元素数量return number>
getTitle(获得选项卡元素的标题string | number) <return string>
setTitle(设置选项卡元素的标题string | number, string)
getContent(获得选项卡元素的内容string | number) <return string>
setContent(设置选项卡元素的内容string | number, string)
getDisable(选项卡元素是否禁用string | number) <return boolean>
setDisable(设置选项卡元素是否禁用string | number)
getCloseable(选项卡元素是否可关闭string | number) <return boolean>
setCloseable(设置选项卡元素是否可关闭string | number, boolean)
getActiveTab()<获得被激活的选项卡元素return object>
使用方法
页面引入jQuery.js、TabPanel.js、Fader.js、TabPanel.css
new TabPanel({
renderTo:'tabs',
width: '100%',
height: '500px',
active: 0,
items: [{
title:'工作中心',
html:'<iframe width="100%" height="100%" frameborder="0"></iframe>',
closable: false
}]
});
TabPanel item(选项卡元素)
参数说明
id<元素IDstring>
必须唯一,或者不设置该参数,否则将无法添加到选项卡组件中,默认自动生成。
title<元素标题string>
可以动态设置。
closeable<是否可关闭boolean>
true可关闭,false不可关闭,默认为true。
TabPanel.rar (22.94 kb)
(6)
(7)De-Constructing Accordion and Hover Effects with jQuery
(8)导航到页内指定位置
Automatically generate table of contents using jQuery
(9) “Outside the Box” Navigation with jQuery
This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.
(10) Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.
(11) A Different Top Navigation
(12)Sliding Jquery Menu Tutorial
(13)Animated Drop Down Menu with jQuery
14. jQuery UI错误!未找到索引项。 Potato Menu
15. Make a Mega Drop-Down Menu with jQuery
(16)Superfish v1.4.8 – jQuery menu plugin by Joel Birch
(17)jQuery (mb)Menu 2.7
(18) jQuery File Tree
19.jQuery & CSS Example – Dropdown Menu
20. Reinventing a Drop Down with CSS and jQuery
21. Simple jQuery Dropdowns
22. Styling Drop Down Boxes with jQuery
23. jQuery iPod-style Drilldown Menu
24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
25. mcDropdown jQuery Plug-in v1.2.07
26. jQuery Drop Line Tabs
27. Cut & Paste jQuery Mega Menu
28. jdMenu Hierarchical Menu Plugin
2.消息提示类
(1)Facebox
Facebox 是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面。
Facebox
(2)SimpleModal
SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。
SimpleModal
(3)jTip
jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。
jTip
(4)BetterTip
一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活。
BetterTip
(5)clueTip
clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时,它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取,也可以从当前页面中的元素中获取。
clueTip
(6)jQuery lightBox plugin
一个简单,强大基于jQuery开发的lightBox控件。
jQuery lightBox plugin
(7)jQuery Impromptu
用于创建模式对话框,确认对话框,输入内容对话框的jQuery插件。
jQuery Impromptu
(8) jQuery.UI Messenger"Outlook like message notification Widget
这个jQuery.UI控件类似于Messenger"Outlook消息弹出提醒框。
jQuery.UI Messenger"Outlook like message notification Widget
(9)FancyBox
基于jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该Lightbox除了能够展示图片之外,还可以展示iframed内容, 通过CSS自定义外观。
FancyBox
(10)Coda Popup Bubbles
采用jQuery开发,类似“冒泡”效果的提醒弹出框。
Coda Popup Bubbles
(11)jGrowl
jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac OSX系统中Growl事件通知框架。
jGrowl
(12)jqWindowsEngine
这个jQuery插件能够帮助你轻松创建Ajax Windows。
jqWindowsEngine
(13)jQuery Alert Dialogs
这个jQuery插件能够替换JavaScript提供的alert()、confirm()和prompt()功能。支持利用CSS自定义对话框外观。
jQuery Alert Dialogs
(14)BeautyTips
BeautyTips是一个jQuery Tooltip插件.
BeautyTips
(15)Facebook/Xiaonei 风格模态框
效果图:
简介:
使用 div, table 和 opacity 效果实现模态框效果...
导航:
详细介绍 | 在线演示
(15)jmpopups
可弹出多级新窗口
在线实例
实例源代码
3.图片展示类
(1)imgAreaSelect
imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。
imgAreaSelect
(2)Easy Slide
EasySlide 是以jQuery为基础开发的一个图库展示插件,EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示,并加上鼠标指向时的暂停效果(Pause),可以当作图库展示或是动画及广告Banner使用。
Easy Slide
(3)Easy News
Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件,可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果,调整显示速度,可自行修改CSS改变您为喜欢的风格。
Easy News
Easy News Plus
Easy News Plus是基于Easy News开发,滚动式新闻或图文内容展示的jQuery插件,但是与Easy News有完全不同的显示方式(以左右滑动为主要的显示方法)。
Easy News Plus
(4)jQZoom
基于jQuery开发的图片放大镜插件。
jQZoom
jQuery Plugin: Text Highlight
利用javascript对页面中的关键字进行着色的jQuery插件。
jQuery Plugin: Text Highlight
(5)jCarousel Lite
这个jQuery插件能够帮助你以滚动(carousel)的方式来组织图片和其它内容。
jCarousel Lite
(6)jCarousel
jCarousel是一个jQuery插件用于控制一个列表项目的水平或垂直顺序,列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。可以向前或向后滚动。
jCarousel
(7)Spacegallery-Jquery
一个采用jQuery开发,类似于Flash效果的图库(image gallery)。
Spacegallery-Jquery
(8)jQuery Slider Gallery
这是一个基于jQuery开发相册控件,类似于Apple网站上用于展示产品的效果。
jQuery Slider Gallery
(9)jQuery Cycle Plugin
jQuery Cycle Plugin是一个slideshow插件。支持多种变换效果:shuffle、zoom、fade、turnDown、curtainX、scrollRight。
jQuery Cycle Plugin
(10)Zoomimage
该jQuery插件能够让以当前流行的方式来展示图片。提供:预加载图片提示,对图片进行分组,自动调整图片显示比例,图片分组浏览控制。
Zoomimage
(11)prettyPhoto
prettyPhoto是jQuery lightbox的一个“克隆”。并增加动画效果,图库浏览等特性。
prettyPhoto
(12)ThickBox
ThickBox是一个模式对话框UI控件。基于jQuery开发,可以用来展示单张或多张图片,内嵌的内容,iframed的内容,或通过Ajax获取的内容。
ThickBox
(13)Galleria
Galleria 是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件,因此可以在图片加载时执行一些动作。
Galleria
(14)jQuery Flash Plugin
一个jQuery插件用于在页面中嵌入Flash影片。
jQuery Flash Plugin
(15)jQuery.SerialScroll
jQuery.SerialScroll是一个用于创建滚动效果的jQuery插件,支持水平/垂直方向滚动和混合滚动效果。
jQuery.SerialScroll
(16)InnerFade
InnerFade这个jQuery插件能够让任意一组元素(img,div等)实现淡入淡出播放效果。
InnerFade
(17)NyroModal
一个基于jQuery开发,非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容,改变对话框大小等。
NyroModal
(18)CrossSlide
CrossSlide这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如:动态地移动、缩放、渐变、滑入"滑出等。
CrossSlide
(19)Magnify
Magnify是一个能够在图片上添加放大镜功能的jQuery插件。
Magnify
(20)Img Notes
用于当鼠标移到图片是时,显示一个信息提示框。
Img Notes
(21)FancyZoom
FancyZoom采用缩放效果来展示图片或任意HTML页面,不需要另外开启页面来载入图片,其效果在Apple Mac的官方网站中也有。
FancyZoom
(22)Jcrop
Jcrop 是一个跨浏览器的jQuery图片剪切插件(jQuery image crop plugin)。支持对剪切框加CSS样式,当选取或拖动时添加回调事件(Callbacks),剪切时能够约束宽度与高度。
Jcrop
(23)Galleriffic
Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看,也可以手动点击缩略图查看。Galleriffic还支持分页,从而使得它能够展示更多的图片。
Galleriffic
(24)Image Upload and Auto Crop
采用PHP+jQuery开发的图片上传和剪切(Crop)工具。
Image Upload and Auto Crop
(25)prettyGallery
prettyGallery是一个图库导航控件Slider。基于jQuery开发,除了可以导航图片之外,还支持其它任何内容。可以配置导航滚动速度和图片标题说明。
prettyGallery
(26)jQuery.popeye
jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。
jQuery.popeye
(27)s3Slider
s3Slider 是一个jQuery slideshow插件,效果类似于smooth slideshow。
可以在图片上的任意位置,透明显示当前所放映图片的说明信息。
s3Slider
(28)Pirobox
采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。
Pirobox
(29)Simple Controls Gallery
这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。
Simple Controls Gallery
(30)Agile Carousel
Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示,添加文本水印等功能。
Agile Carousel
(31)jQuery Plugin-Page Peel
这是一个用于创建Page Peel(卷页/页面剥落)特效的jQuery插件。
jQuery Plugin-Page Peel
(32)Easy Slider
一个jQuery插件,当点击导航按纽时可以水平或垂直播放图片或其它任何内容。
Easy Slider
(33)imgPreview
图片预览jQuery插件。当鼠标移到图片链接上时,会在链接的旁边出现一个类似于tooltip效果的图片展示框。
imgPreview
(34)Jquery Fade In.Fade Out
这是一个用于让图片产生淡入淡出效果的jQuery插件。
Jquery Fade In.Fade Out
(35)Captify
这个jQuery插件能够在图片上显示标题信息,当鼠标放到图片上时滑动出现。
Captify
(36)jParallax
这是一个用于生成视差现象的jQuery插件。mParallax能够产生的效果与jParallax一样但采用Mootools框架开发。
jParallax
(37)jQuery---运用图片预加载技术打造幻灯片
截图:
一些演示:
http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo2.html
http://www.cssrain.cn/demo/jQueryImgLoad/Demo2/demo3.html
http://www.cssrain.cn/demo/jQueryImgLoad/Demo3/demo4.html
http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo1.html (以前做的,非预加载)
下载:
http://www.cssrain.cn/demo/jQueryImgLoad/jQueryImgLoad.rar
(38)jQuery pageSlide
jQuery pageSlide 是一个jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就弹出来。再次点击隐藏页面以外的空间,它就又关闭。
这适合在有限的空间里,在主页里放重要内容,而隐藏页放一些并不一定要显示,而是有需要的用户才去展开显示的内容。
(39)Creating a Slick Auto-Playing Featured Content Slider
Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ,实现我们常说的”图片焦点特效”。多用于门户站。
(40)Portfolio Layout Idea Using jQuery
非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。
它在页面两边显示带缩略的作品列表,当你点击每个条目时,会在中间部分以退场然后进场的特效呈现出该作品的全部内容。
(41)jQuery---图片先模糊后清楚
http://www.hotbook.cn/
很多图片网站用了这种技术,Google图片中心也不例外。
这种技术的图片是先显示模糊的,然后再显示清楚的。
这个模糊的原理就是 一张小图片,然后把尺寸放大,大小等于大图片的宽度和高度。
小图片被拉大了,理所当然就模糊了。
试想:小图片的尺寸是10kb,大图片的大小是500kb,那么加载小图片的速度就是大图片的50倍。
当然你会说,如果直接显示大图片是什么情况呢?答案是:一片空白等着你。
演示:
http://www.cssrain.cn/demo/loadImages/loadimages.html
(42)使用jQuery实现网页报纸
演示:
http://www.cssrain.cn/demo/jquerynewspager/demo.html
原理:使用报纸内容作为 背景图,相对定位。
然后里面的div设置为绝对定位,大小,left和top都要跟背景图匹配。
所以这个有一定的规律。
下载:
http://www.cssrain.cn/demo/jquerynewspager/jquerynewspager.rar
引申:
当后台人员问,每次要传坐标,宽度和高度不麻烦么?用户知道使用么?
教用户使用photoshop?。。。!!!
解决方案:
使用图片截图的插件即可,一般的截图插件都能获取4个坐标,宽度和高度,
当然我们只需要这些,并不需要把图片真正截取下来。
(43)jQuery购物网站产品展示.
作者:cssrain@gmail.com(admin)
程序介绍:
1,点击大图可以弹出遮罩效果.
2,下方小图可以左右滚动.
3,点击新窗口打开,可以打开当前的大图片.
4,遮罩层中小图也可以左右滚动,也可以打开大图片.
在 IE6,IE7,Firefox3 & google 浏览器下测试通过.
演示:
http://www.cssrain.cn/demo/jqueryProduct/demos.html
下载:
http://www.cssrain.cn/demo/jqueryProduct/jqueryProduct.rar
(44)Gallerific
Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果,包括缩略图、图片标题和描述等详细功能,是一个非常不错的高质量画廊相册展示工具。
(45)ZoomImage
zoomimage ,以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图,并且可以可以随意拖拽该悬浮图片。
(46)EasySlider
Easy Slider 可以实现图片或其他任意内容,在水平或垂直方向上的滑动效果,你还可以通过 CSS 自定义设置样式。
(47)The Slider from Barack Obama’s website
一个源自美国总统 Barack Obama 网站的垂下滑动菜单控制的图片幻灯效果。
(48)CodaSlider
CodaSlider,又一个不错的滑动控制效果。
(49)jQuery Slider II
jQuery Slider II 的布局非常符合操作习惯,在底部列出带滚动条的缩略图控制列表,然后在上面显示对应图片的大图浏览,非常适合做高级相册。
(50)Beautiful Slider 热点图书:www.hotbook.cn
Beautiful Slider, 光看这个效果图你就知道这个插件有多棒了吧,是的,这个插件实现的效果已经不逊色于Flash完成的效果,整体表现流畅,文字显示效果更是创意独特。
(51)LoopedSlider
loopedSlider是又一个任意内容滚动切换的幻灯片插件,使用操作简单。
(52)SpaceGallery
SpaceGallery是一个全新的jQuery插件,点击当前图片,会自动放大消失,同时后面的图片向前展示,有一种时光机器的感觉。
(53)jQuery Popeye
(54)Noobslide 热点图书:www.hotbook.cn
(55)Accessible News Slider 热点图书:www.hotbook.cn
(56)SmoothGallery 热点图书:www.hotbook.cn
SmoothGallery是一个最好的 Javascript 幻灯片效果之一,可以实现各种不同的幻灯片转换效果。
(57)jQuery Multimedia Portfolio
jQuery Multimedia Portfolio是一个基于jQuery 的滑动效果插件,除了可以展示图片之外,还可以加入各种不同类型的多媒体文件。
(58)s3Slider
s3Slider是一个非常简单实用的流畅幻灯片效果,这个插件被应用在无数的WordPress专业主题模板中。
via: 15 jQuery image carousels for slideshows and galleries
热点图书:www.hotbook.cn
(59)fxMarquee
fxMarquee 是一个jQuery内容滚动插件。它可以让一组内容定向滚动,并可以设置滚动速度。本插件具有以下特点:
可以上、下、左、右四个方向滚动。可设置鼠标移上时停止滚动。
支持自定义的加速按钮。
介绍
演示
参数说明
教程
下载
兼容性
反馈
(60)商品放大镜效果
在一些大型的购物网站 你经常可以看到这个效果,通过放大镜效果,可以把一个小的图片的某一部位放大到清晰可见。
1.原理
首先你必须要有2张图片,一张缩略图和一张高清晰的图片。
然后当鼠标在缩略图里移动时,通过计算鼠标在缩略图里的位置和比例。
最后通过比例就可以得出大图要显示的部分。
所以最简洁的HTML代码结构如下:
2.小图中的半透明层
当鼠标滑入小图片时,我们需要添加一个半透明层用来显示当前鼠标框住的区域。
有3种状态:
(1)鼠标滑入
(2)鼠标滑动
(3)鼠标滑出
滑入时,我们需要给半透明层定位,并马上显示出层。通过给元素绑定mousemove事件。
滑动时,需要给透明层实时定位,在计算定位时,要注意半透明层不超出图片边界。
同时在mousemove时,添加了一个setTimeout,减少资源占用。
滑出后,隐藏半透明层,并把mousemove解除绑定,减少资源占用.
这一步最关键的就是,滑动时中心点和坐标的计算。
演示:http://www.cssrain.cn/demo/fangdajing/demo_01.html
3.显示放大的图
第2步完成后,第3步就相对简单了。
在刚才3种状态上,在添加点内容。
鼠标滑入时,需要添加大图的显示。
鼠标滑动时,需要根据鼠标当前的位置在小图中的比例,然后把比例*大图的宽度高度 得到大图显示的位置。
鼠标滑出后,需要隐藏大图。
这一步最关键的就是,滑动时比例的计算。
演示:http://www.cssrain.cn/demo/fangdajing/demo_02.html
4.发散思维
此效果不仅是显示商品,地图鹰眼效果也可以使用.
下载:http://www.cssrain.cn/demo/fangdajing/fangdajing.rar
(61)PageSlide
使用时,在当前页面中设定一个链接,该链接的href属性指向另一个页面A,并为该链接绑定pageSlide事件。点击链接时,触发PageSlide 事件,在页面中创建一个新的区域(左侧或右侧,依据传入参数而定),然后通过jQuery ajax将页面A中内容读取到该区域中。
PageSlide用法很简单,简单说一下:
引用jquery库文件及pageslide插件文件
在页面中添加事件触发链接,链接地址是要打开页面的地址,如:
<a href="_left.html" id="slide-left">从右边打开隐藏空间</a>
为链接绑定pageSlide事件,并传入设定参数:
//第一个参数是页面新区域的宽度
//第二个参数是当前页面移动方向,方向为left,也就是从右侧出现新区域
$("#slide-left").pageSlide({ width: "350px", direction: "left" });
下载PageSlide插件: 点击下载
本地下载:pagelider.rar (3.68 kb)
62.
63.
64.不错的图片分类展示或者文字展示效果
(65)jQuery Infinite Carousel
66.T血展示效果
How to Make a Threadless Style T-Shirt Gallery
67.利用z-index做的图片展示效果
Create a gallery by using z-index and jQuery
4.自动填充类
(1)AutoComplete-JQuery
jQuery插件易于集成到现在的表单中(Form)。
(2)Facebook like Autocomplete
基于jQuery开发,类似于FaceBoox提供的AutoCompleter。
(3)jQuery Autocomplete Mod
jQuery Autcomplete插件。能够限制下拉菜单显示的结果数。
(4)jqac
基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。
(5)jQuery Tag Suggestion
类似于del.icio.us提供的tag suggesting功能。
(6)Autocomplete-jQuery ajax
利用 jQuery(Ajax),PHP和MySQL开发的AutoCompleter。
(7)jQuery.Suggest
跨浏览器支持,基于jQuery开发的Autocomplete library。
(8)Autocomplete- jQuery plugin
一个jQuery Autocompleter,提供缓存选项来限制对服务器的请求。
(9)jQuery plugin: Autocomplete
自动完成输入框值让用户能够快速查找和过滤某些值。
(10)jSuggest
模仿Google Suggest功能的AutoComplete jQuery插件。
(11)jQuery Live Ajax Search Plug-in
采用jQuery开发的AutoComplete控件。搜索结果展示框完全可以利用CSS自定义,内容展示是一个HTML页面。
(12)ddcombobox
带AutoComplete功能的下拉选择框jQuery插件。
(13)Kissy Suggest
重写后的组件压缩后约 10k, 仅依赖 YUI2 的 yahoo-dom-event. 目前在淘宝已全面应用一个多月。现在开源出来,希望能对需要此功能的兄弟们有所帮助。源码地址:
http://kissy.googlecode.com/svn/trunk/src/suggest/
suggest-yui2.js 是源码,test.html 是测试页面,demo.html 是实例,demo-google.html 是利用该组件给谷歌恢复搜索提示的小玩意。如果在项目中真实使用,需要加载以下两个文件:
http://kissy.googlecode.com/svn/trunk/lib/yui2/yahoo-dom-event.js
http://kissy.googlecode.com/svn/trunk/build/suggest/suggest-yui2-min.js
可以很自信地说:这个组件目前无论在细节还是性能上,都是数一数二的。
欢迎试用和有效的建议。
PS:很感慨 Google 的产品,精致小巧,非常注意细节。Google 英文首页的搜索提示,看似简单,但极不简单。对键盘和鼠标等事件的细节处理上,没有看到比 Google 做得更好的。Kissy Suggest 在交互细节上基本上做到了和 Google 的一样,同时增加了对本土输入法的支持
(14)apple风格的自动填充效果
5.分页类
(1)jQuery Pagination
jQuery分页插件
jQuery Pagination
(2)pager jQuery plug-in
jQuery分页插件。
pager jQuery plug-in
(3)JQuery Pager
一个利用jQuery开发的分页UI控件,可用于数据驱动的web应用程序中。
JQuery Pager
6.编辑器类
(1)jwysiwyg
WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。
jwysiwyg
(2)Damn Small Rich Text Editor
基于jQuery开发,能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能,可设置文本编辑区大小,Ajax上传图片等。
Damn Small Rich Text Editor
(3)xhEditor
xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。
编辑器组件采用LGPL协议开放源代码,您可以任意修改,并使用在您商业或者非商业系统中。同样,您也可以任意的学习和参考我们的源代码。若您对本编辑器代码进行改动或者再开发并对外发布的话,请您也使用LGPL协议来开放您的源代码,谢谢。
最新0.9.5版程序下载:http://code.google.com/p/xheditor/downloads/list
演示程序:
默认模式:http://static.pirate9.com/js/xheditor_demos/demo1.html
自定义按钮:http://static.pirate9.com/js/xheditor_demos/demo2.html
皮肤选择:http://static.pirate9.com/js/xheditor_demos/demo3.html
其它选项:http://static.pirate9.com/js/xheditor_demos/demo4.html
Javascript交互:http://static.pirate9.com/js/xheditor_demos/demo5.html
非utf-8编码网页调用:http://static.pirate9.com/js/xheditor_demos/demo6.html
UBB可视化编辑:http://static.pirate9.com/js/xheditor_demos/demo7.html
Ajax图片上传:http://static.pirate9.com/js/xheditor_demos/demo8.html
7.表格类
(1)Flexigrid
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
Flexigrid
(2)Ingrid
这个jQuery DataGrid提供的功能有:可以拖动调整列宽,分页,排序,设置行/列样式等。
Ingrid
(3)jQuery Grid
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等。
Demo
jQuery Grid
(4)tableHover
tableHover一个jQuery插件当鼠标经过时,能够对表格的一整列或行进行着色加亮。支持colspans与rowspans的表格。
tableHover
(5)JQuery.Resizer
一个轻量级jQuery插件用于创建可以拖动调整行高与列宽的表格。
JQuery.Resizer
(6)tablesorter
tablesorter 这个jQuery插件能够将带THEAD与TBODY标签的标准HTMLTable转换成一个可排序的表格。tablesorter能够排序多种数据类型包括Text、URIs、integers、currency、floats、IP地址、日期、时间和自定义的数据类型。支持拥有复杂表头表格的排序,支持二级隐藏排序,支持多种浏览器:IE6.0+、FF2+、Safari2.0+、Opera9.0+。
tablesorter
(7)csv2table
csv2table这个插件能够将CVS文件(利用Excel创建)的内容转换成HTML Table。
jQuery表格排序插件,点击表格中对应列的头部单元,表格立即重新排序。
Tablesorter | Demo
csv2table
(8)tableFormSynch
tableFormSynch 是一个表格与表单数据相互更新的jQuery插件。它提供的功能包括:基于表单中的数据,新增行。删除所选择行,并清除表单中的所有数据。 tableFormSynch支持所有表单控件包括:checkboxes、radio、buttons 与<select>。
tableFormSynch
8.色彩选择器类
(1) Farbtastic
Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。
Farbtastic
(2)jQuery Color Picker
一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。
jQuery Color Picker
(3)iColorPicker
iColorPicker是一个只有6KB大小的jQuery Color Picker。只要将输入框的class属性设置为“iColorPicker”就能变一个漂亮的颜色选择器。
iColorPicker
9.数据验证类
1. jQuery plugin: Validation
jQuery校验插件。
jQuery plugin: Validation
2. Masked Input Plugin
Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)。
Masked Input Plugin
jQuery password strength meter
用于检测密码强度的jQuery插件。
jQuery password strength meter
3 jVal
jQuery表单校验插件。
jVal
4. jQuery formValidator 感谢博览群书 友情提供
http://www.kmroom.com/js/formValidator3.3/index.html
10.报表类
1.
2. Flot
Flot一个纯javascript绘画库,基于jQuery开发。它能够在客户端根据任何数据集快速生成图片。目前只能绘制线状图和柱状。
Flot
3. jQchart
基于Canvas+jQuery,可拖放/交互的简单图形控件。
jQchart
4 jquery.sparkline
这是一个用于生成迷你型线状图的jQuery插件。
jquery.sparkline
5. jQuery Google Charts (演示地址)
jQuery Google Charts是一个封装Google API charts的jQuery插件,提供了更加简易的使用方法。
6. jqPlot (演示地址)
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图。jqPlot支持为图表设置各种不同的样式。提供Tooltips,数据点高亮显示等功能。
11.上传类
1. jqUploader
结合Javascript与Flash开发,拥有上传进度条的文件上传控件。
jqUploader
2. jQuery Multiple File Upload Plugin
多文件上传插件(jQuery.MultiFile)能够让用户一次性选择多个要上传的文件。此外该插件还提供一些基本的校验功能比如:文件扩展名校验。
jQuery Multiple File Upload Plugin
3. jQuery: Ajax file upload
Ajax文件上传插件让用户能够很方便地上传多个文件而无需刷新页面。此外,可以使用任何元素(图片,文字,按纽等)来触发文件选择窗口。
jQuery: Ajax file upload
12.日期时间类
1. jQuery UI Datepicker
基于jQuery开发的日期选择控件。
jQuery UI Datepicker
2. Date Picker
Date Picker一个采用jQuery开发的日期选择控件。支持同时显示多个月份日历,标记特殊日期,易于通过CSS定制外观,自定义周的第一天,自定义月份和星期的显示名称。
Date Picker
3. Date Range Picker
基于jQuery UI1.6与jQuery UI CSS框架开发的日期选择控件。
Date Range Picker
13.圆角效果类
1. jQuery Corner
不需要图片就能够创建各种圆角形状的jQuery插件。
jQuery Corner
2. JQuery Curvy Corners
用于创建圆角的jQuery插件。压缩之后大小只有9k。
JQuery Curvy Corners
3. jQuery Corner
更多圆角效果的jQuery插件。
jQuery Corner
4. jQuery Corners
这是一个用于创建漂亮圆角效果的jQuery插件。不需要用到图片或其它特殊的标签。
jQuery Corners
14.评价类
(1)Creating a Dynamic Poll with jQuery and PHP
(2)Reddit-style Voting With PHP, MySQL And jQuery
一个不错的ajax投票效果
(3) jQuery Ajax Rater Plugin
能够动态创建Ajax Rater的jQuery插件。
jQuery Ajax Rater Plugin
4. Star Rating widget
采用jQuery框架开发的评价控件。
Star Rating widget
5. jQuery Star Rating Plugin
Star Rating Plugin是一个基于一组radio input boxes实现的星形评价控件。
jQuery Star Rating Plugin
6. Ajax Poll
利用jQuery的Ajax和动画效果并给合PHP开发的投票系统。
Ajax Poll
7.jQuery 投票调查组件
主要功能:
测试答题框
可作心理测试等测试题使用
问题和选项通过questions.xml设置
显示当前得分
显示当前答题进度
可作翻看选过的选项
通过不同的得分调取不同结果内容
DEMO 地址 静态版本
DEMO 地址 XML 版本
文件打包下载
下面是装载XML 版本的代码 完整的代码请 打包下载
15.虚拟键盘类
1.
在进行一些高安全性 Web 设计时,为了用户输入表单信息的安全,往往不希望用户直接通过实体鼠标进行操作,而是提供额外的 Web 虚拟鼠标来帮助用户完全某些隐私表单内容的输入,所以,就用到了本文提及的3个 JavaScript 安全虚拟键盘插件。
自定义 jQuery 虚拟小键盘插件 plugin
jQuery 小键盘 是一个用于创建安全表单输入的插件工具,提供友好的键盘界面接口。使得可以仅允许用户输入数字、字母等限制性操作。
2.jQuery 虚拟键盘
一个创建 jQuery 虚拟键盘 的学习向导,教你一步一步地创建自己的jQuery 虚拟键盘,而且必须得 JavaScript 脚本可以免费下载。安全性高的 Web 虚拟键盘在金融类网站的和要求高安全性的表单操作中应用非常广泛。所以,学会如何编写一个优秀的Web 安全虚拟键盘非常有用。
3.Virtual keyboard 虚拟键盘
虚拟键盘被广泛应用在极高级别的网站开发中,包括在线银行类网站应用等。Virtual keyboards 能帮助我们防止键盘操作记录,阻止用户进行某些特殊按键的限制操作, virtual keyboard 使用简单,支持多种语言。
16.Form元件扩展
(1)jQuery.combobox
jQuery.combobox是一个采用jQuery开发的combobox控件,可以使用CSS控制该combobox的外观,可以设置各种不同风格的下拉动画效果。
jQuery.combobox
(2)jquery button:对按钮的扩展
开发项目时,经常需要自已开发一些UI组件,在这里共享一个刚开发的Button控件,这个Button使用很简单,只要加入相关的CSS和JS文件,这样页面中的所有input按扭都将会被自动渲染为漂亮的个性化按扭,不需要写一句代码。
button.rar (72.00 kb)
(3)ContextMenu
用于创建右键弹出菜单的jQuery插件。
ContextMenu
(4)
(5)在链接旁边加一个小图标效果
Add a favicon near external links with jQuery
6 jNice
创建自定义外观的Form元素,功能与正常的Form元素相似。
jNice
7. jQuery calculate
jQuery计算插件,提供一些常用的数学计算功能比如:Sum、Average、Min、Max等。
jQuery calculate
8. jQuery select box
模仿HTML select box实现功能的一个下拉菜单。
jQuery select box
9. prettyCheckboxes
一个简单的jQuery插件用于定制checkboxe和radio按纽的外观。
prettyCheckboxes
10. jGrow
jGrow这个jQuery插件能够让textarea根据文本的长度自动调整它的大小。
jGrow
11. jQuery Form Plugin
为表单(Form)提供全面Ajax支持,包括文件上传功能的jQuery插件。提供的方法/功能包括:ajaxForm、ajaxSubmit、 formToArray、formSerialize、fieldSerialize、fieldValue、clearForm、 clearFields、resetForm。这些方法能够让你轻松地管理Form中的数据和Form无刷新提交。
jQuery Form Plugin
12. mcDropdown jQuery Plug-in
mcDropdown是一个独特的UI控件,它能够让用户在一个复杂分级的树形下拉选项中进行选择。
mcDropdown jQuery Plug-in
13. Create A Slider From A Select Box
这是一个漂亮的jQuery插件能够自动将select boxes转换成一个sliders控件。
Create A Slider From A Select Box
14. TextArea Resizer
这个jQuery插件提供Resizer bar可拖动调整TextArea大小。
TextArea Resizer
15. jQuery MultiSelect
jQuery MultiSelect是一个可配置的jQuery插件。它将普通的列表框表单控件转换成带有CheckBox的下拉列表控件。
jQuery MultiSelect
16. Editable(jQuery Editable Plugin)
这是一个真正可定制的jQuery editableplugin。当前它能够将任意不可编辑的标签(span、div、p...等)转换成可编辑的textinput、password、 textarea、下拉列表(drop-downlist)等标签。你可以利用它的editableFactory对象来扩展添加自己所需的input type。
Editable(jQuery Editable Plugin)
17. NicejForm
NiceJForm 是一个拥有完美外形的表单,它是基于jquery库的,NiceJForms实际上是个jquery插件,用来使表单看起来更为美观。这不是最终版本,我知道可以通过多种途径改良它的脚本,但是至少,这是一个可以使用的稳定版本。非常感谢Lucian Slatineanu发布的NiceJForm,在他的blog中你可以获得更多信息。
在IE6,IE7,Firefox2.0中测试成功。
NicejForm
18. jScrollPane
jScrollPane这个jQuery插件可以让你通过简单的CSS设置就能够替换所有分块元素在浏览器中默认的垂直滚动条样式。
jScrollPane
19.利用jQuery制作类似skype的按钮效果.
演示:
http://www.cssrain.cn/demo/skypebuttons/SkypeButton.html
http://www.cssrain.cn/demo/skypebuttons/SkypeButton2.html
20.jCheckbox:
效果图:
简介:
jCheckbox用于模拟checkbox的效果, 方便开发人员自定义外观, 由于所有的属性都绑定到目标checkbox, 所以不必担心状态保存或取值的问题...
导航:
详细介绍 | 在线演示
(21)jQuery asmSelect 感谢博览群书 友情提供
http://www.ryancramer.com/projects/asmselect/examples/example1.html
17.游戏类
1.连连看
不需要flash,使用JQuery的平移效果,自己完成的动画效果(使用的google首页的图片)
托管到Google上了。地址:http://code.google.com/p/jsgame-llk
svn下载地址:https://jsgame-llk.googlecode.com/svn/trunk
google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
18.代码高亮类
1. beautyOfCode (演示地址)
beautyOfCode这个jQuery插件能够对html页面中各种源代码的语法进行着色显示。封装自Syntaxhighlighter并添加对xhtml兼容支持。
2. Chili (演示地址)
Chili是一个jQuery源代码语法着色/高亮插件。具有以下特性:
着色非常快,易于使用,完全可定制,文档丰富。
支持显示行号。
在Internet Explorer、Firefox、Opera和Safari等浏览器上显示同样的效果。
默认支持的源代码类型包括:C 、C#、CSS、Delphi、Java、JavaScript、LotusScript、MySQL、PHP和XHTML。
完全支持正则表达式,包括反向引用。
3. Highlight plugin (演示地址)
jQuery “Highlight” plugin是一个能对任意页面标签,当被选中时添加高亮提示的jQuery插件。主要用于提示表单填写。
其它类:
jquery-aop
为 JavaScript增加面向方面编程特性的jQuery插件。它能给任何函数添加Advices(Before、与Around)。
jquery-aop
xmlObjectifier
基于jQuery开发,能够把XML DOM转换成 JSON的JavaScript library。
xmlObjectifier
JQuery Portlets
这个jQuery插件提供一些Portlets功能包括:drag/drop,expand,collapse等。
JQuery Portlets
EasyDrag jQuery Plugin
这个jQuery Plugin能够为大部DOM元素添加拖放功能。
EasyDrag jQuery Plugin
Drag and Drop:
效果图:
简介:
dragndrop为开发人员实现dom拖拽提供了更简单的方法, 并可以监视对象dom的位置以便进行数据(position)存储...
导航:
详细介绍 | 在线演示
Resizable:
效果图:
简介:
resizable插件使html dom resize更易于实现(这句话真别扭)...
导航:
详细介绍 | 在线演示
jFeed
jFeed是一个基于jQuery开发的RSS/ATOM Feed解析器。 jFeed能够解析RSS0.91、0.92、1.0、2.0和Atom1.0 Feeds。
jFeed
jQuery.UI ProgressBar Widget
采用jQuery开发的进度条控件。
jQuery.UI ProgressBar Widget
JQuery Progress Bar
基于jQuery开发的进度条控件。在其网站上提供一个可以显示文件上传进度的例子,服务器端采用PHP处理。
JQuery Progress Bar
jQuery Form Plugin
jTemplates
基于jQuery开发的javascript模板引擎。
jTemplates
Animated Collapsible DIV
为任何DIV层添加Web2.0风格的动画隐藏/显示效果。
Animated Collapsible DIV
Simple Effects Plugins
jQuery特效插件,可以实现收缩,隐藏,显示,淡入/淡出和上下滑动效果等.
Simple Effects Plugins
jQuery.Hotkeys plugin
这个jQuery插件能够帮助你快速创建键盘触发事件。支持任意组合键。
jQuery.Hotkeys plugin
jMP3
jMP3是一个采用jQuery开发的JavaScript MP3插放器,提供一种可以在页面上直接播放MP3的简便方式。
jMP3
Pure
Pure是一个基于jQuery开发,能够动态生成HTML的JavaScript模板引擎。支持JSON数据。
Pure
Chain.js
Chain.js是一个提供数据绑定功能的jQuery插件。用于自动生成Web内容,有利于数据与表现相分离。
Chain.js
ppDrag
ppDrag是一个让页面元素拥有拖移(Drag&Drop)效果的jQuery插件。
ppDrag
jqDnR
jqDnR一个轻量级jQuery插件能够让你拖拽任何元素、调整元素大小。
jqDnR
Scroll Follow
Scroll Follow是一个简单的jQuery插件。当滚动页面时,能够让DOM对象产生浮动跟随效果。
Scroll Follow
jQuery Taconite Plugin
这个jQuery插件能够利用单个Ajax调用结果同时更新多个DOM对象。
jQuery Taconite Plugin
jQuery URL Parser
用于解析URLs字符串的jQuery插件。方便你获取协议,主机,端口,查询参数,文件名,路径等。
jQuery URL Parser
jQuery.xml2json
jQuery.xml2json是一个能够将简单的XML转换成JSON对象的jQuery插件。
jQuery.xml2json
Ajaxify
Ajaxify这个jQuery插件能够将一个页面中的所有链接转换成Ajax加载和提交请求。
Ajaxify
jQuery Address - Deep linking plugin。
从 CssRain.cn 作者:cssrain@gmail.com(admin)
类似于瞄点技术( url#address ),使得浏览器的后退按钮生效。在Ajax应用中,可以使用。
演示:
http://www.asual.com/jquery/address/samples/tabs/
http://www.asual.com/jquery/address/samples/api/
下载:
http://www.asual.com/jquery/address/
quickSearch
quickSearch,顾名思义是一个jQuery驱动的快速搜索插件,Ajax显示搜索结果。
quickSearch | Demo
(1)Horizontal accordion: jQuery 5
(2)jQuery-Horizontal Accordion 5
(3)jQuery plugin: Accordion 5
(4)Accordion Menu script 6
(5)模仿ext的tab选项卡 6
(6) 8
(7)De-Constructing Accordion and Hover Effects with jQuery 8
(8)导航到页内指定位置 8
(10) Sexy Drop Down Menu w/ jQuery & CSS 9
(11) A Different Top Navigation 9
(12)Sliding Jquery Menu Tutorial 9
(13)Animated Drop Down Menu with jQuery 10
14. jQuery UI错误!未找到索引项。 Potato Menu 10
15. Make a Mega Drop-Down Menu with jQuery 10
(16)Superfish v1.4.8 – jQuery menu plugin by Joel Birch 11
(17)jQuery (mb)Menu 2.7 11
(18) jQuery File Tree 11
19.jQuery & CSS Example – Dropdown Menu 12
20. Reinventing a Drop Down with CSS and jQuery 12
21. Simple jQuery Dropdowns 12
22. Styling Drop Down Boxes with jQuery 13
23. jQuery iPod-style Drilldown Menu 13
24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready 13
25. mcDropdown jQuery Plug-in v1.2.07 14
26. jQuery Drop Line Tabs 14
27. Cut & Paste jQuery Mega Menu 14
28. jdMenu Hierarchical Menu Plugin 15
2.消息提示类 15
(1)Facebox 15
(2)SimpleModal 16
(3)jTip 16
(4)BetterTip 16
(5)clueTip 17
(6)jQuery lightBox plugin 17
(7)jQuery Impromptu 18
(8) jQuery.UI Messenger"Outlook like message notification Widget 18
(9)FancyBox 18
(10)Coda Popup Bubbles 19
(11)jGrowl 19
(12)jqWindowsEngine 19
(13)jQuery Alert Dialogs 20
(14)BeautyTips 21
(15)Facebook/Xiaonei 风格模态框 21
3.图片展示类 21
(1)imgAreaSelect 21
(2)Easy Slide 22
(3)Easy News 22
(4)jQZoom 23
(5)jCarousel Lite 24
(6)jCarousel 24
(7)Spacegallery-Jquery 24
(8)jQuery Slider Gallery 25
(9)jQuery Cycle Plugin 25
(10)Zoomimage 26
(11)prettyPhoto 26
(12)ThickBox 27
(13)Galleria 28
(14)jQuery Flash Plugin 28
(15)jQuery.SerialScroll 29
(16)InnerFade 29
(17)NyroModal 29
(18)CrossSlide 30
(19)Magnify 30
(20)Img Notes 31
(21)FancyZoom 31
(22)Jcrop 32
(23)Galleriffic 32
(24)Image Upload and Auto Crop 33
(25)prettyGallery 33
(26)jQuery.popeye 33
(27)s3Slider 34
(28)Pirobox 35
(29)Simple Controls Gallery 35
(30)Agile Carousel 35
(31)jQuery Plugin-Page Peel 36
(32)Easy Slider 36
(33)imgPreview 37
(34)Jquery Fade In.Fade Out 37
(35)Captify 37
(36)jParallax 38
(37)jQuery---运用图片预加载技术打造幻灯片 39
(38)jQuery pageSlide 39
(39)Creating a Slick Auto-Playing Featured Content Slider 40
(40)Portfolio Layout Idea Using jQuery 40
(41)jQuery---图片先模糊后清楚 41
(42)使用jQuery实现网页报纸 41
(43)jQuery购物网站产品展示. 41
(44)Gallerific 42
(45)ZoomImage 43
(46)EasySlider 43
(47)The Slider from Barack Obama’s website 44
(48)CodaSlider 44
(49)jQuery Slider II 44
(50)Beautiful Slider 热点图书:www.hotbook.cn 45
(51)LoopedSlider 45
(52)SpaceGallery 46
(53)jQuery Popeye 46
(54)Noobslide 热点图书:www.hotbook.cn 47
(55)Accessible News Slider 热点图书:www.hotbook.cn 47
(56)SmoothGallery 热点图书:www.hotbook.cn 47
(57)jQuery Multimedia Portfolio 48
(58)s3Slider 48
(59)fxMarquee 48
(60)商品放大镜效果 49
(61)PageSlide 50
64.不错的图片分类展示或者文字展示效果 52
67.利用z-index做的图片展示效果 53
4.自动填充类 53
(1)AutoComplete-JQuery 53
(2)Facebook like Autocomplete 54
(3)jQuery Autocomplete Mod 54
(4)jqac 54
(5)jQuery Tag Suggestion 54
(6)Autocomplete-jQuery ajax 54
(7)jQuery.Suggest 55
(8)Autocomplete- jQuery plugin 55
(9)jQuery plugin: Autocomplete 55
(10)jSuggest 55
(11)jQuery Live Ajax Search Plug-in 56
(12)ddcombobox 56
5.分页类 58
(1)jQuery Pagination 58
(2)pager jQuery plug-in 58
(3)JQuery Pager 59
6.编辑器类 59
(1)jwysiwyg 59
(2)Damn Small Rich Text Editor 59
(3)xhEditor 60
7.表格类 60
(1)Flexigrid 60
(2)Ingrid 60
(3)jQuery Grid 61
(4)tableHover 61
(5)JQuery.Resizer 62
(6)tablesorter 62
(7)csv2table 62
(8)tableFormSynch 63
8.色彩选择器类 63
(1) Farbtastic 63
(2)jQuery Color Picker 64
(3)iColorPicker 64
9.数据验证类 65
1. jQuery plugin: Validation 65
2. Masked Input Plugin 65
3 jVal 66
10.报表类 66
1. 66
2. Flot 66
3. jQchart 67
4 jquery.sparkline 67
5. jQuery Google Charts (演示地址) 68
6. jqPlot (演示地址) 68
11.上传类 68
1. jqUploader 68
2. jQuery Multiple File Upload Plugin 68
3. jQuery: Ajax file upload 68
12.日期时间类 69
1. jQuery UI Datepicker 69
2. Date Picker 69
3. Date Range Picker 69
13.圆角效果类 70
1. jQuery Corner 70
2. JQuery Curvy Corners 70
3. jQuery Corner 71
4. jQuery Corners 71
14.评价类 72
(1)Creating a Dynamic Poll with jQuery and PHP 72
(3) jQuery Ajax Rater Plugin 73
4. Star Rating widget 73
5. jQuery Star Rating Plugin 73
6. Ajax Poll 73
7.jQuery 投票调查组件 74
15.虚拟键盘类 75
1. 75
2.jQuery 虚拟键盘 76
3.Virtual keyboard 虚拟键盘 76
16.Form元件扩展 76
(1)jQuery.combobox 76
(2)jquery button:对按钮的扩展 77
(3)ContextMenu 77
(4) 77
(5)在链接旁边加一个小图标效果 78
6 jNice 78
7. jQuery calculate 78
8. jQuery select box 78
9. prettyCheckboxes 79
10. jGrow 79
11. jQuery Form Plugin 79
12. mcDropdown jQuery Plug-in 80
13. Create A Slider From A Select Box 80
14. TextArea Resizer 80
15. jQuery MultiSelect 81
16. Editable(jQuery Editable Plugin) 81
17. NicejForm 81
18. jScrollPane 82
19.利用jQuery制作类似skype的按钮效果. 82
20.jCheckbox: 82
(21)jQuery asmSelect 感谢博览群书 友情提供 83
17.游戏类 83
1.连连看 83
18.代码高亮类 83
1. beautyOfCode (演示地址) 83
2. Chili (演示地址) 83
3. Highlight plugin (演示地址) 84
1.导航类
(1)Horizontal accordion: jQuery
基于jQuery开发,非常简单的水平方向折叠控件。
(2)jQuery-Horizontal Accordion
具有XBOX360 blade界面风格的水平方向Accordion。
(3)jQuery plugin: Accordion
用于创建 折叠菜单的jQuery插件。
(4)Accordion Menu script
基于jQuery开发的可折叠菜单。
(5)模仿ext的tab选项卡
TabPanel(选项卡组件)
参数说明
renderTo<渲染到某容器string | jQuery object | NULL>
将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。
items<选项卡元素集合array>
选项卡组件渲染后就会显示的选项卡元素集合,具体参数请查看选项卡元素。
width<宽度string | number>
选项卡组件的总宽度,默认400px。
height<高度string | number>
选项卡组件中页面显示层的高度,默认300px。
border<是否显示边框string>
嵌套显示选项卡时,会出现重复边框的情况,影响美观,将border设置为”none”,则可以避免,默认显示边框,不接受除”none”之外的参数值。
active<渲染后默认激活哪个选项卡元素number>
下标以0为开始,默认为0。
maxLength<最多显示几个选项卡元素number>
-1为无限,默认为-1。
tabs<获得选项卡组件所有的选项卡元素return array>
可根据需要获得选项卡组件的所有选项卡元素。
公共方法
addTab(添加一个选项卡元素object)
动态向选项卡组件中添加一个选项卡元素。
flush(刷新选项卡元素的内容string | number)
将选项卡元素的内容刷新,参数可以为选项卡元素的ID或下标。
show(显示选项卡元素string | number)
显示制定选项卡元素,参数可以为选项卡元素的ID或下标。
Kill(关闭选项卡元素string | number)
关闭选项卡元素,参数可以为选项卡元素的ID或下标。
getTabsCount()<获得选项卡元素数量return number>
getTitle(获得选项卡元素的标题string | number) <return string>
setTitle(设置选项卡元素的标题string | number, string)
getContent(获得选项卡元素的内容string | number) <return string>
setContent(设置选项卡元素的内容string | number, string)
getDisable(选项卡元素是否禁用string | number) <return boolean>
setDisable(设置选项卡元素是否禁用string | number)
getCloseable(选项卡元素是否可关闭string | number) <return boolean>
setCloseable(设置选项卡元素是否可关闭string | number, boolean)
getActiveTab()<获得被激活的选项卡元素return object>
使用方法
页面引入jQuery.js、TabPanel.js、Fader.js、TabPanel.css
new TabPanel({
renderTo:'tabs',
width: '100%',
height: '500px',
active: 0,
items: [{
title:'工作中心',
html:'<iframe width="100%" height="100%" frameborder="0"></iframe>',
closable: false
}]
});
TabPanel item(选项卡元素)
参数说明
id<元素IDstring>
必须唯一,或者不设置该参数,否则将无法添加到选项卡组件中,默认自动生成。
title<元素标题string>
可以动态设置。
closeable<是否可关闭boolean>
true可关闭,false不可关闭,默认为true。
TabPanel.rar (22.94 kb)
(6)
(7)De-Constructing Accordion and Hover Effects with jQuery
(8)导航到页内指定位置
Automatically generate table of contents using jQuery
(9) “Outside the Box” Navigation with jQuery
This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.
(10) Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.
(11) A Different Top Navigation
(12)Sliding Jquery Menu Tutorial
(13)Animated Drop Down Menu with jQuery
14. jQuery UI错误!未找到索引项。 Potato Menu
15. Make a Mega Drop-Down Menu with jQuery
(16)Superfish v1.4.8 – jQuery menu plugin by Joel Birch
(17)jQuery (mb)Menu 2.7
(18) jQuery File Tree
19.jQuery & CSS Example – Dropdown Menu
20. Reinventing a Drop Down with CSS and jQuery
21. Simple jQuery Dropdowns
22. Styling Drop Down Boxes with jQuery
23. jQuery iPod-style Drilldown Menu
24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
25. mcDropdown jQuery Plug-in v1.2.07
26. jQuery Drop Line Tabs
27. Cut & Paste jQuery Mega Menu
28. jdMenu Hierarchical Menu Plugin
2.消息提示类
(1)Facebox
Facebox 是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面。
Facebox
(2)SimpleModal
SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。
SimpleModal
(3)jTip
jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。
jTip
(4)BetterTip
一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活。
BetterTip
(5)clueTip
clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时,它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取,也可以从当前页面中的元素中获取。
clueTip
(6)jQuery lightBox plugin
一个简单,强大基于jQuery开发的lightBox控件。
jQuery lightBox plugin
(7)jQuery Impromptu
用于创建模式对话框,确认对话框,输入内容对话框的jQuery插件。
jQuery Impromptu
(8) jQuery.UI Messenger"Outlook like message notification Widget
这个jQuery.UI控件类似于Messenger"Outlook消息弹出提醒框。
jQuery.UI Messenger"Outlook like message notification Widget
(9)FancyBox
基于jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该Lightbox除了能够展示图片之外,还可以展示iframed内容, 通过CSS自定义外观。
FancyBox
(10)Coda Popup Bubbles
采用jQuery开发,类似“冒泡”效果的提醒弹出框。
Coda Popup Bubbles
(11)jGrowl
jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac OSX系统中Growl事件通知框架。
jGrowl
(12)jqWindowsEngine
这个jQuery插件能够帮助你轻松创建Ajax Windows。
jqWindowsEngine
(13)jQuery Alert Dialogs
这个jQuery插件能够替换JavaScript提供的alert()、confirm()和prompt()功能。支持利用CSS自定义对话框外观。
jQuery Alert Dialogs
(14)BeautyTips
BeautyTips是一个jQuery Tooltip插件.
BeautyTips
(15)Facebook/Xiaonei 风格模态框
效果图:
简介:
使用 div, table 和 opacity 效果实现模态框效果...
导航:
详细介绍 | 在线演示
(15)jmpopups
可弹出多级新窗口
在线实例
实例源代码
3.图片展示类
(1)imgAreaSelect
imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。
imgAreaSelect
(2)Easy Slide
EasySlide 是以jQuery为基础开发的一个图库展示插件,EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示,并加上鼠标指向时的暂停效果(Pause),可以当作图库展示或是动画及广告Banner使用。
Easy Slide
(3)Easy News
Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件,可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果,调整显示速度,可自行修改CSS改变您为喜欢的风格。
Easy News
Easy News Plus
Easy News Plus是基于Easy News开发,滚动式新闻或图文内容展示的jQuery插件,但是与Easy News有完全不同的显示方式(以左右滑动为主要的显示方法)。
Easy News Plus
(4)jQZoom
基于jQuery开发的图片放大镜插件。
jQZoom
jQuery Plugin: Text Highlight
利用javascript对页面中的关键字进行着色的jQuery插件。
jQuery Plugin: Text Highlight
(5)jCarousel Lite
这个jQuery插件能够帮助你以滚动(carousel)的方式来组织图片和其它内容。
jCarousel Lite
(6)jCarousel
jCarousel是一个jQuery插件用于控制一个列表项目的水平或垂直顺序,列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。可以向前或向后滚动。
jCarousel
(7)Spacegallery-Jquery
一个采用jQuery开发,类似于Flash效果的图库(image gallery)。
Spacegallery-Jquery
(8)jQuery Slider Gallery
这是一个基于jQuery开发相册控件,类似于Apple网站上用于展示产品的效果。
jQuery Slider Gallery
(9)jQuery Cycle Plugin
jQuery Cycle Plugin是一个slideshow插件。支持多种变换效果:shuffle、zoom、fade、turnDown、curtainX、scrollRight。
jQuery Cycle Plugin
(10)Zoomimage
该jQuery插件能够让以当前流行的方式来展示图片。提供:预加载图片提示,对图片进行分组,自动调整图片显示比例,图片分组浏览控制。
Zoomimage
(11)prettyPhoto
prettyPhoto是jQuery lightbox的一个“克隆”。并增加动画效果,图库浏览等特性。
prettyPhoto
(12)ThickBox
ThickBox是一个模式对话框UI控件。基于jQuery开发,可以用来展示单张或多张图片,内嵌的内容,iframed的内容,或通过Ajax获取的内容。
ThickBox
(13)Galleria
Galleria 是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件,因此可以在图片加载时执行一些动作。
Galleria
(14)jQuery Flash Plugin
一个jQuery插件用于在页面中嵌入Flash影片。
jQuery Flash Plugin
(15)jQuery.SerialScroll
jQuery.SerialScroll是一个用于创建滚动效果的jQuery插件,支持水平/垂直方向滚动和混合滚动效果。
jQuery.SerialScroll
(16)InnerFade
InnerFade这个jQuery插件能够让任意一组元素(img,div等)实现淡入淡出播放效果。
InnerFade
(17)NyroModal
一个基于jQuery开发,非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容,改变对话框大小等。
NyroModal
(18)CrossSlide
CrossSlide这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如:动态地移动、缩放、渐变、滑入"滑出等。
CrossSlide
(19)Magnify
Magnify是一个能够在图片上添加放大镜功能的jQuery插件。
Magnify
(20)Img Notes
用于当鼠标移到图片是时,显示一个信息提示框。
Img Notes
(21)FancyZoom
FancyZoom采用缩放效果来展示图片或任意HTML页面,不需要另外开启页面来载入图片,其效果在Apple Mac的官方网站中也有。
FancyZoom
(22)Jcrop
Jcrop 是一个跨浏览器的jQuery图片剪切插件(jQuery image crop plugin)。支持对剪切框加CSS样式,当选取或拖动时添加回调事件(Callbacks),剪切时能够约束宽度与高度。
Jcrop
(23)Galleriffic
Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看,也可以手动点击缩略图查看。Galleriffic还支持分页,从而使得它能够展示更多的图片。
Galleriffic
(24)Image Upload and Auto Crop
采用PHP+jQuery开发的图片上传和剪切(Crop)工具。
Image Upload and Auto Crop
(25)prettyGallery
prettyGallery是一个图库导航控件Slider。基于jQuery开发,除了可以导航图片之外,还支持其它任何内容。可以配置导航滚动速度和图片标题说明。
prettyGallery
(26)jQuery.popeye
jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。
jQuery.popeye
(27)s3Slider
s3Slider 是一个jQuery slideshow插件,效果类似于smooth slideshow。
可以在图片上的任意位置,透明显示当前所放映图片的说明信息。
s3Slider
(28)Pirobox
采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。
Pirobox
(29)Simple Controls Gallery
这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。
Simple Controls Gallery
(30)Agile Carousel
Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示,添加文本水印等功能。
Agile Carousel
(31)jQuery Plugin-Page Peel
这是一个用于创建Page Peel(卷页/页面剥落)特效的jQuery插件。
jQuery Plugin-Page Peel
(32)Easy Slider
一个jQuery插件,当点击导航按纽时可以水平或垂直播放图片或其它任何内容。
Easy Slider
(33)imgPreview
图片预览jQuery插件。当鼠标移到图片链接上时,会在链接的旁边出现一个类似于tooltip效果的图片展示框。
imgPreview
(34)Jquery Fade In.Fade Out
这是一个用于让图片产生淡入淡出效果的jQuery插件。
Jquery Fade In.Fade Out
(35)Captify
这个jQuery插件能够在图片上显示标题信息,当鼠标放到图片上时滑动出现。
Captify
(36)jParallax
这是一个用于生成视差现象的jQuery插件。mParallax能够产生的效果与jParallax一样但采用Mootools框架开发。
jParallax
(37)jQuery---运用图片预加载技术打造幻灯片
截图:
一些演示:
http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo2.html
http://www.cssrain.cn/demo/jQueryImgLoad/Demo2/demo3.html
http://www.cssrain.cn/demo/jQueryImgLoad/Demo3/demo4.html
http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo1.html (以前做的,非预加载)
下载:
http://www.cssrain.cn/demo/jQueryImgLoad/jQueryImgLoad.rar
(38)jQuery pageSlide
jQuery pageSlide 是一个jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就弹出来。再次点击隐藏页面以外的空间,它就又关闭。
这适合在有限的空间里,在主页里放重要内容,而隐藏页放一些并不一定要显示,而是有需要的用户才去展开显示的内容。
(39)Creating a Slick Auto-Playing Featured Content Slider
Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ,实现我们常说的”图片焦点特效”。多用于门户站。
(40)Portfolio Layout Idea Using jQuery
非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。
它在页面两边显示带缩略的作品列表,当你点击每个条目时,会在中间部分以退场然后进场的特效呈现出该作品的全部内容。
(41)jQuery---图片先模糊后清楚
http://www.hotbook.cn/
很多图片网站用了这种技术,Google图片中心也不例外。
这种技术的图片是先显示模糊的,然后再显示清楚的。
这个模糊的原理就是 一张小图片,然后把尺寸放大,大小等于大图片的宽度和高度。
小图片被拉大了,理所当然就模糊了。
试想:小图片的尺寸是10kb,大图片的大小是500kb,那么加载小图片的速度就是大图片的50倍。
当然你会说,如果直接显示大图片是什么情况呢?答案是:一片空白等着你。
演示:
http://www.cssrain.cn/demo/loadImages/loadimages.html
(42)使用jQuery实现网页报纸
演示:
http://www.cssrain.cn/demo/jquerynewspager/demo.html
原理:使用报纸内容作为 背景图,相对定位。
然后里面的div设置为绝对定位,大小,left和top都要跟背景图匹配。
所以这个有一定的规律。
下载:
http://www.cssrain.cn/demo/jquerynewspager/jquerynewspager.rar
引申:
当后台人员问,每次要传坐标,宽度和高度不麻烦么?用户知道使用么?
教用户使用photoshop?。。。!!!
解决方案:
使用图片截图的插件即可,一般的截图插件都能获取4个坐标,宽度和高度,
当然我们只需要这些,并不需要把图片真正截取下来。
(43)jQuery购物网站产品展示.
作者:cssrain@gmail.com(admin)
程序介绍:
1,点击大图可以弹出遮罩效果.
2,下方小图可以左右滚动.
3,点击新窗口打开,可以打开当前的大图片.
4,遮罩层中小图也可以左右滚动,也可以打开大图片.
在 IE6,IE7,Firefox3 & google 浏览器下测试通过.
演示:
http://www.cssrain.cn/demo/jqueryProduct/demos.html
下载:
http://www.cssrain.cn/demo/jqueryProduct/jqueryProduct.rar
(44)Gallerific
Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果,包括缩略图、图片标题和描述等详细功能,是一个非常不错的高质量画廊相册展示工具。
(45)ZoomImage
zoomimage ,以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图,并且可以可以随意拖拽该悬浮图片。
(46)EasySlider
Easy Slider 可以实现图片或其他任意内容,在水平或垂直方向上的滑动效果,你还可以通过 CSS 自定义设置样式。
(47)The Slider from Barack Obama’s website
一个源自美国总统 Barack Obama 网站的垂下滑动菜单控制的图片幻灯效果。
(48)CodaSlider
CodaSlider,又一个不错的滑动控制效果。
(49)jQuery Slider II
jQuery Slider II 的布局非常符合操作习惯,在底部列出带滚动条的缩略图控制列表,然后在上面显示对应图片的大图浏览,非常适合做高级相册。
(50)Beautiful Slider 热点图书:www.hotbook.cn
Beautiful Slider, 光看这个效果图你就知道这个插件有多棒了吧,是的,这个插件实现的效果已经不逊色于Flash完成的效果,整体表现流畅,文字显示效果更是创意独特。
(51)LoopedSlider
loopedSlider是又一个任意内容滚动切换的幻灯片插件,使用操作简单。
(52)SpaceGallery
SpaceGallery是一个全新的jQuery插件,点击当前图片,会自动放大消失,同时后面的图片向前展示,有一种时光机器的感觉。
(53)jQuery Popeye
(54)Noobslide 热点图书:www.hotbook.cn
(55)Accessible News Slider 热点图书:www.hotbook.cn
(56)SmoothGallery 热点图书:www.hotbook.cn
SmoothGallery是一个最好的 Javascript 幻灯片效果之一,可以实现各种不同的幻灯片转换效果。
(57)jQuery Multimedia Portfolio
jQuery Multimedia Portfolio是一个基于jQuery 的滑动效果插件,除了可以展示图片之外,还可以加入各种不同类型的多媒体文件。
(58)s3Slider
s3Slider是一个非常简单实用的流畅幻灯片效果,这个插件被应用在无数的WordPress专业主题模板中。
via: 15 jQuery image carousels for slideshows and galleries
热点图书:www.hotbook.cn
(59)fxMarquee
fxMarquee 是一个jQuery内容滚动插件。它可以让一组内容定向滚动,并可以设置滚动速度。本插件具有以下特点:
可以上、下、左、右四个方向滚动。可设置鼠标移上时停止滚动。
支持自定义的加速按钮。
介绍
演示
参数说明
教程
下载
兼容性
反馈
(60)商品放大镜效果
在一些大型的购物网站 你经常可以看到这个效果,通过放大镜效果,可以把一个小的图片的某一部位放大到清晰可见。
1.原理
首先你必须要有2张图片,一张缩略图和一张高清晰的图片。
然后当鼠标在缩略图里移动时,通过计算鼠标在缩略图里的位置和比例。
最后通过比例就可以得出大图要显示的部分。
所以最简洁的HTML代码结构如下:
2.小图中的半透明层
当鼠标滑入小图片时,我们需要添加一个半透明层用来显示当前鼠标框住的区域。
有3种状态:
(1)鼠标滑入
(2)鼠标滑动
(3)鼠标滑出
滑入时,我们需要给半透明层定位,并马上显示出层。通过给元素绑定mousemove事件。
滑动时,需要给透明层实时定位,在计算定位时,要注意半透明层不超出图片边界。
同时在mousemove时,添加了一个setTimeout,减少资源占用。
滑出后,隐藏半透明层,并把mousemove解除绑定,减少资源占用.
这一步最关键的就是,滑动时中心点和坐标的计算。
演示:http://www.cssrain.cn/demo/fangdajing/demo_01.html
3.显示放大的图
第2步完成后,第3步就相对简单了。
在刚才3种状态上,在添加点内容。
鼠标滑入时,需要添加大图的显示。
鼠标滑动时,需要根据鼠标当前的位置在小图中的比例,然后把比例*大图的宽度高度 得到大图显示的位置。
鼠标滑出后,需要隐藏大图。
这一步最关键的就是,滑动时比例的计算。
演示:http://www.cssrain.cn/demo/fangdajing/demo_02.html
4.发散思维
此效果不仅是显示商品,地图鹰眼效果也可以使用.
下载:http://www.cssrain.cn/demo/fangdajing/fangdajing.rar
(61)PageSlide
使用时,在当前页面中设定一个链接,该链接的href属性指向另一个页面A,并为该链接绑定pageSlide事件。点击链接时,触发PageSlide 事件,在页面中创建一个新的区域(左侧或右侧,依据传入参数而定),然后通过jQuery ajax将页面A中内容读取到该区域中。
PageSlide用法很简单,简单说一下:
引用jquery库文件及pageslide插件文件
在页面中添加事件触发链接,链接地址是要打开页面的地址,如:
<a href="_left.html" id="slide-left">从右边打开隐藏空间</a>
为链接绑定pageSlide事件,并传入设定参数:
//第一个参数是页面新区域的宽度
//第二个参数是当前页面移动方向,方向为left,也就是从右侧出现新区域
$("#slide-left").pageSlide({ width: "350px", direction: "left" });
下载PageSlide插件: 点击下载
本地下载:pagelider.rar (3.68 kb)
62.
63.
64.不错的图片分类展示或者文字展示效果
(65)jQuery Infinite Carousel
66.T血展示效果
How to Make a Threadless Style T-Shirt Gallery
67.利用z-index做的图片展示效果
Create a gallery by using z-index and jQuery
4.自动填充类
(1)AutoComplete-JQuery
jQuery插件易于集成到现在的表单中(Form)。
(2)Facebook like Autocomplete
基于jQuery开发,类似于FaceBoox提供的AutoCompleter。
(3)jQuery Autocomplete Mod
jQuery Autcomplete插件。能够限制下拉菜单显示的结果数。
(4)jqac
基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。
(5)jQuery Tag Suggestion
类似于del.icio.us提供的tag suggesting功能。
(6)Autocomplete-jQuery ajax
利用 jQuery(Ajax),PHP和MySQL开发的AutoCompleter。
(7)jQuery.Suggest
跨浏览器支持,基于jQuery开发的Autocomplete library。
(8)Autocomplete- jQuery plugin
一个jQuery Autocompleter,提供缓存选项来限制对服务器的请求。
(9)jQuery plugin: Autocomplete
自动完成输入框值让用户能够快速查找和过滤某些值。
(10)jSuggest
模仿Google Suggest功能的AutoComplete jQuery插件。
(11)jQuery Live Ajax Search Plug-in
采用jQuery开发的AutoComplete控件。搜索结果展示框完全可以利用CSS自定义,内容展示是一个HTML页面。
(12)ddcombobox
带AutoComplete功能的下拉选择框jQuery插件。
(13)Kissy Suggest
重写后的组件压缩后约 10k, 仅依赖 YUI2 的 yahoo-dom-event. 目前在淘宝已全面应用一个多月。现在开源出来,希望能对需要此功能的兄弟们有所帮助。源码地址:
http://kissy.googlecode.com/svn/trunk/src/suggest/
suggest-yui2.js 是源码,test.html 是测试页面,demo.html 是实例,demo-google.html 是利用该组件给谷歌恢复搜索提示的小玩意。如果在项目中真实使用,需要加载以下两个文件:
http://kissy.googlecode.com/svn/trunk/lib/yui2/yahoo-dom-event.js
http://kissy.googlecode.com/svn/trunk/build/suggest/suggest-yui2-min.js
可以很自信地说:这个组件目前无论在细节还是性能上,都是数一数二的。
欢迎试用和有效的建议。
PS:很感慨 Google 的产品,精致小巧,非常注意细节。Google 英文首页的搜索提示,看似简单,但极不简单。对键盘和鼠标等事件的细节处理上,没有看到比 Google 做得更好的。Kissy Suggest 在交互细节上基本上做到了和 Google 的一样,同时增加了对本土输入法的支持
(14)apple风格的自动填充效果
5.分页类
(1)jQuery Pagination
jQuery分页插件
jQuery Pagination
(2)pager jQuery plug-in
jQuery分页插件。
pager jQuery plug-in
(3)JQuery Pager
一个利用jQuery开发的分页UI控件,可用于数据驱动的web应用程序中。
JQuery Pager
6.编辑器类
(1)jwysiwyg
WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。
jwysiwyg
(2)Damn Small Rich Text Editor
基于jQuery开发,能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能,可设置文本编辑区大小,Ajax上传图片等。
Damn Small Rich Text Editor
(3)xhEditor
xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。
编辑器组件采用LGPL协议开放源代码,您可以任意修改,并使用在您商业或者非商业系统中。同样,您也可以任意的学习和参考我们的源代码。若您对本编辑器代码进行改动或者再开发并对外发布的话,请您也使用LGPL协议来开放您的源代码,谢谢。
最新0.9.5版程序下载:http://code.google.com/p/xheditor/downloads/list
演示程序:
默认模式:http://static.pirate9.com/js/xheditor_demos/demo1.html
自定义按钮:http://static.pirate9.com/js/xheditor_demos/demo2.html
皮肤选择:http://static.pirate9.com/js/xheditor_demos/demo3.html
其它选项:http://static.pirate9.com/js/xheditor_demos/demo4.html
Javascript交互:http://static.pirate9.com/js/xheditor_demos/demo5.html
非utf-8编码网页调用:http://static.pirate9.com/js/xheditor_demos/demo6.html
UBB可视化编辑:http://static.pirate9.com/js/xheditor_demos/demo7.html
Ajax图片上传:http://static.pirate9.com/js/xheditor_demos/demo8.html
7.表格类
(1)Flexigrid
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
Flexigrid
(2)Ingrid
这个jQuery DataGrid提供的功能有:可以拖动调整列宽,分页,排序,设置行/列样式等。
Ingrid
(3)jQuery Grid
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等。
Demo
jQuery Grid
(4)tableHover
tableHover一个jQuery插件当鼠标经过时,能够对表格的一整列或行进行着色加亮。支持colspans与rowspans的表格。
tableHover
(5)JQuery.Resizer
一个轻量级jQuery插件用于创建可以拖动调整行高与列宽的表格。
JQuery.Resizer
(6)tablesorter
tablesorter 这个jQuery插件能够将带THEAD与TBODY标签的标准HTMLTable转换成一个可排序的表格。tablesorter能够排序多种数据类型包括Text、URIs、integers、currency、floats、IP地址、日期、时间和自定义的数据类型。支持拥有复杂表头表格的排序,支持二级隐藏排序,支持多种浏览器:IE6.0+、FF2+、Safari2.0+、Opera9.0+。
tablesorter
(7)csv2table
csv2table这个插件能够将CVS文件(利用Excel创建)的内容转换成HTML Table。
jQuery表格排序插件,点击表格中对应列的头部单元,表格立即重新排序。
Tablesorter | Demo
csv2table
(8)tableFormSynch
tableFormSynch 是一个表格与表单数据相互更新的jQuery插件。它提供的功能包括:基于表单中的数据,新增行。删除所选择行,并清除表单中的所有数据。 tableFormSynch支持所有表单控件包括:checkboxes、radio、buttons 与<select>。
tableFormSynch
8.色彩选择器类
(1) Farbtastic
Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。
Farbtastic
(2)jQuery Color Picker
一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。
jQuery Color Picker
(3)iColorPicker
iColorPicker是一个只有6KB大小的jQuery Color Picker。只要将输入框的class属性设置为“iColorPicker”就能变一个漂亮的颜色选择器。
iColorPicker
9.数据验证类
1. jQuery plugin: Validation
jQuery校验插件。
jQuery plugin: Validation
2. Masked Input Plugin
Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)。
Masked Input Plugin
jQuery password strength meter
用于检测密码强度的jQuery插件。
jQuery password strength meter
3 jVal
jQuery表单校验插件。
jVal
4. jQuery formValidator 感谢博览群书 友情提供
http://www.kmroom.com/js/formValidator3.3/index.html
10.报表类
1.
2. Flot
Flot一个纯javascript绘画库,基于jQuery开发。它能够在客户端根据任何数据集快速生成图片。目前只能绘制线状图和柱状。
Flot
3. jQchart
基于Canvas+jQuery,可拖放/交互的简单图形控件。
jQchart
4 jquery.sparkline
这是一个用于生成迷你型线状图的jQuery插件。
jquery.sparkline
5. jQuery Google Charts (演示地址)
jQuery Google Charts是一个封装Google API charts的jQuery插件,提供了更加简易的使用方法。
6. jqPlot (演示地址)
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图。jqPlot支持为图表设置各种不同的样式。提供Tooltips,数据点高亮显示等功能。
11.上传类
1. jqUploader
结合Javascript与Flash开发,拥有上传进度条的文件上传控件。
jqUploader
2. jQuery Multiple File Upload Plugin
多文件上传插件(jQuery.MultiFile)能够让用户一次性选择多个要上传的文件。此外该插件还提供一些基本的校验功能比如:文件扩展名校验。
jQuery Multiple File Upload Plugin
3. jQuery: Ajax file upload
Ajax文件上传插件让用户能够很方便地上传多个文件而无需刷新页面。此外,可以使用任何元素(图片,文字,按纽等)来触发文件选择窗口。
jQuery: Ajax file upload
12.日期时间类
1. jQuery UI Datepicker
基于jQuery开发的日期选择控件。
jQuery UI Datepicker
2. Date Picker
Date Picker一个采用jQuery开发的日期选择控件。支持同时显示多个月份日历,标记特殊日期,易于通过CSS定制外观,自定义周的第一天,自定义月份和星期的显示名称。
Date Picker
3. Date Range Picker
基于jQuery UI1.6与jQuery UI CSS框架开发的日期选择控件。
Date Range Picker
13.圆角效果类
1. jQuery Corner
不需要图片就能够创建各种圆角形状的jQuery插件。
jQuery Corner
2. JQuery Curvy Corners
用于创建圆角的jQuery插件。压缩之后大小只有9k。
JQuery Curvy Corners
3. jQuery Corner
更多圆角效果的jQuery插件。
jQuery Corner
4. jQuery Corners
这是一个用于创建漂亮圆角效果的jQuery插件。不需要用到图片或其它特殊的标签。
jQuery Corners
14.评价类
(1)Creating a Dynamic Poll with jQuery and PHP
(2)Reddit-style Voting With PHP, MySQL And jQuery
一个不错的ajax投票效果
(3) jQuery Ajax Rater Plugin
能够动态创建Ajax Rater的jQuery插件。
jQuery Ajax Rater Plugin
4. Star Rating widget
采用jQuery框架开发的评价控件。
Star Rating widget
5. jQuery Star Rating Plugin
Star Rating Plugin是一个基于一组radio input boxes实现的星形评价控件。
jQuery Star Rating Plugin
6. Ajax Poll
利用jQuery的Ajax和动画效果并给合PHP开发的投票系统。
Ajax Poll
7.jQuery 投票调查组件
主要功能:
测试答题框
可作心理测试等测试题使用
问题和选项通过questions.xml设置
显示当前得分
显示当前答题进度
可作翻看选过的选项
通过不同的得分调取不同结果内容
DEMO 地址 静态版本
DEMO 地址 XML 版本
文件打包下载
下面是装载XML 版本的代码 完整的代码请 打包下载
15.虚拟键盘类
1.
在进行一些高安全性 Web 设计时,为了用户输入表单信息的安全,往往不希望用户直接通过实体鼠标进行操作,而是提供额外的 Web 虚拟鼠标来帮助用户完全某些隐私表单内容的输入,所以,就用到了本文提及的3个 JavaScript 安全虚拟键盘插件。
自定义 jQuery 虚拟小键盘插件 plugin
jQuery 小键盘 是一个用于创建安全表单输入的插件工具,提供友好的键盘界面接口。使得可以仅允许用户输入数字、字母等限制性操作。
2.jQuery 虚拟键盘
一个创建 jQuery 虚拟键盘 的学习向导,教你一步一步地创建自己的jQuery 虚拟键盘,而且必须得 JavaScript 脚本可以免费下载。安全性高的 Web 虚拟键盘在金融类网站的和要求高安全性的表单操作中应用非常广泛。所以,学会如何编写一个优秀的Web 安全虚拟键盘非常有用。
3.Virtual keyboard 虚拟键盘
虚拟键盘被广泛应用在极高级别的网站开发中,包括在线银行类网站应用等。Virtual keyboards 能帮助我们防止键盘操作记录,阻止用户进行某些特殊按键的限制操作, virtual keyboard 使用简单,支持多种语言。
16.Form元件扩展
(1)jQuery.combobox
jQuery.combobox是一个采用jQuery开发的combobox控件,可以使用CSS控制该combobox的外观,可以设置各种不同风格的下拉动画效果。
jQuery.combobox
(2)jquery button:对按钮的扩展
开发项目时,经常需要自已开发一些UI组件,在这里共享一个刚开发的Button控件,这个Button使用很简单,只要加入相关的CSS和JS文件,这样页面中的所有input按扭都将会被自动渲染为漂亮的个性化按扭,不需要写一句代码。
button.rar (72.00 kb)
(3)ContextMenu
用于创建右键弹出菜单的jQuery插件。
ContextMenu
(4)
(5)在链接旁边加一个小图标效果
Add a favicon near external links with jQuery
6 jNice
创建自定义外观的Form元素,功能与正常的Form元素相似。
jNice
7. jQuery calculate
jQuery计算插件,提供一些常用的数学计算功能比如:Sum、Average、Min、Max等。
jQuery calculate
8. jQuery select box
模仿HTML select box实现功能的一个下拉菜单。
jQuery select box
9. prettyCheckboxes
一个简单的jQuery插件用于定制checkboxe和radio按纽的外观。
prettyCheckboxes
10. jGrow
jGrow这个jQuery插件能够让textarea根据文本的长度自动调整它的大小。
jGrow
11. jQuery Form Plugin
为表单(Form)提供全面Ajax支持,包括文件上传功能的jQuery插件。提供的方法/功能包括:ajaxForm、ajaxSubmit、 formToArray、formSerialize、fieldSerialize、fieldValue、clearForm、 clearFields、resetForm。这些方法能够让你轻松地管理Form中的数据和Form无刷新提交。
jQuery Form Plugin
12. mcDropdown jQuery Plug-in
mcDropdown是一个独特的UI控件,它能够让用户在一个复杂分级的树形下拉选项中进行选择。
mcDropdown jQuery Plug-in
13. Create A Slider From A Select Box
这是一个漂亮的jQuery插件能够自动将select boxes转换成一个sliders控件。
Create A Slider From A Select Box
14. TextArea Resizer
这个jQuery插件提供Resizer bar可拖动调整TextArea大小。
TextArea Resizer
15. jQuery MultiSelect
jQuery MultiSelect是一个可配置的jQuery插件。它将普通的列表框表单控件转换成带有CheckBox的下拉列表控件。
jQuery MultiSelect
16. Editable(jQuery Editable Plugin)
这是一个真正可定制的jQuery editableplugin。当前它能够将任意不可编辑的标签(span、div、p...等)转换成可编辑的textinput、password、 textarea、下拉列表(drop-downlist)等标签。你可以利用它的editableFactory对象来扩展添加自己所需的input type。
Editable(jQuery Editable Plugin)
17. NicejForm
NiceJForm 是一个拥有完美外形的表单,它是基于jquery库的,NiceJForms实际上是个jquery插件,用来使表单看起来更为美观。这不是最终版本,我知道可以通过多种途径改良它的脚本,但是至少,这是一个可以使用的稳定版本。非常感谢Lucian Slatineanu发布的NiceJForm,在他的blog中你可以获得更多信息。
在IE6,IE7,Firefox2.0中测试成功。
NicejForm
18. jScrollPane
jScrollPane这个jQuery插件可以让你通过简单的CSS设置就能够替换所有分块元素在浏览器中默认的垂直滚动条样式。
jScrollPane
19.利用jQuery制作类似skype的按钮效果.
演示:
http://www.cssrain.cn/demo/skypebuttons/SkypeButton.html
http://www.cssrain.cn/demo/skypebuttons/SkypeButton2.html
20.jCheckbox:
效果图:
简介:
jCheckbox用于模拟checkbox的效果, 方便开发人员自定义外观, 由于所有的属性都绑定到目标checkbox, 所以不必担心状态保存或取值的问题...
导航:
详细介绍 | 在线演示
(21)jQuery asmSelect 感谢博览群书 友情提供
http://www.ryancramer.com/projects/asmselect/examples/example1.html
17.游戏类
1.连连看
不需要flash,使用JQuery的平移效果,自己完成的动画效果(使用的google首页的图片)
托管到Google上了。地址:http://code.google.com/p/jsgame-llk
svn下载地址:https://jsgame-llk.googlecode.com/svn/trunk
google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
18.代码高亮类
1. beautyOfCode (演示地址)
beautyOfCode这个jQuery插件能够对html页面中各种源代码的语法进行着色显示。封装自Syntaxhighlighter并添加对xhtml兼容支持。
2. Chili (演示地址)
Chili是一个jQuery源代码语法着色/高亮插件。具有以下特性:
着色非常快,易于使用,完全可定制,文档丰富。
支持显示行号。
在Internet Explorer、Firefox、Opera和Safari等浏览器上显示同样的效果。
默认支持的源代码类型包括:C 、C#、CSS、Delphi、Java、JavaScript、LotusScript、MySQL、PHP和XHTML。
完全支持正则表达式,包括反向引用。
3. Highlight plugin (演示地址)
jQuery “Highlight” plugin是一个能对任意页面标签,当被选中时添加高亮提示的jQuery插件。主要用于提示表单填写。
其它类:
jquery-aop
为 JavaScript增加面向方面编程特性的jQuery插件。它能给任何函数添加Advices(Before、与Around)。
jquery-aop
xmlObjectifier
基于jQuery开发,能够把XML DOM转换成 JSON的JavaScript library。
xmlObjectifier
JQuery Portlets
这个jQuery插件提供一些Portlets功能包括:drag/drop,expand,collapse等。
JQuery Portlets
EasyDrag jQuery Plugin
这个jQuery Plugin能够为大部DOM元素添加拖放功能。
EasyDrag jQuery Plugin
Drag and Drop:
效果图:
简介:
dragndrop为开发人员实现dom拖拽提供了更简单的方法, 并可以监视对象dom的位置以便进行数据(position)存储...
导航:
详细介绍 | 在线演示
Resizable:
效果图:
简介:
resizable插件使html dom resize更易于实现(这句话真别扭)...
导航:
详细介绍 | 在线演示
jFeed
jFeed是一个基于jQuery开发的RSS/ATOM Feed解析器。 jFeed能够解析RSS0.91、0.92、1.0、2.0和Atom1.0 Feeds。
jFeed
jQuery.UI ProgressBar Widget
采用jQuery开发的进度条控件。
jQuery.UI ProgressBar Widget
JQuery Progress Bar
基于jQuery开发的进度条控件。在其网站上提供一个可以显示文件上传进度的例子,服务器端采用PHP处理。
JQuery Progress Bar
jQuery Form Plugin
jTemplates
基于jQuery开发的javascript模板引擎。
jTemplates
Animated Collapsible DIV
为任何DIV层添加Web2.0风格的动画隐藏/显示效果。
Animated Collapsible DIV
Simple Effects Plugins
jQuery特效插件,可以实现收缩,隐藏,显示,淡入/淡出和上下滑动效果等.
Simple Effects Plugins
jQuery.Hotkeys plugin
这个jQuery插件能够帮助你快速创建键盘触发事件。支持任意组合键。
jQuery.Hotkeys plugin
jMP3
jMP3是一个采用jQuery开发的JavaScript MP3插放器,提供一种可以在页面上直接播放MP3的简便方式。
jMP3
Pure
Pure是一个基于jQuery开发,能够动态生成HTML的JavaScript模板引擎。支持JSON数据。
Pure
Chain.js
Chain.js是一个提供数据绑定功能的jQuery插件。用于自动生成Web内容,有利于数据与表现相分离。
Chain.js
ppDrag
ppDrag是一个让页面元素拥有拖移(Drag&Drop)效果的jQuery插件。
ppDrag
jqDnR
jqDnR一个轻量级jQuery插件能够让你拖拽任何元素、调整元素大小。
jqDnR
Scroll Follow
Scroll Follow是一个简单的jQuery插件。当滚动页面时,能够让DOM对象产生浮动跟随效果。
Scroll Follow
jQuery Taconite Plugin
这个jQuery插件能够利用单个Ajax调用结果同时更新多个DOM对象。
jQuery Taconite Plugin
jQuery URL Parser
用于解析URLs字符串的jQuery插件。方便你获取协议,主机,端口,查询参数,文件名,路径等。
jQuery URL Parser
jQuery.xml2json
jQuery.xml2json是一个能够将简单的XML转换成JSON对象的jQuery插件。
jQuery.xml2json
Ajaxify
Ajaxify这个jQuery插件能够将一个页面中的所有链接转换成Ajax加载和提交请求。
Ajaxify
jQuery Address - Deep linking plugin。
从 CssRain.cn 作者:cssrain@gmail.com(admin)
类似于瞄点技术( url#address ),使得浏览器的后退按钮生效。在Ajax应用中,可以使用。
演示:
http://www.asual.com/jquery/address/samples/tabs/
http://www.asual.com/jquery/address/samples/api/
下载:
http://www.asual.com/jquery/address/
quickSearch
quickSearch,顾名思义是一个jQuery驱动的快速搜索插件,Ajax显示搜索结果。
quickSearch | Demo
- Jquery特效大全.zip (5.4 MB)
- 下载次数: 386
相关推荐
**jQuery特效大全:掌握网页互动新境界** jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的使用,特别是对于网页上的交互效果和动画设计。这个“jQuery特效大全”集合了各种各样的jQuery实现的特效,...
《jQuery特效大全整理打包》是针对前端开发人员的一份宝贵资源,它涵盖了广泛且实用的jQuery特效,旨在提升网页交互性和用户体验。这份压缩包包含了导航栏、侧边栏、弹出层等多种常见网页元素的动画效果,使得网页...
《jQuery特效大全——揭示网页交互的新境界》 jQuery,这个小巧而强大的JavaScript库,自2006年诞生以来,就以其简洁的API和丰富的功能深受开发者喜爱。它极大地简化了DOM操作,动画效果,以及事件处理,为网页...
《jQuery特效大全》 在网页开发中,jQuery库以其简洁的API和强大的功能深受开发者喜爱。这个资源包,"jQuery特效大全",包含了多个使用jQuery实现的特效示例,可以帮助我们深入理解和掌握jQuery的用法。 1. **...
【jQuery特效圣诞雪花】 在网页设计中,动态效果可以增加用户体验,使页面更加生动有趣。"jQuery特效圣诞雪花"就是一个典型的例子,它利用jQuery库来实现一种节日氛围的动画效果,让网页背景飘落雪花,营造出冬日...
"web前端jquery特效巨集合"这一资源集合,为学习者提供了一个全面的jQuery特效实践平台,包括101个精心设计的jQuery特效以及《锋利的jQuery》电子书和源码,旨在帮助开发者快速提升jQuery应用能力。 首先,jQuery的...
《jQuery特效与实例集合——深度探索JavaScript魅力》 在当今的Web开发领域,jQuery以其简洁易用的API和强大的功能,成为了JavaScript库的首选。这个名为"jQuery特效和实例集合"的压缩包,包含了50多个精心设计的...
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
本资源包包含了28个实用的jQuery特效,可以帮助开发者快速实现各种交互功能,提升用户体验,使得网页更加生动有趣。 1. **日历插件**:jQuery提供了许多日历插件,如jQuery UI的Datepicker,可以方便地添加日期选择...
本资源包含100个常用的jQuery特效和插件,旨在帮助开发者提升网页的用户体验和视觉效果。 1. **选择器与遍历**: jQuery提供了强大的选择器,如ID选择器(#id),类选择器(.class)和元素选择器(element),以及组合...
《jQuery特效深度解析》 jQuery,作为一款广泛应用于前端开发的JavaScript库,以其简洁的API和强大的功能赢得了开发者们的喜爱。在网页动态效果的实现上,jQuery特效扮演着至关重要的角色,极大地提高了开发效率,...
这个“超酷炫jQuery特效”集合包含了一系列由国外编程达人精心设计和实现的特效,旨在为网页增添互动性和视觉吸引力。** **一、jQuery基础** 1. **选择器**: jQuery的选择器是其核心功能之一,它允许开发者轻松地...
《jQuery特效实例大全展示》是针对前端开发人员的一份宝贵资源,它集合了众多实用且创新的jQuery特效,旨在提升网页交互体验,增加用户界面的吸引力。jQuery作为一个强大的JavaScript库,简化了DOM操作,动画效果的...