1000个jquery插件

jQuery Simple Tree是一个可拖放的树形控件。支持通过Ajax动态加载树节点，具有简单易于使用和漂亮的外观等特点。

9. jQuery plugin: Treeview (演示地址)

这个插件能够把无序列表转换成可展开与收缩的Tree。

14. jQuery Menu

jQuery Menu是一个极好的菜单系统，可用于创建简单的下拉菜单，iPod-like菜单和Flyout风格的导航菜。

15. NotesForMenu (演示地址)

NotesForMenu是一个非常简单的jQuery插件用于创建多层级树形菜单，只需一行代码就能够实现。

18. Advanced docking using jQuery (演示地址)

类似于MS的VS侧边可停靠工具栏。

注：不支持IE6

20. Contactable (演示地址)

Contactable这个jQuery插件可以帮助你在页面边框处创建一个可伸缩的反馈表单。

21.FastFind Menu Script

可拖动的嵌套菜单窗体，基于动态"AJAX"响应。

FastFind Menu Script

22 jQuery UI Tabs

jQuery UI Tabs：一个功能强大，易于使用的Tab控件。

jQuery UI Tabs

23jstree

jsTree是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。

jstree
热点图书：www.hotbook.cn

24jQuery File Tree

jQuery File Tree是一个可配置的Ajax文件浏览器jQuery插件。可以通过CSS定制外观，指定文件树展开图标，可以自己定义展开／收缩事件、速度，配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。

jQuery File Tree
热点图书：www.hotbook.cn

25Superfish

jQuery菜单插件。支持水平/垂直方向。弹出子菜单不会被<SELECT>标签挡住。

Superfish

26.accordion menu

Accordion风格的jQuery菜单。

accordion menu

27.CSS Dock Menu

采用jQuery+CSS实现，仿Mac Dock Menu的一个导航菜单。

CSS Dock Menu
热点图书：www.hotbook.cn

28.CheckTree

带Checkbox的树型jQuery插件。

CheckTree

29.idTabs

idTabs是一个能够创建简单到复杂Tab控件的jQuery插件。支持动态添加和选择Tab，idTabs能够绑定到不同的事件如mouseover。

idTabs 热点图书：www.hotbook.cn

30. jQuery Context Menu

jQuery Context Menu是一个右键菜单插件。通过非常少的设置就能够轻松实现右键菜单功能。

jQuery Context Menu 热点图书：www.hotbook.cn

31. jQuery Right-click

这个插件能够让你使用jQuery来捕获由鼠标右键触发的事件。这些事件包括：click、mouseup、mousedown。

jQuery Right-click

热点图书：www.hotbook.cn

32.jQuery Multi Level CSS Menu

这是一个多级水平CSS菜单，利用规则嵌套的HTML列表标签创建。当子菜单靠近窗体右边缘时，将自动调整展示方面。

jQuery Multi Level CSS Menu

33.ListNav 热点图书：www.hotbook.cn

ListNav是一个用于创建按字母顺序分类导航的jQuery插件。

ListNav

34.Simpletip

Simpletip是一个基于jQuery开发的Tooltips控件。Tooltips可以附在任意元素（标签）之上。并定制展示方式与位置。tooltips可以是静态，动态或通过Ajax加载。

Simpletip
热点图书：www.hotbook.cn

35. Smooth Navigation Menu

Smooth Navigation Menu是一个采用jQuery开发，基于CSS的多层级网站导航菜单。菜单项的内容既可以直接从当前页面中获取，也可以从一个外面文件或通过Ajax获取。

Smooth Navigation Menu

36. jdMenu

jdMenu是用于创建水平/垂直分层下拉菜单的jQuery插件.支持通过Ajax加载菜单项，自定义动画效果，易于定制外观，支持相对(relative)与绝对(absolute) 定位等。

jdMenu

37.jqDock 热点图书：www.hotbook.cn

这是一个能够将一组图片转换成类似于Mac风格鱼眼菜单(Dock Menu)的jQuery插件。菜单可以是水平方向或垂直方向。

jqDock

38 Animated Menu using jQuery

A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download.

39. Garagedoor Effect using jQuery

Gaya Kessler presents a wonder JavaScript menu that mimics the real garage door using jQuery.

40.JGlide Menu

A very unique menu that floats on the page. Users can drag it to a position they desire.

41. Vertical Sliding jQuery Menu

HVDesigns presents a menu that drops down and reveals more links.

42.LavaLamp

When you hover an item, you’ll see the CSS sliding door technique created using jQuery. An alternate version for MooTols can be here.

View Demo Page 热点图书：www.hotbook.cn

43. Sliding JavaScript Menu Highlight

This sliding hover effect script is an easy technique for highlighting menu items.

44. Fading Menu - Replacing Content

This technique allows you to fade in and fade out menu items.

45. Simple Multi-level Drop-Down Menu

A simple JavaScript drop down menu tutorial.

46. Using jQuery for Background Image Animations

A technique for creating animated menus using jQuery and CSS background-position properties.

View Demo Page 热点图书：www.hotbook.cn

47Tabpanel - jerichotab

效果图:

简介:
jerichoTab是一款模拟 firefox 标签页的插件, 通过丰富的API可以轻松的实现动态添加, 删除, 激活tab, 当tab页过多时会在左右两段增加滚动条...
导航:
详细介绍 | 在线演示热点图书：www.hotbook.cn

via: 15 jQuery image carousels for slideshows and galleries

48jDiv: jQuery 导航 Tab

一个可以显示丰富内容的下拉导航菜单（演示要翻墙）。

49. 基于 CSS3 和 jQuery 的半透明导航系统

鼠标在导航菜单上移动，显示半透明的指示图标。CSS3 做这个实在太容易了。

50导航滑块

这种风格的导航已经见于很多站点，鼠标在导航菜单上移动的时候，一个高亮指示条随着鼠标滑动，指示当前的导航位置。

51. 流感导航菜单

下面的导航菜单，当鼠标在上面移动的时候，会很流畅地垂下解释菜单，当你将鼠标在上面快速左右移动的时候，会怀疑这是 Flash。

52. jQuery 选项卡界面 / 选项卡结构菜单教程
这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟，你一定会喜欢上它的。
演示 | 下载 | 介绍

53. jQuery目录导航插件
这个jQuery插件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法。一个在列表之上的简易的(via CSS)导航条，向用户展示从A到Z的检索。通过从列表中选择一个字母来显示以此字母开头的所有元素。在可选字母上面显示的计数，是表明当你点击此字母的时候会有多少项目被现实。除此之外还有其他的基本功能可供选择。
演示 | 下载 | 介绍

54. jQuery的Kwicks菜单
Kwicks起源于Mootools中的一个效果(相同名字),逐渐演变成一个高度可定制的通用部件.
演示 | 下载 | 介绍

55. jQuery褪色菜单 -更换内容
CSS-tricks上很好的教程，讲解如何使用css和jQuery, 这次是他们教导如何使用 jquery使得菜单选项褪色。
演示 | 下载 | 介绍

56. jQuery idTabs
idTabs是jQuery的插件。他能非常容易的为网站添加选项卡. 但是他也为无穷的可能性敞开大门。
演示 | 下载 | 介绍

57. jQuery + CSS创建顺畅的选显卡内容区
网页设计师设法把大量的信息浓缩在一个网页上而不失可用性是最大的挑战之一。内容选项卡化是处理此类问题非常棒的方法，最近广泛被应用于博客。这是一篇非常棒的教程讲解，使用HTML建立一个小的选项卡信息盒，最后使用一些简单js功能与jQuery库实现。
演示 | 下载 | 介绍

58. jQuery1.4 轻松搞定Tab选项卡
这个跟我目前博客用到的TAB选项卡原理差不多，只不过是基于最新版jQuery的，代码更简洁了，几乎必要的一行就能搞定，当然这是提供了一个思路，对初学者应该是有很大帮助的。
演示

2.消息提示类

（1）Facebox

热点图书：www.hotbook.cn
Facebox 是一个基于jQuery，Facebook-style的lightbox。能够展示示images，divs或者整个远程页面。

Facebox

（2）SimpleModal

SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。

SimpleModal

（3）jTip 热点图书：www.hotbook.cn

jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。

jTip

（4）BetterTip

一个可以自定义Tooltip的jQuery插件。基于jTip，但比它来得更加灵活。

BetterTip

热点图书：www.hotbook.cn
（5）clueTip

clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时，它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取，也可以从当前页面中的元素中获取。

clueTip

（6）jQuery lightBox plugin 热点图书：www.hotbook.cn

一个简单，强大基于jQuery开发的lightBox控件。

jQuery lightBox plugin

（7）jQuery Impromptu

用于创建模式对话框，确认对话框，输入内容对话框的jQuery插件。

jQuery Impromptu 热点图书：www.hotbook.cn

（8） jQuery.UI Messenger"Outlook like message notification Widget

这个jQuery.UI控件类似于Messenger"Outlook消息弹出提醒框。

jQuery.UI Messenger"Outlook like message notification Widget

（9）FancyBox 热点图书：www.hotbook.cn

基于jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该Lightbox除了能够展示图片之外，还可以展示iframed内容，通过CSS自定义外观。

FancyBox

（10）Coda Popup Bubbles 热点图书：www.hotbook.cn

采用jQuery开发，类似“冒泡”效果的提醒弹出框。

Coda Popup Bubbles

（11）jGrowl 热点图书：www.hotbook.cn

jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac　OSX系统中Growl事件通知框架。

j Grow l

（12）jqWindowsEngine

这个jQuery插件能够帮助你轻松创建Ajax Windows。

jqWindowsEngine

（13）jQuery Alert Dialogs

这个jQuery插件能够替换JavaScript提供的alert()、confirm()和prompt()功能。支持利用CSS自定义对话框外观。

jQuery Alert Dialogs 热点图书：www.hotbook.cn

（14）BeautyTips

BeautyTips是一个jQuery Tooltip插件.

BeautyTips
热点图书：www.hotbook.cn

（15）Facebook/Xiaonei 风格模态框

效果图:

简介:
使用 div, table 和 opacity 效果实现模态框效果...
导航:
详细介绍 | 在线演示热点图书：www.hotbook.cn

(15)jmpopups
可弹出多级新窗口
在线实例

实例源代码

(16) LeaveNotice

LeaveNotice这个jQuery插件能够很方便提醒你的用户，他们正在离开你的网站。

(17)JQuery Float Dialog 热点图书：www.hotbook.cn

JQuery Float Dialog是一个浮动模式对话框，可通过参数控制对话框弹出速度、全屏背景、弹出回调事件、弹出的方向等。

(18)weebox

weebox是一个基于jquery的弹窗插件。它含有以下特性：

.支持多层弹窗

.支持单一弹窗，即同ID弹窗在打开第二次使用时，前一个将被自动关闭，参考boxid选项

.支持自定义样式，参考boxclass选项

.解决IE中SELECT的问题，使用了bgiframe功能

.支持拖动效果，通过draggable设置，参考draggable选项

.支持内容来源方式Ajax, Selector(jQuery的), Text(直接内容)

.支持多种弹窗类型,参考type选项

.支持自动关闭,参考timeout选项

.支持遮照效果(modal弹窗)，参考modal选项

.支持不同的显示位置，中间或者以某个元素为参照物，参考position选项

.支持弹窗打开前(onopen)、点确认(onok)、点取消(oncancel)、关闭窗口(onclose)等的回调函数

.支持打开后，重新设置标题(setTitle)、内容(setContent)、按钮等方法

.支持只在弹窗内查找元素的方法:find(selector)

.支持打开和关闭时的动画效果，参考animate、showAnimate,hideAnimate选项

19.DHTML window with tab support (演示地址) 热点图书：www.hotbook.cn

带有Tab支持的DHTML Window控件。它使用cookies来

(20)qTip
(21)Simple tooltip
(22)Side Navigation Tooltip (演示地址)
利用jQuery为侧面导航菜单添加Tooltips气泡提示说明。
(23)jquery-rollover-tooltip (演示地址)

利用jQuery实现当鼠标移过图标上方时会出现一个气泡(tooltip)，气泡中的内容读取自html tags属性。

1. Dynamic tooltip

Very cool tooltip! It’s very well made because it consists of cool transition effects and it also has a transparency and a drop shadow effect.

2. Popup Bubble

Brilliant tooltip! It looks so simple but it has awesome transition effects. This tooltip could be very useful for clean and simple websites.

3. jQuery Horizontal Tooltips Menu Tutorials

Beautifully made tooltip! This tooltip never disappears but follows when you hover over other links. Such a simple looking tooltip but its animation is brilliant.

4. Prototip

A lot of various very good looking tooltips which look awesome and have beautiful effects. Brilliant peace of work!

6. Awesomeness

Cool tooltip with nice transition effect and cool transparent border around it.

7. TipTip

Beautifully made tooltip with fade in / out transition effects, transparency and drop shadow effect.

8. (mb)Tooltip

Beautifully made tooltip with nice transition for input fields.

9. vTip

Simple but well made tooltip with a fade in transition effect. It has a cool looking border around it and when this tooltip appears, it also follows your mouse.

10. jGrowl

Cool tooltip which appears when you click on the link and then it sticks on the right-top corner of your window, and disappears after some time or when you close it manually by clicking on the close button. It also has fade in / out transition effects.

11. jQuery Ajax Tooltip

Interesting tooltip which can handle image and text together like a mini page. It has a drop shadow effect.

12. Digg-style post sharing tool with jQuery

Cool digg-style post sharing tool. This tooltip could be very useful for social networking website.

13. Input Floating Hint Box

Interesting tooltip with rounded corners for input fields. Tooltip fades in when you click on the input field and fades out when you click somewhere else.

14. Simpletip

Beautifully made tooltip with fade transitions. When you hover over a link, a tooltip fades in just above or below the link.

15. qTip

Very simple but good looking tooltip. This tooltip is available with rounded corners and also as a speech bubble tip.

16. Orbital Tooltip

Interesting tooltip plugin where you can set manually where your tooltip will show up.

17. Inline HTML Tooltip

Cool tooltip with nice transition effects.

18. tipsy

Interesting good looking tooltip which appears above, below, on the right or left side of the link.

19. Easiest jQuery Tooltip Ever

Simple tooltip but it could be useful to display an image when you hover over a link.

20. BsTip

Various simple tooltips with fade in and fade out transition effects and border around them.

21. EZPZ Tooltip

Very simple tooltip with border around it, which follows your mouse.

22. BeautyTips

Nice balloon style tooltip with transparency effect. There are available various tooltip styles, even interesting tooltips with cool animation, so you can choose one that fits best for your needs.

23. Tooltip

Various tooltip plugins for your website. Here you can find a simple tooltip with a nice fade transition and also you can find a good looking bubble style tooltip.

25. Creating A Simple Tooltip Using jQuery and CSS

Few simple but different tooltips.

26. BetterTip

Tooltip which appears on the right side of the link.

28. jqTooltip

Simple tooltip with ajax loaded content. It has fade in and fade out transition effects.

29. Pop!

Simple tooltip which shows up when you click on the arrow button and disappears when you click somewhere else.

30. Create a Simple CSS + Javascript Tooltip with jQuery

Simple tooltip with rounded corners. It follows your mouse movements.

3.图片文字展示类

(1)imgAreaSelect

imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。

imgAreaSelect

(2)Easy Slide

EasySlide 是以jQuery为基础开发的一个图库展示插件，EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示，并加上鼠标指向时的暂停效果(Pause)，可以当作图库展示或是动画及广告Banner使用。

Easy Slide

热点图书：www.hotbook.cn

(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

热点图书：www.hotbook.cn

(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
热点图书：www.hotbook.cn

(10)Zoomimage

该jQuery插件能够让以当前流行的方式来展示图片。提供：预加载图片提示，对图片进行分组，自动调整图片显示比例，图片分组浏览控制。

Zoomimage

热点图书：www.hotbook.cn

(11)prettyPhoto

prettyPhoto是jQuery lightbox的一个“克隆”。并增加动画效果，图库浏览等特性。

prettyPhoto

热点图书：www.hotbook.cn

(12)ThickBox

ThickBox是一个模式对话框UI控件。基于jQuery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax获取的内容。

ThickBox
热点图书：www.hotbook.cn

(13)Galleria

Galleria 是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件，因此可以在图片加载时执行一些动作。

Galleria
热点图书：www.hotbook.cn

(14)jQuery Flash Plugin

一个jQuery插件用于在页面中嵌入Flash影片。

jQuery Flash Plugin
热点图书：www.hotbook.cn

(15)jQuery.SerialScroll

jQuery.SerialScroll是一个用于创建滚动效果的jQuery插件，支持水平／垂直方向滚动和混合滚动效果。

jQuery.SerialScroll
热点图书：www.hotbook.cn

(16)InnerFade

InnerFade这个jQuery插件能够让任意一组元素（img，div等）实现淡入淡出播放效果。

InnerFade

(17)NyroModal

一个基于jQuery开发，非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容，改变对话框大小等。

NyroModal
热点图书：www.hotbook.cn

(18)CrossSlide

CrossSlide这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如：动态地移动、缩放、渐变、滑入"滑出等。

CrossSlide
热点图书：www.hotbook.cn

(19)Magnify

Magnify是一个能够在图片上添加放大镜功能的jQuery插件。

Magnify

热点图书：www.hotbook.cn

(20)Img Notes

用于当鼠标移到图片是时，显示一个信息提示框。

Img Notes

(21)FancyZoom

FancyZoom采用缩放效果来展示图片或任意HTML页面，不需要另外开启页面来载入图片，其效果在Apple Mac的官方网站中也有。

FancyZoom 热点图书：www.hotbook.cn

(22)Jcrop

Jcrop 是一个跨浏览器的jQuery图片剪切插件（jQuery image crop plugin）。支持对剪切框加CSS样式，当选取或拖动时添加回调事件（Callbacks），剪切时能够约束宽度与高度。

Jcrop

(23)Galleriffic

Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。

Galleriffic 热点图书：www.hotbook.cn

(24)Image Upload and Auto Crop

采用PHP+jQuery开发的图片上传和剪切（Crop）工具。

Image Upload and Auto Crop 热点图书：www.hotbook.cn

(25)prettyGallery

prettyGallery是一个图库导航控件Slider。基于jQuery开发，除了可以导航图片之外，还支持其它任何内容。可以配置导航滚动速度和图片标题说明。

prettyGallery

(26)jQuery.popeye

jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。

jQuery.popeye 热点图书：www.hotbook.cn

(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 热点图书：www.hotbook.cn

一个jQuery插件，当点击导航按纽时可以水平或垂直播放图片或其它任何内容。

Easy Slider

(33)imgPreview

图片预览jQuery插件。当鼠标移到图片链接上时，会在链接的旁边出现一个类似于tooltip效果的图片展示框。

imgPreview

(34)Jquery Fade In.Fade Out

这是一个用于让图片产生淡入淡出效果的jQuery插件。

Jquery Fade In.Fade Out

(35)Captify 热点图书：www.hotbook.cn

这个jQuery插件能够在图片上显示标题信息，当鼠标放到图片上时滑动出现。

Captify

(36)jParallax 热点图书：www.hotbook.cn

这是一个用于生成视差现象的jQuery插件。mParallax能够产生的效果与jParallax一样但采用Mootools框架开发。

jParallax

(37)jQuery---运用图片预加载技术打造幻灯片

截图：

一些演示：热点图书：www.hotbook.cn
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

11种控制内容展示的JavaScript特效

jQuery pageSlide 是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是看不到的，你设置一个控制的地方，点击该控制时触发事件，隐藏的页面就弹出来。再次点击隐藏页面以外的空间，它就又关闭。

这适合在有限的空间里，在主页里放重要内容，而隐藏页放一些并不一定要显示，而是有需要的用户才去展开显示的内容。

(39)Creating a Slick Auto-Playing Featured Content Slider

11种控制内容展示的JavaScript特效

Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件，实现我们常说的”图片焦点特效”。多用于门户站。

(40)Portfolio Layout Idea Using jQuery

11种控制内容展示的JavaScript特效

非常漂亮的一个特效布局。由 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购物网站产品展示. 热点图书：www.hotbook.cn

作者： 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 热点图书：www.hotbook.cn

zoomimage ，以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图，并且可以可以随意拖拽该悬浮图片。

(46)EasySlider

Easy Slider 可以实现图片或其他任意内容，在水平或垂直方向上的滑动效果，你还可以通过 CSS 自定义设置样式。热点图书：www.hotbook.cn

(47)The Slider from Barack Obama’s website

一个源自美国总统 Barack Obama 网站的垂下滑动菜单控制的图片幻灯效果。

(48)CodaSlider

CodaSlider，又一个不错的滑动控制效果。热点图书：www.hotbook.cn

(49)jQuery Slider II

jQuery Slider II 的布局非常符合操作习惯，在底部列出带滚动条的缩略图控制列表，然后在上面显示对应图片的大图浏览，非常适合做高级相册。

(50)Beautiful Slider 热点图书：www.hotbook.cn

Beautiful Slider，光看这个效果图你就知道这个插件有多棒了吧，是的，这个插件实现的效果已经不逊色于Flash完成的效果，整体表现流畅，文字显示效果更是创意独特。

(51)LoopedSlider 热点图书：www.hotbook.cn

loopedSlider是又一个任意内容滚动切换的幻灯片插件，使用操作简单。

(52)SpaceGallery

SpaceGallery是一个全新的jQuery插件，点击当前图片，会自动放大消失，同时后面的图片向前展示，有一种时光机器的感觉。

(53)jQuery Popeye 热点图书：www.hotbook.cn

(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专业主题模板中。

热点图书：www.hotbook.cn

(59)fxMarquee

fxMarquee 是一个jQuery内容滚动插件。它可以让一组内容定向滚动，并可以设置滚动速度。本插件具有以下特点：

可以上、下、左、右四个方向滚动。可设置鼠标移上时停止滚动。
支持自定义的加速按钮。

(60)商品放大镜效果热点图书：www.hotbook.cn

在一些大型的购物网站你经常可以看到这个效果，通过放大镜效果，可以把一个小的图片的某一部位放大到清晰可见。

1.原理

首先你必须要有2张图片，一张缩略图和一张高清晰的图片。
然后当鼠标在缩略图里移动时，通过计算鼠标在缩略图里的位置和比例。
最后通过比例就可以得出大图要显示的部分。

所以最简洁的HTML代码结构如下：

2.小图中的半透明层热点图书：www.hotbook.cn

当鼠标滑入小图片时，我们需要添加一个半透明层用来显示当前鼠标框住的区域。
有3种状态：
(1)鼠标滑入
(2)鼠标滑动
(3)鼠标滑出
滑入时，我们需要给半透明层定位，并马上显示出层。通过给元素绑定mousemove事件。
滑动时，需要给透明层实时定位，在计算定位时，要注意半透明层不超出图片边界。
同时在mousemove时，添加了一个setTimeout，减少资源占用。
滑出后，隐藏半透明层，并把mousemove解除绑定，减少资源占用.

这一步最关键的就是，滑动时中心点和坐标的计算。
演示：http://www.cssrain.cn/demo/fangdajing/demo_01.html

3.显示放大的图热点图书：www.hotbook.cn

第2步完成后，第3步就相对简单了。
在刚才3种状态上，在添加点内容。
鼠标滑入时，需要添加大图的显示。
鼠标滑动时，需要根据鼠标当前的位置在小图中的比例，然后把比例*大图的宽度高度得到大图显示的位置。
鼠标滑出后，需要隐藏大图。
这一步最关键的就是，滑动时比例的计算。
演示：http://www.cssrain.cn/demo/fangdajing/demo_02.html

4.发散思维热点图书：www.hotbook.cn

此效果不仅是显示商品，地图鹰眼效果也可以使用.

下载：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.不错的图片分类展示或者文字展示效果热点图书：www.hotbook.cn

（65） jQuery Infinite Carousel

Automatic 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

68.Page Peel Effect(卷页效果)jQuery 和 CSS

Soh Tanaka 在他网上发布了一个 “简单的卷页效果（Simple Page Peel Effect with jQuery & CSS.）” ，像这样的卷页效果或翻页效果，在一些门户网站或者是个人博客上经常能看得到
它实现的思路是有一个 “peel” 图片放在元素的右上方 ,当你徘徊在“Peel”时, “peels ”就会打开和 “peels” 就会关闭，卷页里可以放置广告或者是订阅信息。这个很炫的效果看起来要通过flash来实现，不过，使用jQuery 或 MooTools 技术就可以轻松实现。

Page Peel Effect
View Demo

69。Page Peel 热点图书：www.hotbook.cn
可以设置广告的高度、宽度、背景图和定位坐标等。和Pageear一样，使用Flash来显示果皮剥开的特效。
70.Create a 3D Tag Cloud in jQuery (演示地址)

一个用于创建会滚动的3D标签云jQuery插件。
71.Sliding Login Panel with jQuery

别的不说，先看效果图吧

这是展开以后的效果图

这是收缩以后的效果图

用jQuery实现这个功能也就几个函数就搞定了，来看看关键的代码吧。

1<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
2<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
3<script type="text/javascript" src="js/slide.js"></script>
首先要导入3个js文件，其中js/jquery-1.3.2.min.js是压缩以后的jQuery类库；
js/pngfix/supersleight-min.js是支持IE6的一个类库，是对图片进行处理的，它能消除那两个按钮图片的四周
（图片本来是长方形的，这里你看到的是圆角图片）。

然后就是下面的两个链接按钮了<a id="open">Log Id | Register</a>
和<a id="close">Close Panel</a>

1<div class="tab">
2        <ul class="login">
3            <li class="left"> </li>
4            <li>Hello Guest!</li>
5            <li class="sep">|</li>
6            <li id="toggle">
7                <a id="open" class="open" href="#">Log In | Register</a>
8                <a id="close" style="display: none;" class="close" href="#">Close Panel</a>
9            </li>
10            <li class="right"> </li>
11        </ul>
12    </div>
第三个js文件里面写的就是jQuery的函数，代码很简单：

1$(document).ready(function() {
2    // Expand Panel
3    $("#open").click(function(){
4        $("div#panel").slideDown("slow");//点击id为open的链接展开面板
5    });
6
7    // Collapse Panel
8    $("#close").click(function(){
9        $("div#panel").slideUp("slow");    //点击id为的close链接隐藏面板
10    });
11
12    // Switch buttons from "Log In | Register" to "Close Panel" on click
13    $("#toggle a").click(function () {
14        $("#toggle a").toggle();//这个就是具有slideUp()和slideDown()双重效果
15    });
16
17});

下载：

jquerylogin.rar (58.83 kb)

72.jquery隐藏登录效果

当你不需要把登陆框直接显示在首页又必须要有这个玩意儿的时候,一个漂亮的下拉动画登陆框能够帮你达到你想要的效果.

当你的用户想要登陆的时候,点击按钮,弹出填写账户密码,不需要时则隐藏,多么好的用户体验..

[预览效果] [下载源码] [制作过程]

73.inFrame: Keep Demos Inside the Page with jQuery

利用jQuery在同一个页面中演示多个Demo，实现不需要离开当前页面就能查看单独的Demo链接，不需要在head标签中添加Demo所需要的CSS文件，也不用担心javascript会与其它javascript相冲突。简单易用，只要指定每一个Demo链接的Class为inframe就可以。

(74)jQuery Superbox!

jQuery Superbox!是一个jQuery插件用于创建可定制的模式对话框（效果与lightbox相似）。它可以展示任意类型的内容包括iframes，默认为图片类型（支持单张或多张模式）。模式对话框的尺寸可以根据展示的内容自动调整，也可以定义一个标准展示尺寸。

(75)NyroModal