高手网

在网络发展领域，由于 jQuery 简单易学，易于使用和易于扩展的特点，因此正慢慢变得无处不在。以下是从一些 jQuery 相关文章中整理出来的 30+ 新鲜与惊奇的 jQuery 插件与教程。如果你正在寻找最新的 jQuery 信息，这些内容值得一读。

教程

1. How to add preloader with loading image in a gallery using jQuery
在图像画廊载入过程中使用 jQuery 预加载技术。演示 | 教程

2. Simple Lava Lamp Menu Tutorial With jQuery
创建一个独特的熔岩灯动画效果的 jQuery 导航菜单。演示 | 教程

3. How To Create a 3D Tag Cloud in jQuery
使用 jQuery 创建类似 Flash 形式的 3D 标签云。演示 | 教程

4. Drag & Drop With jQuery
Web 应用程序的拖放功能提供了丰富的用户界面，了解如何使用 jQuery 来创建此种用户界面。演示 | 教程

5. Awesome Horizontal Animated menu using Kwicks for jQuery
使用 jQuery Kwicks 插件建立一个可定制的，灵活的横向动画菜单。演示 | 教程

6. Create a Thumbnail Gallery With Slick Heading & Caption effect
使用光标题和字幕效果创建缩略图画廊。演示 | 教程

7. Create an Attractive jQuery Menu with fade in and out effects
创建一个有吸引力的 jQuery 菜单，鼠标悬停时具有淡入背景效果。演示 | 教程

8. jQuery PHP AJAX Autosuggest
Autosuggest 是目前的 Web 应用程序中一个有用的功能。了解如何使用 jQuery 和 PHP 来创建。演示 | 教程

9. Perfect Login Drop Down Box Like Twitter
使用 jQuery 模仿 Twitter 新的下拉框效果。演示 | 教程

10. Crafting an Animated Postcard With jQuery
仅使用 jQuery 创建一个类 Flash 的明信片。演示 | 教程

11. Twitter like Search With jQuery & AJAX
使用 Ajax 在同一页创建类似 Twitter 的搜索框加载结果。演示 | 教程

12. Voting System With jQuery, AJAX, PHP
学习如何创建类似 dzone 的投票系统。演示 | 教程

13. AJAXed Sliding Shopping Cart Using jQuery
创造一个 Ajax 滑动门效果的购物篮，当更新购物车项目时滑动，并在一段时间后自动隐藏。同时还支持手动显示隐藏选项，以便在任何时候查看购物车。演示 | 教程

14. How To Build Animated Header in jQuery
利用 jQuery 技术为网页标题添加令人轻叹的动画背景效果。演示 | 教程

15. Hide and Seek With jQuery
使用 jQuery 在单一页面上，显示基于事件行为的应用程序的多个模块。演示 | 教程

16. jQuery Comment Preview
通过使用 jQuery 为用户提供实时评论预览功能。演示 | 教程

17. Styling Drop Down Boxes With jQuery
由于选择框很难使用 CSS 来定义样式，本教程将告诉你如何使用文本框和无须列表代替选取框，然后根据需要定义样式。演示 | 教程

18. Scrolling Dynamic Content Box
使用 Ajax 将内容加载至滚动 DIV。就像谷歌阅读器中当你向下滚动时，会自动加载更多项目。演示 | 教程

19. Ways To Debug your jQuery or JavaScript Code
本文介绍了如何使用 jQuery 控制台登录来轻松地调试 JavaScript 代码。教程

20. 5 Ways To Make AJAX Calls with jQuery
关于使用 jQuery 技术以不同方式创建 Ajax 请求。甚至对那些已深度熟悉 jQuery 并且用大量方法创建 Ajax 请求的开发者也很有帮助。演示 | 教程

插件

1. Tipsy
呈现 Facebook 风格的工具提示插件，基于定位标记的标题属性。演示 | 插件主页

2. jQuery YouTube PlayList
将 YouTube 链接列表转换为播放列表，让用户能够在网页本身浏览视频。演示 | 插件主页

3. SuperFish Menus
Superfish 菜单是一款易于使用的 jQuery 插件，可以将无须 HTML 列表转换成漂亮的下拉菜单。插件主页

4. Elastic
Elastic 是一款轻量级的 jQuery 插件，可使 textareas 根据内容大小自动调整尺寸。演示 | 插件主页

5. OverScroll
在网页上实施类似 iphone 的拖放滚动效果。插件主页

6. Tweetable
使用 Tweetable 轻松快捷地在网页上显示 Twitter Feed 源，可选择将 Twitter 用户名和 URL 地址转换为超级链接。演示 | 插件主页

7. jQuery Link nudge
使用 jQuery Link Nudge 插件创建移动菜单栏，效果很漂亮。演示 | 插件主页

8. TimePickr
如果需要将用户系统时间作为表单输入，使用此插件可以提供丰富的用户界面，以便输入时间。插件主页

9. Truncatable
Truncatable 允许你在网页中隐藏文本块，并在需要时显示。演示 | 插件主页

10. Incremental Search For Select Boxes
此插件将普通的选择框转换成带有增量搜索的组合框，如果选择框有很多选项，这会非常有用。演示 | 插件主页

11. Anything Slider
Anything Slider 是一款功能齐全的滑动门插件，易于定制并适应你的网站。演示 | 插件主页

英文原稿：30+ Fresh & Amazing jQuery Plugins & Tutorials | Web Developer Plus
翻译整理：30+ 新鲜惊奇的 jQuery 插件与教程 | 芒果

jQuery JavaScript Library simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. On this collection we roundups 10 really cool, usable and accessible jQuery JavaScript and Ajax plugins that you can implement easily to your design or websites. You can also go to the official jQuery Plugin page for more inspiration.
Slick and Accessible Slideshow Using jQuery

SixRevisions presented you a cool easily accessible jQuery plugin for creating a usable and web accessible slideshow widget using HTML, CSS, and jQuery JavaScript. [Live Demo]
slick accessible slideshow 10 Cool Accessible jQuery and Ajax Plugins
Animating Page Peel Effect with jQuery & CSS

You can use this page peel jQuery plugin to peel a corner of website and see a message underneath. It’s useful to create extra area for your RSS feed or banner advertising. [Live Demo]
Page Peel Effect jQuery
jQuery Image Rotator with Description

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. [Live Demo]
Query Image Rotator with Description
jQuery Tabbed Content Rotator

This Tabbed content rotator was used jQuery and its interface library jQuery UI JavaScript. When your mouse move over to the tab and it will change the content accordingly. This effect is good at to present your portfolios on your homepage to customers with your products and services. [Live Demo]
jQuery Tabbed Content Rotator
APE – Ajax Push Engine

Ajax Push Engine (APE) is an OpenSource technology allowing to exchange data between thousands of users through a web browser, without reloading and without external plugins. It is designed to push real-time data in a lightweight, highly scalable and modular way, only using Javascript for the client side. With the use of those Web Stardards, APE is fully crossbrowser and uses all the latest browser features and provides backward compatibility for older ones. [Live Demo]
APE Ajax Push Engine
Flash Full Text Search Component

This is a fully customizable Flash Full Text Search Component, built with support for multiple images and texts. Everything is customizable in the XML files, including the images, the texts, the colors, the sizes and much more. This search component contains a handful of features and settings like customize search playlist through the XML file; add unlimited images/texts; customizable colors from the XML file; size of images customizable from the XML file and auto scrolling. It is easy to use the search in your Flash projects or as an independent Flash Search Component on your html based website. [Live Demo]
flash full text search component 10 Cool Accessible jQuery and Ajax Plugins
jQuery Fancy Zoom Plugin

Fancy Zoom is providing a smooth, clean, truly Mac-like ancy zoom effect, the images are resized if size is bigger than document screen and can be applied directly on an image, no more link wrapper needed.
jQuery Plugin Fancy Zoom
BySlideMenu Mootools Accordion Menu

BySlideMenu is a Mootools accordion menu which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want like ul/li, div or p using images and/or text. The feature of this Mootools menu plugin including works horizontally or vertically; the container width/height can be adjusted automatically; the menu is expandable by mouseover or by click and can be pinned or not by mouseover or click upon you choose.
BySlideMenu Mootools Accordion Menu
jQuery Polaroid Photo Viewer

Polaroid Photo Viewer with CSS3 and jQuery allows you to drag and rotate the polaroid images around. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random). [Live Demo]
jQuery Polaroid Photo Viewer
Agile Carousel jQuery Plugin

Agile Carousel allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more. [Live Demo]
Agile Carousel jQuery Plugin

拉洋片

在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。

AnythingSlider： 由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。

Easy Slider： 这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。

Coda-Slider 2.0： Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。

图片库

那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。

Galleria： 这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。

jQuery Panel Gallery： 一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。

slideViewer： slideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。

Supersized： 一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口。

导航

我们相信，作为网站的导航系统，应该越简单，越易用越好，然而，假如你确实希望实现一些更炫的效果，jQuery 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。

jquery mb.menu

Horizontal Scroll Menu with jQuery

AutoSprites

表单和表格

在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery 插件帮你完成这些任务。

Password Strength： 这个插件帮你评估用户输入的密码是否足够强壮。

Ajax Fancy Capcha： 顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。

Chromatable： 这个插件可以帮助你在表格上实现滚动条。

jqTransform： 一个式样插件，帮助你对表单中的控件进行式样控制。

Uploadify： 实现多个文件同时上传。

jExpand ： 一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。

在国内，“前端开发”这个名词逐步被熟知，“前端开发”这个职位越来越被企业重视，表明国内的Web前端开发正在慢慢走向成熟，更好地学习提高自身的前端开发技术能力是必须的，整理8个国内优秀的前端开发设计网站给大家，也希望能看到你推荐的中文前端开发网站和社区。

1, 蓝色理想

诞生于1999年10月的蓝色理想，以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容，是国内最大的设计类站点之一。

2, W3School

W3School是最完善的在线教程站，包括 XHTML教程、XML教程JavaScript & AJAX、网站构建等前端开发人员必备的系统性学习教材。

3, 前端观察

前端观察是一个纯粹的前端技术分享网站，本站的目的是为前端技术人员提供所需的资讯及资源，挖掘国内优秀的原创设计及内容，加以高度的整理。

4, CSS88

CSS88专注前端开发，关注用户体验，是一个资深的Web前端开发站，不仅传播前端技术，更重要的是关注前端设计从业者的生存状态，有多个开放的前端交流群。

5, CssRain

CssRain实用的前端技术信息，原创和搜集前端开发中细节的内容，一本jQuery新书推荐<<锋利的jQuery>>你值得拥有。

6, 我爱CSS

我爱CSS，致力于Web标准在中国的应用和发展，提供CSS和XHTML学习教程。

7, iJavaScript

iJavaScript致力于JavaScript信息的共享，提供JavaScript基础教程、AJAX技术及JavaScript框架的学习和应用。

8, OKAJAX

OKAJAX是以ajax技术为主，涉及网站建设、网络编程、网页设计、网页特效、服务器技术、资源下载等的综合性网站。

转自：http://www.bbon.cn/2009/11/8-excellence-front-end-development-and-design-chinese-sites.html