Learn how to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display.

2. Move Elements with Style

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.

3. Automatic Image Slider w/ CSS & jQuery

A simple image slider using HTML/CSS/Javascript. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.

4. jQuery Quicksand Plugin

With Quicksand you can reorder and filter items with a nice shuffling animation. At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:

• 1. Use plain HTML, like an unordered list.
• 2. Download data by an Ajax call
• 3. Transform HTML items by JavaScript (for example, sort them differently)

5. jQuery Magic Line Sliding Style Navigation

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities. As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

6. Text with Moving Backgrounds

The idea is to create a container which has a moving background, but only a set of letters will be visible of the background. It will be as if there are holes in your container.

Normally you would create a PNG file containing anti-aliased letters and place it inside some container on top of a background. Here what you need to do is place a full image over a background, covering parts that shouldn’t be seen. Just like a mask!

7. jDiv: A jQuery navigation menu alternative

A drop-down menu that displayed any content you need. Specifically a combination of images and lists, without being limited to only an unordered list. The advantages:

• More flexibility in design that your usual UL style;
• The use of the H4 tag and a UL for the hidden content adds some potential SEO but be sure that your header tag choice is in keeping with your copy’s layout;
• As long as your first-level nav item is linked to a page, you still retain accessibility with JS disabled.

8. Halftone Navigation Menu With jQuery & CSS3

A CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

9. Animate Panning Slideshow with jQuery

Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well. In this tutorial we’ll have a slideshow that transitions by changing the visible window.

10. SlideDeck

SlideDeck is a new way to display content on websites, mobile phones and kiosks. It delivers a better user experience by removing the information overload and providing a fun, quick and beautiful way to interact with digital devices.

下载链接

* jQuery Minified (23kb Gzipped)

* jQuery Regular (154kb)

当然，我们也可以直接使用来自Google服务器上托管的版本：http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js ，这使得您可以快速的加载jQuery文件。

关于此次版本更新的详细信息可参见jQuery官方文档。

Bobulate

A Way Back

LegiStyles

For a Beautiful Web

Black Estate

Cynosura

Mark Dearman

iA

Trent Walton

Area 17

Nosotros

Atebits

Square Space

Gap Medics

Fringe

Typographica

Book Cover Archive

Search Inside Video

Red Nose Day

Carsonified

Fajne Chlopaki

Devia

Mail Chimp

Miro

Squared Eye

Clear Left

White House

45 Royale

Work at Play

Wonderbra

Legwork studio

Surly

Project 365

72 Ave

Maxvoltar

We Heart

Jeff Finley

Elliot Jay Stocks

SimpleBits

Corking Design

Adii

Burciaga

Paravel

Jeremy Charles

Brite Revolution

Go Media

31 Three

AN idea

Mission Bicycle

Bueno

Gallery

Manifest

deStyle

Imprezz

Folio Elements

Compositio

Selecta

Irresistible

Glassical

Mainstream

FREEmium

Black Power

Vintage

拉洋片

在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，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 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。

本文来源：http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009

红叶、远山

琉璃塔

静宜园记

红叶近景

Today we are making a cool & simple login / registration system. It will give you the ability to easily create a member-only area on your site and provide an easy registration process.

It is going to be PHP driven and store all the registrations into a MySQL database.

To add the needed flair, we are using the amazing sliding jQuery panel, developed by Web-kreation.

Step 1 – MySQL

First we have to create the table that will hold all the registrations. This code is available in table.sql.

table.sql

Notice that we’ve defined the id as an integer with auto_increment – it is automatically assigned to every site member. Also, we’ve defined usr as an unique key – no two users with the same usernames are allowed.

We later use this in the registration to determine whether the username has been taken.

After you create the table, do not forget to fill in your database credentials in connect.php so you can run the demo on your own server.

Step 2 – XHTML

First, we have to incorporate Web-kreation’s form into our page.

demo.php

At several places in this code, there are some PHP operators that check whether $_SESSION['usr'] or $_SESSION['id'] are defined. This is true only if the page visitor is logged in the site, which allows us to show specific content to site members. We will cover it in detail in a moment.

After the form, we put the rest of the page.

Nothing special here. Lets continue with the PHP backend.

The login system

Step 3 – PHP

It is time to convert the form into a complete registration and login system. To achieve it, we will need more than the usual amount of PHP. I’ll divide the code into two parts.

If you plan to add more code, it would be a good idea to split it into several files which are included when needed. This aids the development of large projects and allows code reuse in different parts of a site.

But lets see how we’ve done it here.

demo.php

Here the tzRemember cookie acts as a control whether we should log-off users that have not marked the “remember me” checkbox. If the cookie is not present (due to browser restart) and the visitor has not checked the remember me option, we destroy the session.

The session itself is kept alive for two weeks (as set by session_set_cookie_params).

Lets see the second part of demo.php.

We store all the encountered errors in an $err array, which is later assigned to a $_SESSION variable. This allows it to be accessible after a browser redirect.

You may have noticed on some sites, that when you submit a form and later refresh the page, the data is sent all over again. This could become problematic as it could lead to a double registrations and unnecessary server load.

We use the header function to prevent this, by redirecting the browser to the same page. This starts a fresh view of the page, without the browser associating it with a form submit. The result is that, on page refresh, no data is sent.

But as we use $_SESSION to store all the encountered errors it is important that we unset these variables, once we show the errors to the user. Otherwise they will be shown on every page view (the highlighted lines on the XHTML part of the tutorial).

Also notice how we create an additional script (lines 60-70 of the second part of the PHP code) which shows the panel on page load, so that the messages are visible to the user.

Now lets take a look at the CSS.

The registration / login system

Step 4 – CSS

The sliding panel comes with its own style sheet. This means we are only left with creating the page styles.

demo.css

Step 5 – jQuery

The sliding panel comes with its own jQuery files.

demo.php

First we include the jQuery library from Google’s CDN. Later comes a special fix for IE6 PNG transparency issues and lastly the panel’s script is included.

At the bottom of the page is the $script variable – it shows the panel on page load if needed.

With this our cool login system is complete!

Conclusion

Today we learned how to use a fantastic form component and turn it into a functional log in / registration system.

You are free to built upon this code and modify it any way you see fit.

Graphs, charts and diagrams can be used to visually describe data. Visualizing data is very important, as it helps the reader to understand the data even better. And even though some people might prefer viewing data in a table, I think we are many who feel more comfortable in viewing data graphically. Fortunately for us, there are several ways you can implement data into a graph on a website.

Basically, you have two main options; You can use Flash, or you can use jQuery. What you prefer is entirely up to you, but I’d like to show you some of the possibilities within each technology.

Open Flash Chart

An example of a bar chart made with Open Flash Chart

Open Flash Chart is—as the name states—a Flash chart. If you run a WordPress blog, you might know it from the WordPress.com Stats Plugin. It is open source, and there are lots of customization options. You can make almost any kind of chart you can imagine, and it’s fairly easy to setup if you just follow the tutorials on the Open Flash Chart website. With the new Open Flash Chart 2, you can even use it with jQuery and save your graphs as images. To see examples, and to read the tutorials, visit the Open Flash Chart website.

Flot

An example of a Flot graph

Next up is Flot, a jQuery based method for implementing graphs. It is hosted at Google Code, and it works in all the major browsers (including IE6). It comes with a great bunch of examples, but the documentation could be better. The output of Flot will be a static image.

jQuery Visualize Plugin

An example of the jQuery Visualize Plugin.

This jQuery plugin helps you implement dynamic charts into your website without using Flash. Using the HTML5 canvas element it is possible to create great-looking charts without using even images. There’s a very thorough tutorial at the site that helps you set it all up. Also, it works in every major browser.

jQuery SVG

An example of a bar graph made using jQuery SVG

This is yet another jQuery plugin called jQuery SVG. It uses SVG, a language “for describing two-dimensional graphics in XML”. SVG is supported in most browsers. Actually, it is not only a graphing plugin. You can use it to create advanced graphics on your website such as text paths. Still, for graphs it is very usable.

Google Chart API

An example of a map chart made with Google Chart API

The last method is Google’s own Chart API. It is very simple, and all you get is static images. But the static images are cool. You can easily create world maps with selected countries colored in your choice of color. As with almost every Google project, the documentation is awesome. You’ll get some very fine looking graphs with little effort, and everything is customizable.

Conclusion

Now to the big question: Which method is the best? I don’t know. I guess it’s all about taste and what you need it for. But similar for the five mentioned methods is that you have some very great, free resources that easily lets you implement graphs into your website.

Draw2D Javascript Drawing Library

Draw2D is the graph component of the Open-jACOB web based workflow editor. The purpose of this experiment is to see if a Visio-type workflow editor tool could be developed in a web browser. It demonstrates that it can be done.

JavaScript Vector-Draw Library

How many times you wished if you could only draw an arrow on your web page? Or few lines here and there? Unfortunately, HTML offers nothing in this department, and using images takes bandwidth and slows down the loading of your pages

jsDraw2D : 2D Graphics Library for JavaScript

This is a pure JavaScript library to draw 2D graphics on web pages inside web browser without using SVG or VML. JavaScript developers, web developers and webmasters can take advantage of the library to add graphics drawing functionality to their web applications or websites using the library. The library is entirely written in JavaScript and does not need any plug-in or additional software to run/execute. The JavaScript source code of the library is open and free under a LGPL License.

CanvasGraph.js : Graphing in Javascript

Canvas Graph is a small simple javascript library that allows you to conveniently plot simple line, bar and pie charts using the new HTML Canvas Tag.

PlotKit – Javascript Chart Plotting

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

Raphael: javascript drawing library

Raphael is a very slick looking JavaScript library for drawing and animating vector graphics with JavaScript. The API is simple and well thought-out and it supports all major browsers, including Internet Explorer 6.

Drawing lines in Mozilla based browsers and the Internet Explorer

In this article, I want to explain and deduce the line drawing algorithm by Bresenham. Afterwards, I will show an optimized version which can be used to draw lines in Gecko based browsers like Mozilla or Firefox and Microsoft Internet Explorer. As you know, HTML itself is not able to describe lines. Therefore, there is no built-in features in the above-mentioned browsers for drawing lines. By implementing the Bresenham algorithm with JavaScript while applying some tricks, we will be able to draw

Flotr Javascript Plotting Library

Flotr is a javascript plotting library based on the Prototype Javascript Framework version 1.6.0.2 at the moment and inspired by Flot written by Ole Laursen.

DHTML, JavaScript Vector Graphics Library

This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses ovals, oblique lines, polylines and polygons for instance triangles, rectangles dynamically into a webpage. Usage of this Vector Graphics library should be easy even if you do not have JavaScript experience.

canviz JavaScript library

Canviz is a JavaScript library for drawing Graphviz graphs to a web browser canvas. More technically, Canviz is a JavaScript xdot renderer. It works in most modern browsers.

以下是40个轻量级的JavaScript脚本库。 供每位网页设计师和程序员作参考。

1. 表单

wForms

wForms 是一个开源的、 无入侵的(unobstrusive)^注*代码库，能够简化大部分与表单相关的常用JavaScript函数。 它能对表单的用户输入值进行验证，只需为表单元素添加一个特定的类即可使用。另外，wForms 还具有强大的表单同步（例如“全选/全不选”）和条件表单（如，当x被选择则显示y）功能。

Validanguage

Validanguage 是一个无入侵的 JavaScript表单验证框架。 它有一个继承逻辑，可以全局定义，也可以对每个表单或每个元素分别定义。 利用作者提供的两个API，以及诸如综合的AJAX支持(integrated AJAX support)、缓存和调用函数等特性，该框架可以提供强健的(robust)验证体验。两个API用以高级设置，分别是加在注释里的像HTML语言的 API和基于JavaScript对象的API。

LiveValidation

LiveValidation是一个轻量级的JavaScript脚本库，提供一系列验证函数。除了经典验证法，此库还具有实时验证(live validation)特性，能根据你键入的文字实时控制特定区域。 Ruby on Rails的开发者会发现LiveValidation异常好用，因为二者的命名规范和参数设置非常相似。虽然它是独立库，不过也有一个Prototype版^注*。

yav

一个功能强大、可扩展、使用灵活的表单验证代码库。yav可处理多种情况，从日期、email、整数之类的基本验证到掩码文本框和自定义正则表达式之类的高级应用，都得心应手。该库内建AJAX支持，并且可以轻易在每个对象层自定义错误显示信息。

qForms

处理表单的完全解决方案。为开发者提供诸如多样验证规则，阻止多次提交，锁定/禁用域等特性。

formreform

不用表格来实现多栏布局通常都很有挑战性。这个小巧的代码库能够把一个简单表单转换成一栏、两栏或四栏格式化布局的表单。利用formreform能自动让表单样式适应任何设计。

2. 动画

$fx()

$fx() 是一个用户为HTML元素添加动画效果的轻量级代码库。利用此库，你可以指定在一定时间内改变任何CSS属性。对于复杂动画，你可以合并效果，给各效果分组，让它们链式反应或者同时发生。你还可以为每一步动画设定不同的回调动作，进行更深入的自定义。

JSTweener

补间动画的JavaScript脚本库。它的API和著名的ActionScript补间动画引擎 Tweener 相似。你可以调用动画时间，定义形状变换方式和延迟。在几乎任何时间点（如onStart – 开始时, onComplete -完成时, onUpdate – 更新时），你都可以引发新动作。

Facebook Animation

用于创建基于CSS的自定义动画的强大代码库。利用一两行Facebook Animation，你就能改善用户界面。本代码库的语法遵循FBJS（在Facebook实用工具中使用的代码库），一旦学会，你也就具备了创建Facebook实用工具的能力！

FX

一个轻量级代码库，拥有和YUI类似的使用句法。FX可以为几乎所有CSS属性创建补间动画。支持颜色和滚动动画。你只需要设计任意对象，任意属性的起始值和结束值就够了。

3. 视觉化和图像特效

JS charts

JS charts 可以输出柱状图，饼图和曲线图。只需从一个XML文件或JavaScript数组里调用数据，它就能提供极佳的易用性。图表被输出为png图像文件。该库支持大部分流行的浏览器。

Canvas 3D JS Library (C3DL)

C3DL让编写3D应用更加容易。它提供一组算法、场景和3D对象类，对于想在浏览器里开发3D内容，但是对3D图像的深层算法不甚了了的程序员真是不小的福音。

Processing.js

这个JavaScript脚本库指向 Processing 语言 （一个用于图像、动画和交互编程的语言）。它有丰富的特性用于创建2D输出，提供形状/图像绘制方法、颜色处理、字体、对象、算法函数等等。

Rapha?l

一个极赞的代码库，简化在网页中使用矢量图形的工作。Rapha?l 利用SVG和VML来创建图像，并能为这些图像绑定动作处理器。该库功能强大，包括旋转、动画、缩放和绘制曲线、矩形、圆形等。

ImageFX

可以为图像添加特效，例如模糊、锐化、浮雕、变亮等等。ImageFX使用画布元素来创建效果。兼容所有主流浏览器（你可以在其页面看到兼容性列表）。此库简单易用，只需要在网页中插入.js文件然后用一行代码调用就够了。

Pixastic

Pixastic 使用HTML5的画布对象，此对象可以直接处理像素级数据。支持的效果包括减淡和去色、反相、翻转、亮度和对比度调节、色相和饱和度、浮雕、模糊等等等等。由于画布对象相对较新，各个浏览器对这一JavaScript脚本库的支持程度不尽相同。

Reflection.js

自动创建倒影效果的无侵入JavaScript脚本库。倒影的高度和透明度可以自定义。使用该库就像给图像添加一个“类”一样简单。在所有主流浏览器中都能正常工作，文件大小不过5 KB。

4. 数据库

Taffy DB

可以作为浏览器中的SQL数据库来使用的JavaScript，也可以看做是一个高级的“数组管理器”。在AJAX化的Web应用中，它可以工作在数据库层。你可以创建、读取、编辑和删除数据，也可以使用循环、归类以及各种高级查询方式。

ActiveRecord.js

此库支持Google Gears和Chrome，Aptana Jaxer，Adobe AIR ，以及任何支持W3C HTML5 SQL规范的平台（现在Webkit和iPhone也支持了）。它使在JavaScript利用数据库变得简单。使用ActiveRecord.js, 你能自动创建数据表、验证和同步数据等等。

5. 字符串和数学函数

Date.js

和日期打交道总是很容易把人搞昏掉。如此多的点、斜杠和格式。Datejs以令人耳目一新的方式提供或简单或复杂的日期函数。它可以处理如下格式的日期：“Next thursday”(下星期四), “+2 years”(两年后) 以及诸如2009.01.08, 12/6/2001的所有格式。

Sylvester

此JavaScript脚本库可以轻松处理矢量和矩阵。有了它你就不用被一串串循环和大量数组搅得头昏脑胀了。此库包含模数化矢量和任意维度的矩阵的类，从而可以计算无限直线的模数和3D空间里的平面。

Pretty Date

一个聪明的JavaScript解决方案，让过去一个月内的日期以更加漂亮和用户友好的方式显示。它能让日期以距离现在多久的方式显示，如“3天以前”，“昨天”。

XRegExp

正则表达式可以在JavaScript里通过RegExp对象加以利用。 XRegExp 能使正则表达式变得更加强大，它提供一些在将来的浏览器才会实现的特性（据 ECMAScript 4 – ES4 的开发愿景）。使用该库，RegExp对象可以被缓存和再利用，还能为已经存在的RegExp对象添加修改器等等。

JavaScript URL Library

一个用与方便处理URLs的JavaScript脚本库。如果需要，它可以控制到将URL内每一个部分当做字符串来处理。这一URL代码库刚出炉不久，但已能像刚才所提一样工作。

6. 字体

typeface.js

一个用以在网页上使用任意字体的代码库。与流行的解决方案（如sIFR 和 FLIR）不同，typeface.js 并不需要Flash，是100%的JavaScript应用。要使用任意字体，只需上传其字体文件到一个 基于网页的字体生成器，然后下载渲染过的JavaScript文件，把它添加到你的网页中即可。

Cufón

与typeface.js十分相似， Cufón 也是一个让你在网页中使用TrueType字体的代码库。同样，它也使用一个生成器来将字体文件转换成VML图像。只需在网页中插入generated .js文件，你即可像使用普通字体一样使用你指定的字体。

7. 调试与记录

Blackbird

在JavaScript开发过程中，经常会用到alert()函数来添加断点。Blackbird 提供一个风格化的控制台，用以记录、查看和过滤JavaScript中的消息，如此即可消除在每个alert()的停顿，并且更好地分析它们，从而加快开发进程。

NitobiBug

基于浏览器的，跨浏览器 JavaScript 对象记录和检测组件。通过在你的代码中插入规则（和JavaScript对象的用法类似），你可以轻易区别简单类型，如字符串、布尔值和数值，以及复杂元素，如错误信息和JavaScript对象。

Firebug Lite

Firebug，大概是世界上最好的JavaScript调试工具，可惜只能在Firefox中使用。要在所有浏览器中拥有一个类似工具，向你的网页添加这个Firebug Lite .js文件吧，面对你的是你所熟悉的功能和界面。

8. 其他

swfobject

swfobject 是最流行的，扩展性最好的插入Flash影片的方式。此库符合Web标准，生成可以通过验证的标记，能够自动检测用户的Flash播放器版本，如果版本不匹配，它还允许你向用户显示代替内容。你可以看一看“为什么应该使用swfobject”这篇文章，写得不错。

sorttable and dragtable

不管你喜不喜欢，表格仍然是展示数据的最佳方式。不过表格还可以更好用： sorttable 让表格数据可以排序，升序降序均可。你指向为添加class=”sortable” 属性。你还可以排除某些特定的栏，让他们不自动排序，以及指定升序或者降序哪一个为默认值。dragtable 使表格的行列变得可拖动。在网页中插入此库后，同样，给表格添加一个class=”dragtable”即可。如果需要两个功能都用，只需在网页中包含同时两个库，然后添加class=”sortable dragtable” 。

DD_roundies and DD_belatedPNG

DD_roundies 是一个极佳的不利用图片创建圆角的JavaScript解决方案。它处理的重点在IE，通过使用VML来解决问题。其他浏览器被忽略，因为他们支持CSS的 border-radius 属性。

DD_belatedPNG为臭名昭著的IE6 PNG问题提供了一个可自定义的解决办法。不论PNG图像是用于“src”或是“background-image”中， DD_belatedPNG 都能把它解决掉。与其他解决方案不同， “background-position” 和 “background-repeat” 属性也能正常工作！

Custom JavaScript Dialog Boxes

用于创建自定义对话框的轻量级（约 4.5 KB）代码库。四种对话框可用： alerts(出错), warnings(警告), prompts(提示), success(成功)。利用一个简单的函数，你可以自定义对话框的标题，内容和显示时间。

GameJS

GameJS 是一个JavaScript版本的 Microsoft’s XNA 游戏框架， 使用 “画布” 作为渲染机制。JavaScript不是编写游戏的最佳平台。不过如果是那些帧速要求较低的游戏，而你又是一个JavaScript开发者，何乐而不为？ 此库包含一些控制游戏元素、屏幕显示和键盘操作的方便好用的类。

Shortcuts.js

自从Google Reader和Gmail之后，Web应用里的键盘快捷键变得越来越流行，因为他们大大提升了易用性。Shorcuts.js提供更为方便地处理键盘快捷键的函数。 使用该库，创建快捷键，然后在按下键盘的同时就运行函数成为更易实现的可能。

Mapstraction

几个不同的地图供应商都提供了各自不同的API。如果你想在供应商之间转换（比如说从Google Map转到MapQuest），则需要重写一些代码。Mapstraction就是用来帮你解决这个问题的。它提供一个通用 API ，帮你在大多数流行的地图供应商之间转换。只需更新一行代码，即可转换完毕。

Amberjack

一个小巧的JavaScript脚本库，为你的网站添加上漂亮的导游信息。 一旦启用，一个模式化的内容框就能像到导游一样介绍您的站点，框内可以添加任意你想要的内容。导游内容的代码可以手工编写，也可以用线上工具自动生成。当然，你可以通过编写css或者利用即刻可用的主题来使导游信息符合内容框的样式。

JsLoad

JavaScript脚本库的远程载入API。JsLoad这个简单的API能够让你从Google的服务器上导入大体积JavaScript文件。JsLoad能自动载入任何版本代码库的依赖文件。

英文原文: 40 Useful JavaScript Libraries | Smashing Magazine