200个AJAX与avaScript技术
- Tabs & Accordion
- General Navigation
- Traditional Menus
- Forms And Auto-Complete
- Form Validation And Hints
- File Upload
- Tables
- Tool Tips & Boxes & Panels
- Calendars And Timelines
- Image Previewing And Galleries
- Slideshow
- Lightbox
- Image Effects
- Image Cropping
- Content Sliders
- Interactivity And Communication
- Maps & Searching
- Media Players
- Font And Text
- Miscellaneous
Since this is an update of an earlier listing, we tried to remove all obsolete techniques from the listing – but we would appreciate if you notify us if we by accident have missed to remove some duplicate, outdated or non working link.
Navigation
1. Background Image Navigation – jQuery
In this tutorial we are going to create a beautiful navigation that has a background image slide effect – by using the Background-Position Animation Plugin. The main idea is to have three list items that contain the same background image but with a different position.
View Demo
2. Easy Accordion – jQuery Plugin
The Easy Accordion plugin by Andrea Cima Serniotti will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still. You can download the source files for this plugin.
View Demo
3. TN34 Timetabs – jQuery Plugin
This jQuery plugin by Mario Alves creates tab container that switches automatically every cycle (or interval) to next tab – the plugin is compatible with most modern browsers. The site is in German – you can also download the plugin from HERE.
View Demo
4. jQuery Smooth Tabs Plugin
jQuery Smooth Tabs is an easy to use plugin, which allows you to display your content with some nice effects, for better user experience. All you need is a single container for your desired tabs and content, some appropriate CSS and images.
View Demo
5. Sweet AJAX Tabs With jQuery 1.4 And CSS3
In this tutorial you will learn how to create a colorful AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery. The downloadable source code is easily modifiable and adding new tabs is as easy as adding new properties to the Tabs object.
View Demo
6. Fresh Content Accordion
A simple, yet very eye-catching and colorful accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects. This handy script delivered by Martin Angelov is both easily modifiable end embeddable.
View Demo
7. Elegant Accordion – jQuery And CSS3
This easy-to-follow tutorial teaches you how to create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks.
View Demo
8. Yetii – Yet (E)Another JavaScript Tab Interface
With lightweight, object-oriented code that degrades gracefully in browsers without JavaScript-support. You can have many independent tab interfaces on a page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation and more.
View Demo
9. Collapser – jQuery Plugin
JQuery Collapser is a very light-weight multi purpose collapser plugin made for expanding and collapsing elements, and it can collapse any element within a document. It can also create accordions and more by adding a single additional line.
View Demo
10. Overlay Effect Menu with jQuery
In this easy to follow tutorial you will learn how to create a simple but yet practical menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand.
View Demo
11. Thumbnails Navigation Gallery – jQuery
In this tutorial you are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. The idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked.
View Demo
12. Halftone Navigation Menu – jQuery And CSS3
In this tutorial you will learn how to make 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.
View Demo
13. One Page Navigation – jQuery Plugin
This is a practical navigation plugin by Trevor Davis that lets you scroll smoothly when the navigation is clicked – this plugin is built upon the jQuery ScrollTo plugin by Ariel Flesler. The plugin is also available on Github.
View Demo
14. Cufonized Fly-out Menu – jQuery And CSS3
In this tutorial you will learn how to create a full page cufonized menu – when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and slide out a description bar from the left side of the page.
View Demo
15. Scrollable Thumbs Menu – jQuery
In this tutorial with downloadable source code you will learn how to build a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of scrollable thumbs appear when hovering over a menu item.
View Demo
16. Elastic Thumbnail Menu – jQuery And CSS
In this tutorial Sam Dunn on Build Internet will teach you how to make a good looking and elastic thumbnail menu. The menu magnifies menu items when they are hovered over and the different menu items expand upwards.
View Demo
17. Smooth Vertical Or Horizontal Page Scrolling – jQuery
In this tutorial you will learn how to create a simple smooth scrolling effect with jQuery. You will create a horizontal and a vertical website layout to show the effect. You will be using the jQuery Easing Plugin and just a few lines of jQuery.
View Demo
18. Sweet Pages – A jQuery Pagination Solution
In this tutorial you will learn how to build a jQuery plugin that will enable you to convert a regular unordered list of items into a SEO friendly set of easily navigatable pages. It can be used for comment threads, slideshows, or any kind of structured content.
View Demo
19. Filterable Portfolio with jQuery
In this nice tutorial Trevor Davis will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery and some CSS – and how to use it for to build a stylish portfolio broken down into 5 categories.
View Demo
20. jQuery ListNav Plugin
This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable nav bar appears above the list, showing the user the letters from A and all the way to Z.
View Demo
21. Ext Accordion
The Accordion widget and its InfoPanel are components that use the Ext JS Library. It can be used for page navigation, tool windows, hide-able details, log-in forms, options dialogs, sticky notes and more.
View Demo
22. Apple Style Menu Improved With jQuery
How to create a similar main navigation like the one of kriesi.at – a so called kwicks menu. Build an Apple-flavored Leopard-text-indent style menu from scratch in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
View Demo
23. Morph Effect On Mouseenter And Mouseleave With Mootools
In this tutorial, you will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools – and turn it into something fun to click.
View Demo
24. jPaginate – Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo
25. Thumbnail Hover Effect Using Mootools
Image is splitting in the middle using two instances of the same image. One instance goes toward left while second image goes right, in effect giving a beautiful illusion that image is gracefully splitting in the middle.
View Demo
26. Awesome Bubble Navigation – jQuery
In this tutorial you will learn how to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. You will use the jQuery Easing Plugin for a even nicer and improved effect.
View Demo
27. Outside The Box – Navigation
Just about every website uses the regular navigation concepts we’re all used to. After a while this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
View Demo
28. Powerful Product Highlighter With MooTools
This tutorial will help you to create a flexible tool for highlighting your sites products or services using the MooTools JavaScript framework – a clever rollover mechanism that works well as a product highlighter.
View Demo
29. Vertical Scroll Menu – jQuery
In this tutorial with downloadable source code Kevin Liew will teach you how to create a vertical scroll menu. You will also use the jQuery.color plugin to animate the background color changes. The HTML is as simple as possible, and the jQuery and CSS do the rest.
View Demo
30. Scrolling To The Top And Bottom – jQuery
Scroll to the Top and Bottom of your website with a simple click with the help of the jQuery powered Special Scroll Events by James Padolsey, and some few extra lines of jQuery – appearing like two buttons with fixed position on the bottom left of the page.
View Demo
31. jQuery Panel Magic – Panel Layout For Small Websites
jQuery Panel Magic plugin is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. The plugin provides you with a unique way to “panelize” a website.
View Demo
32. Slide Down Box Menu – jQuery & CSS3
In this tutorial you will learn how to create a cool and unique sliding box navigation (with submenu box with further links). The main idea is to make a box with the menu item slide out, while a thumbnail pops up in the top of the menu.
View Demo
33. Rocking And Rolling Rounded Menu – jQuery
In this tutorial you will learn how to build a menu with little icons that will rotate when hovering – by using the rotating and scaling jQuery patch from Zachary Johnson. The different menu items will expand and reveal some menu content, like links or a search box.
View Demo
34. Apple-Style Icon Slide Out Navigation – CSS And jQuery
In this tutorial you will learn how to create an Apple-style navigation menu with a twist – it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element.
View Demo
35. Lava-Lamp Style Navigation Menu – jQuery
In this logically done tutorial Jeffrey Way of Nettuts+ will teach you how to build a neat looking lava-lamp style navigation menu for your site using jQuery and CSS. As usual you can download the complete source files.
View Demo
36. Mega Drop Down Menus – CSS And jQuery
In this tutorial Soh Tanaka will teach you how to make an awesome and also highly useful Mega Drop Down Menu with the help of some CSS, jQuery and the Hover Intent jQuery plugin by Brian Cherne from Cherne.net.
View Demo
37. Awesomeness-Filled Navigation Menu
In this tutorial you will learn how to create a navigation menu inspired by Dragon Interactive. CSS sprites can dramatically increase a websites performance and with jQuery you will implement awesome transition effects easily.
View Demo
38. Bottom Slide Out Menu With jQuery
In this tutorial we will create a bottom slide out menu. This large menu will contain some title and a description of the menu item. You use some CSS3 properties for some shadow effects and jQuery for the interaction. The source files are available for download.
View Demo
39. jQuery Context Menu Plug-In
A context menu plugin for jQuery that features easy implementation, keyboard shortcuts, CSS styling, and control methods. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.
View Demo
40. Grungy Random Rotation Menu With jQuery And CSS3
In this tutorial we are going to create a nice menu with each item positioned differently and with some content area that slides out. The menu items are going to have a random rotation using the CSS3 property “transform”. The source files are available for download.
View Demo
41. Smooth Animated Menu With jQuery
In this relatively easy to follow tutorial Zach Dunn will teach you how to build a nice jQuery menu with a smooth transition animation effect. The menu has such a smooth animation because of a thing called “easing”.
View Demo
42. Fading Menu – Replacing Content
When a menu item is selected, its graphic is shown at full opacity and its corresponding content area is also shown, while the other menu items are faded and their content areas discretely hidden. Tutorial by Chris Coyier.
View Demo
43. Fixed Fade Out Menu
This tutorial has the aim to teach you to build a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.
View Demo
44. A Different Top Navigation
In this easy to follow tutorial by Connor Zwick you will use jQuery to create a stylish and refreshingly different multi-layered horizontal navigation system that is still intuitive and easy enough for anyone to use for the first time.
View Demo
45. Image Menu
A horizontal menu that reveals more of the image as you rollover it. Features 2 optional onClick events (open and close), href passed to onClick events, stays open when clicked, closes when clicked and selects item to pre-open.
View Demo
46. Proto.Menu – Prototype Based Context Menu
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page. Plays nice with JS turned off and menu styling can be easily defined in external stylesheet.
View Demo
Forms And Tables
47. Animated Form Switching – jQuery
In this easy-to-follow tutorial you will learn how to create a simple and stylish animated form switch with three very common forms. The main idea is not to leave the page when changing to another form, and make the new form appear within the same container.
View Demo
48. Cross-Browser HTML5 Forms
In this pedagogical tutorial, you are going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.
View Demo
49. Fancy Sliding Form – jQuery
In this easy-to-follow tutorial you will learn how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show.
View Demo
50. Changing Form Input Styles On Focus With jQuery
This short tutorial by Sam Dunn will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery and some CSS.
View Demo
51. FancyForm
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.
View Demo
52. Incredible Login Form With jQuery
Easily makes your content accessible on every page and keeps it discretely hidden until it is needed – by making a top panel that when clicked, will reveal itself and its content. This is yet another tutorial for Nettuts by Connor Zwick
View Demo
53. Quick Feedback Form – jQuery & PHP
In this tutorial by Martin Angelov you will learn how to create a solution for receiving quick feedback from your users – powered by jQuery, PHP and the PHPMailer class, this stylish form sends the users suggestions directly to your mailbox.
View Demo
54. Real-Time Form Validation – jQuery
In this tutorial by Michal Kozak you will learn how to build a useful client side and real time form validation with the help of jQuery – you will write and build the simplest form ever possible, nice and clean, without any unnecessary tags.
View Demo
55. Custom Form Elements
This CFE script enhances form elements including radio buttons, checkboxes, file upload, textfield, textarea, images and the select and more. The intention is to create the one Javascript form replacement script, which may be used with mootools as well as jQuery.
View Demo
56. FancyUpload – Swiff Meets Ajax
FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup and styleable via CSS and XHTML and uses MooTools to work in all modern browsers.
View Demo
57. Uploadify – JQuery File Upload Plugin Script
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
View Demo
58. Animated Table Sort – REGEXP Friendly
This plugin allows you to animatedly sort a table based on a particular column. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ASCII or numeric and ascending or descending.
View Demo
59. Clickable Table Row
If an HTML table row contains only one <a> link, it can be useful to make the entire row clickable and make it activate that link. This tutorial shows how to make the entire row clickable so that clicking anywhere in the row is the same as clicking that link.
View Demo
60. TinyTable JavaScript Table Sorter
Easy to use JavaScript table-sorting script. Features column highlighting, optional pagination, support for links, date/link parsing, alternate row highlighting, header class toggling, auto data type recognition and selective column sorting.
View Demo
61. JavaScript Tabifier
Automatically creates an HTML tab interface using plug-and-play JavaScript. Does not require you to set up a list of links, or anchors for the tabs, and you can use CSS to customize the appearance of the tabs.
View Demo
62. TableGear
TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.
View Demo
Tool Tips & Boxes & Panels
63. Pull Out Content Panel with jQuery
In this tutorial you will create a content panel that slides out at a predefined scrolling position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll through items in the panel.
View Demo
64. jQuery Confirm Dialog Replacement
In this tutorial by Martin Angelov you will learn how to create a stylish cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
View Demo
65. Simple Tooltip – jQuery & CSS
In this tutorial by Soh Tanaka you will learn how to create simple tooltip with jQuery and an incredibly simple styling with CSS. The only known issue with this tooltip is if the tooltip is wrapped in a container which has a relative position, the tooltip will be off.
View Demo
66. Contextual Slideout Tips With jQuery And CSS3
In this tutorial you will learn how to build contextual slideouts with jQuery and CSS3. The slideouts are ideal for presenting only the highlights of a product, with the details neatly hidden away. You can easily incorporate images, videos, or other rich multimedia content.
View Demo
67. Annotation Overlay Effect with jQuery
In this tutorial you will learn how to create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio. Just like with all the other Tympanus tutorials we present, also this tutorials source files can be downloaded.
View Demo
68. Colortip Tooltip Plugin – jQuery
In this tutorial you will learn how to write a simple jQuery tooltip plugin. The plugin is going to convert the title attributes of elements withing your web page, into a series of colorful and stylish tooltips. Six different color themes are available.
View Demo
69. Sleek Sliding Box Effect – jQuery
This pedagogic tutorial by Ryan Turki will teach you how to create some representative and nice sliding box effects with the help of a bit jQuery and some CSS. You can also download the source files.
View Demo
70. qTip – The jQuery Tooltip Plugin
qTip is an advanced tooltip plugin for the jQuery JavaScript framework. Built from the ground up to be user friendly, feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.
View Demo
71. Inline Modal Window – jQuery And CSS
In this tutorial Soh Tanaka will teach you how to build a simple and stylish inline Modal window with the help of some CSS and jQuery. According to the developer, this tutorial requires intermediate knowledge of CSS and jQuery.
View Demo
72. MooTooltips – JavaScript Tooltips With MooTools
MooTooltips can display tooltip messages from HTML elements, Ajax calls or text added manually. Tooltip parameters can be passed either when instantiating the class or on the rel element parameter.
View Demo
73. BounceBox Notification Plugin With jQuery And CSS3
In this tutorial you will learn how to build a BounceBox notification plugin with some jQuery and CSS3. You can use this plugin to present notifications, or a registration form, newsletter signup or even some kind of advertisement as the content of the box div.
View Demo
74. Coda Popup Bubbles
In this tutorial you will learn how to create Coda’s ‘puff’ pop-up bubbles, shown when you mouse over a downloadable image. This effect can be perfected by changing the initial reset code to read from the trigger element and approximate it’s position.
View Demo
75. End Of Page Slide Out Box – jQuery
In this tutorial you will learn how to create a box that slides out from the right when you are reading the last part of the article – the box shows another article from the same category. The idea is to have an element in the page that triggers the box to appear.
View Demo
76. Prototip 2
Prototip allows you to easily create both simple and complex tooltips using the Prototype JavaScript framework. You can easily customize it, control the tool tip position and get configurable rounded corners (with no PNG images required).
View Demo
77. Better Tooltip With JQuery
Browsers will automatically display a tooltip when you provide a title attribute. In this tutorial Jon Cazier is going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.
View Demo
78. MoreCSS
An easy to use, lightweight and fast JavaScript toolkit/library with CSS syntax for common things. With only 8 KB and it’s CSS like syntax MoreCSS is perfect for all the daily JavaScript things: popups, tabs, tooltips and more.
View Demo
79. 非死book-Style Modal Box Using MooTools
非死book’s Modal box is one the best modal box around. It’s lightweight, subtle, and very stylish. David Walsh has taken 非死book’s imagery and CSS and combined it with MooTools awesome functionality to duplicate the effect.
View Demo
80. SlideNote – jQuery Plugin For Sliding Notifications
SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. SlideNote offers a set of five options that allow you to modify the behavior and content of the script.
View Demo
81. Snippet – jQuery Syntax Highlighter
Snippet is a cool jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet jQuery plugin provides a quick and easy way of highlighting source code passages in HTML documents.
View Demo
82. Step By Step – Show And Explain Visitors What Your Page Has For Them
You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.
View Demo
Calendars And Timelines
83. Advanced Event Timeline
In this tutorial you will learn how to make an Advanced Event Timeline with the help of PHP, MySQL, CSS and jQuery, that will display a pretty time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.
View Demo
84. FullCalendar – jQuery Plugin
FullCalendar is a jQuery plugin that provides a full-sized drag and drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).
View Demo
85. Unobtrusive Date-Picker Widget
This unobtrusive datePicker (calendar), which is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/XHTML+XML.
View Demo
86. JQuery Interactive Date Range Picker With Shortcuts
Date Range Picker plugin uses jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges.
View Demo
87. Calendar – A JavaScript Class For Mootools
Calendar is a JavaScript class that adds accessible and unobtrusive date-pickers to your form elements. Features highly configurable inputs and selects, multi-calendar support, variable navigation options and multi-lingual and fancy date formatting.
View Demo
88. Scrollable Timelines
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.
View Demo
Image Handling And Sliders
Image Previewing And Galleries
89. Sweet Thumbnails Preview Gallery – jQuery
In this nice tutorial you will learn how to create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer.
View Demo
90. Modern Gallery With Raphael & jQuery
In this simple tutorial by Marcin Dziewulski you will learn how to create a stylish and modern gallery with a very attention catching animation effect using the small Raphael library and also jQuery and some CSS.
View Demo
91. Animated Portfolio Gallery with jQuery
In this tutorial you will learn how to create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbs and a content area where we will display details about the item. The image can be enlarged by clicking, making it appear as an overlay.
View Demo
92. Single Page Applications With jQuery’s Best Friends
In this pedagogical tutorial you will learn how to build a single page application supporting graceful degradation using some of jQuery’s Best friends; DocumentCloud’s Backbone.js, Underscore.js, LAB.js and jQuery templating.
View Demo
93. Bubbleriffic Image Gallery with jQuery
In this tutorial you will learn how to create a bubbly image gallery that shows images in a unique way. The thumbnails shows in a rounded fashion and you can simply scroll them automatically by moving the mouse. Clicking will zoom in a big circle with the full image.
View Demo
94. Photo Stack Gallery – jQuery And CSS3
This tutorial teaches how to create a gallery. The albums are showed as a slider, and when an album is chosen, the images of that album are showed as a photo stack. In photo stack view, browse through the images by putting the top images last in stack.
View Demo
95. Fancy Thumbnail Hover Effect With JQuery
This is a beautiful thumbnail hover effect jQuery and CSS tutorial by Soh Tanaka. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.
View Demo
96. Simple Banner Rotator
In this tutorial you are making a simple PHP, jQuery & MySQL banner rotator, with which you can create and randomly display banners on your site. Each of the banners features a neat jQuery animation effect, which you can customize to fit your own needs.
View Demo
97. Full Page Image Gallery with jQuery
In this tutorial you will learn how to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse.
View Demo
98. FancyZoom Meet Prototype
FancyZoom uses Apple’s rounded corners and supports pretty much any HTML you can throw in a div (images, text, Flash, etc.). It was built using script.aculo.us and Prototype – it now works with any HTML already included on the page.
View Demo
99. Fullscreen Gallery With Thumbnail Flip – jQuery
In this tutorial you create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to.
View Demo
100. Exposure – jQuery Image Gallery Plugin
Exposure is a jQuery plugin for rich and smart photo viewing that can handle very large amounts of photos and has flexible configuration that allows custom transition effects and similar – and also smart image preloading and support for photo meta data.
View Demo
101. Pikachoose jQuery Image Gallery
Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed and easy to setup.
View Demo
102. PiroBox – jQuery Plugin For Fast Performing Photo Galleries
jQuery PiroBox plugin is a lightbox with jQuery (image or content viewer for web sites). There is a choice between three different styles – shadow, white and black. It is able to open any kind of files, from inLine content to the SWF files, from simple images to PDF files.
View Demo
103. Photo Zoom Out Effect With jQuery
In this tutorial you will learn how to create a simple image zoom out effect with jQuery. The idea is to show some images which are zoomed in initially and when hovering over an image it gets zoomed out. You can also download the source files.
View Demo
104. Sliding Boxes And Captions With JQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Demo
105. Galleriffic – jQuery Plugin For Photo Galleries
Galleriffic is a jQuery plugin that provides a rich, post-back free experience, optimized to handle high volumes of photos while conserving bandwidth. Note: there is more demos inside the article.
View Demo
106. Sponsor Flip Wall With jQuery And CSS
In this relatively easy-to-follow tutorial Martin Angelov will teach you how to code a good looking and effective sponsors page with PHP, CSS and jQuery together with the jQuery Flip plug-in by Luca Manno. You can download the source files.
View Demo
107. Polaroid Photo Viewer – jQuery And CSS3
In this tutorial you will learn how to create a Polaroid Photo Viewer using jQuery and CSS3. You can drag the images around, rotate them by combining the CSS3 Box Shadow and Rotate properties – the jQuery inject the CSS3, keeping the CSS file clean.
View Demo
108. AD Gallery – jQuery Plugin
A highly customizable image gallery plugin with a list of thumbnails below the image. Not quite like Lightbox or Thickbox, but more of a showcase type of gallery. First released in 2009 and updated on July 15, 2010. Demo on the download page.
View Demo
109. Hover Slide Effect with jQuery
In this tutorial you will learn how to create a neat hover and slide effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images.
View Demo
110. Portfolio Zoom Slider – jQuery
This tutorial explains how to create some nice effects for a portfolio or similar website with jQuery – a tiny slider will be integrated with the amazing Cloud Zoom plugin and also the very elegant Fancybox plugin.
View Demo
111. Supersized – jQuery Plugin
This nice plugin resizes images to fill browser while maintaining image dimension ratio and cycles Images or backgrounds via slideshow with transitions and preloading. There is a few more demos on the plugin download page.
View Demo
112. Moving Boxes
A nice and practical jQuery slider by Chris Coyier with buttons to change panels – which grows up the current box when it’s in focus (image, title and text) and back down when it’s not in focus.
View Demo
113. Tiny Carousel – jQuery Plugin
Tiny Carousel is a lightweight carousel for sliding HTML based content – it was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface. Can slide vertical or horizontal.
View Demo
114. Mosaic Slideshow With jQuery And CSS
This tutorial teaches you how to create a jQuery and CSS mosaic gallery. The effect is achieved by dividing the original image into smaller parts. These tiles are sequentially hidden from view, which causes the effect. The source files are available for download.
View Demo
115. Animated JavaScript Slideshow
This dynamic JavaScript slideshow is feature packed and under 5KB. A few features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
View Demo
116. Easy Slider 1.7 – JQuery Plugin
JQuery plugin for sliding images and content. Easy Skider features include: auto-slide, continuous sliding, “Go to first” and “Go to last” buttons, hiding controls, optional wrapping markup for control buttons, vertical sliding, multiple sliders on one page.
View Demo
117. Image Rotator With Description
Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch – with help of this tutorial by Soh Tanaka, jQuery and CSS.
View Demo
118. BarackSlideshow
BarackSlideshow is a practical, very tiny and lightweight slideshow script, that takes the power of MorphList to easily enhance visualization and navigation of the images. With ‘transition’ option – slide or fade, or a function that returns any of those values.
View Demo
119. s3Slider – jQuery plugin
s3Slider is a plugin built in jQuery for cross-fading slideshow, with inspiration from the JD`s Smooth Slide Show script. Realatively easy to install and use.
View Demo
120. bgStretcher – jQuery Plugin
Background Stretcher is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize them to fill the entire window area. It will work as a slideshow if multiple images mode is used.
View Demo
121. Rotating Image Slideshow with jQuery and CSS3
In this pedagogical tutorial you will learn how to create a nice rotating image slideshow to spice up your web sites – and to achieve that you take a little bit of help from jQuery and CSS3 rotations (and the useful jQuery rotate plugin by Louis-Rémi Babé).
View Demo
122. PrettyPhoto – jQuery Lightbox
PrettyPhoto is a jQuery based lightbox clone. It supports images and has also support for videos, flash, 油Tube, iFrames. The setup is relatively easy and quick, plus the script is compatible in every major browser.
View Demo
123. Bumpbox – Mootools Lightbox
Bumpbox is another lightbox – with support for PDF, FLV, SWF, audio, images, inline HTML and also remote HTML files. The integration and implementation on your own site is pretty simple – and it automatically detects what kind of filetype you wish to show.
View Demo
124. Lightview – Overlay Anything With Style
Lightview was built to change the way you overlay content on a website. Designed to complement your content, and features include: smart image preloading, customization without CSS, adjustable rounded corners and more.
View Demo
125. Shadowbox Media Viewer
Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Written entirely in JavaScript and CSS and is highly customizable.
View Demo
126. TopUp – JavaScript Pop Up
TopUp is an easy to use JavaScript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness. Beta release.
View Demo
127. ColorBox – Customizable Lightbox Plugin
A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4 – supports photos, photo groups, slideshow, ajax, inline and iframed content. Less than 9KB of JavaScript. Note: there is more demos inside the article.
View Demo
128. YoxView – jQuery Image Viewer Plugin
YoxView is a jQuery image viewer plugin – it is inspired by Lokesh Dhakar’s Lightbox. Like it, YoxView displays images above the website’s content, as a separate layer. You can easily integrate your images from external sources like Flickr or Picasa into your website.
View Demo
129. Image Highlighting & Preview – jQuery
In this tutorial you will learn how to highlight and preview images that are integrated in an article or spread over a page. The images are highlighted on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image.
View Demo
130. imgZoom – jQuery Plugin
imgZoom is a jQuery plugin that implements a smooth zoom effect on images. It uses vector graphics (SVG or VML) to create a graceful transition between the thumbnail and the full-sized image.
View Demo
131. Attractive Before & After Photo Effect With jQuery
In this easy to follow tutorial by Kevin Liew you will learn how to create a beautiful and smooth Before and After photo effect with help of jQuery and CSS – and how to convert it to plugins (tested on all major browsers).
View Demo
132. jQuery Image Zoom Plugin
jQuery plugin to handle image zooming, like you find on many e-commerce sites. Uses an asynchronously loaded full size image to create a “magnifying glass” effect on a scaled image with the HTML5 canvas element.
View Demo
133. MobilyBlocks – jQuery Plugin
This is yet another lightweight (as little as 2KB) and easily configurable jQuery plugin by Marcin Dziewulski. MobilyBlocks plugin allows you to simply create an unordered list as an impressive and stylish animated circle.
View Demo
134. Apple-Like Retina Effect With jQuery And CSS
In this tutorial Martin Angelov will teach you how to turn a static image into a functional image with “Retina effect” with only jQuery and CSS. The markup for the effect is quite straightforward – you need just a few divs and an image.
View Demo
135. CSS3 Rounded Image With jQuery
In this tutorial by Nick La on WebDesignerWall you will learn how to make a stylish CSS3 rounded image with a jQuery work-around – and make the script to automatically wrap a span tag around with the original image as a background-image.
View Demo
136. Custom Animation Banner with jQuery
In this tutorial you will learn how to create a custom animation banner with jQuery by using the jQuery Easing Plugin and the jQuery 2D Transform Plugin. The idea is to have different elements in a banner that will animate step-wise in a custom way.
View Demo
137. jParallax
jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse.
View Demo
138. Blockster Transition Effect – jQuery
Blockster is a transition effect designed for ‘featured content’ rotators or slideshows. Its underlying concept is to transition between one element to the next block by block – and it is highly customizable. Demos are located on the download page.
View Demo
139. Jquery Fade In And Fade Out
A fade in fade out effect – the effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website whatever it be an image, text, a link or even a div.
View Demo
140. Flash-like Color And Pattern Morphing Effect With jQuery
In this tutorial you will learn how to create a Flash-like effect with a few lines of jQuery and a transparent PNG as mask. Dynamically change the color of the logo, and add patterns as you wish and even animate them. You can also download the source files.
View Demo
141. Rotating Billboard System With jQuery And CSS
In this tutorial you will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one appear.
View Demo
142. Simplest Spotlight Effect – jQuery
This fairly simple tutorial by Kevin Liew on Queness will teach you how to build a cool and refreshing spotlight effect with caption – with the help of jQuery and some not at all so complicated CSS and HTML.
View Demo
143. Interactive Picture With jQuery
In this tutorial you will learn how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. The original inspiration for this tutorial came from the IKEA website.
View Demo
144. Nifty Dynamic Shadow With jQuery
In this logical and relatively easy-to-follow tutorial Daniel Kurdoghlian will teach you how to create a nifty looking dynamic shadow with a bit of jQuery, CSS and some transparent PNG’s as base – and you can also download the source files to this effect.
View Demo
145. Day And Night – Scenery Animation
How to with jQuery and CSS create an amazing animated scenery with just a few lines of jQuery and some absolute positioned elements with images. Note: This will not work in any IE version.
View Demo
146. Awesome Image Preloader – jQuery
In this pedagogical tutorial you will learn how to create a graceful image preloader plugin (that works in all major browsers), to boost the performance of your website. First a small loading icon appears, and then self the image fades in gracefully.
View Demo
147. imgAreaSelect – jQuery Plugin
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes. Note: more demos Here.
View Demo
148. CropZoom – jQuery Plugin
CropZoom is a plugin that let you select an area of an image to crop, whit this plugin you can zoom in or zoom out, drag and also rotate. The CropZoom plugin needs ui.droppable, ui.resizable, ui.slider from JQuery UI.
View Demo
149. UvumiTools Crop
This simplified tool gives your users the ability to create a selection area that can be used to crop an image live on your web site. This is an extremely useful tool for any site that provides image hosting, for example.
View Demo
150. Jcrop – The jQuery Image Cropping Plugin
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
View Demo
151. Mootools Slider With Two Knobs
Mootools slider with two knobs (double pinned slider) with range indicator. You can easily change the look and feel of the range indicator, slider knob, the slider track by modifying the slider.css.
View Demo
152. Content Feature Like MailChimp – jQuery
In this tutorial Ashley Ford on Papermashup will teach how to build an attractive full page content feature slider plugin (similar to the MailChimp slider) – by using the jQuery Cycle plugin which allows you to rotate, paginate or cycle a set of images.
View Demo
153. jPaginate – Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo
154. AnythingSlider – JQuery Plugin
This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders Chris Coyier created and adding new features. In other words, to create a really “full featured” slider that could be widely useful.
View Demo
155. A Bullet-Proof Content Viewer
In this tutorial, we’re going to look at how we can create an attractive and space-saving content viewer which even works with JavaScript disabled. Styled with basic CSS and some use of jQuery to add further enhancements in the form of transition animations.
View Demo
Interactivity And Communication
156. RSS Reader With jQuery Mobile
In this easy to follow tutorial by Jeffrey Way you will learn how to create a simple but stylish RSS reader for your iPhone or Android phone, just by using some PHP and jQuery Mobile. You can also download the source files.
View Demo
157. 5 Star Rating System – jQuery, AJAX And PHP
In this tutorial, you will learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we will also leverage the power of PHP so that you don’t need a database.
View Demo
158. Star Rating – CSS Sprite And jQuery
In this easy to follow tutorial from Web Developer Juice you will learn how to create nice and discrete star rating with the help of CSS Sprite and jQuery – AJAX Call is used to store the voting value.
View Demo
159. Starbox – Rating Stars For Prototype
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype JavaScript framework. For some extra effects you can add Scriptaculous as well.
View Demo
160. Animated Sharing Bar
Encourage your visitors to share your content on the networks by using pure JavaScript with the jQuery framework, to make an animated sharing bar, which will enable your website visitors to share posts on a number of social networks.
View Demo
161. OpenSocial jQuery Mixi Platform
OpenSocial jQuery is a jQuery based concise JavaScript Library for rapid OpenSocial Applications development – The jQuery mixi Platform is a plugin to use the extension of mixi specifically.
View Demo
162. Digg-Style Post Sharing Tool With JQuery
Kevin Liew will show you how to create a social bookmarking tool that looks similar to digg’s. He also includes the komodomedia’s social bookmarking icons and a long list of submission URL for one click bookmark.
View Demo
163. Ajax IM
Ajax im is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. Demo usernames are “test”, and “test (1 to 4)”. Password is “test”.
View Demo
164. jFeedback – Minimal jQuery Notification Plugin
A minimal way to notify users of success or error, based on 推ter’s bar and jBar. The notification consists of a simple “OK” or “Error” icon which the user can decide to click if he is interested in the details of the notification.
View Demo
165. Compact News Previewer with jQuery
In this tutorial you will learn how to create a news previewer that lets you show your latest articles or news in a compact way. The previewer will show some list of articles on the left side and the preview of the article with a longer description on the right.
View Demo
166. Latest Post Blogroll Slider – jQuery And PHP
In this tutorial you will learn how to create a blogroll slider that shows the latest post of your favorite blogs. You will be using some jQuery, PHP and XSL. The goal is to get a given RSS feed of a blog and parse the XML data with the help of PHP.
View Demo
167. Better Blogroll – Dynamic Fun With SimplePie And JQuery
A traditional blogroll is a simple list of other sites, often in the sidebar. Let’s improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation.
View Demo
168. 推ter Trackbacks Widget – jQuery Plugin
Highly customizable 推ter trackbacks widget to integrate tweets that mention your post into your blog. Each tweet comes with reply and retweet links to get more readers engaged in your story conversation.
View Demo
169. 推ter Friends And Followers Widget – JQuery Plugin
Here is a jQuery plugin by More Tech Tips that you can embed anywhere to display pictures of your 推ter followers or friends (whom you follow) and even their latest tweets if you like.
View Demo
170. jQuery 推ter Ticker
In this tutorial you will learn how to create a jQuery & CSS 推ter ticker which utilizes 推ter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases.
View Demo
171. Realtime Related Tweets Bar – JQuery Plugin
A real-time tweets bar related to your posts from your 推ter timeline or from anybody or even limit it by a geocode coordinates. Features; show realtime related tweets based on your post tags, show your 推ter timeline and more.
View Demo
172. Sleek Feed Widget With jQuery, YQL And CSS3
In this tutorial you will learn how to create a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You could for example set it up to show the latest posts from the different categories of your blog. You can also download the source files.
View Demo
173. Interactive Image Vamp Up With jQuery, CSS3 And PHP
In this tutorial you will create an online application for giving some funny touches to an image. You use jQuery and jQuery UI for dragging and resizing little bling elements like mustaches, glasses and lips. The source files are available for download.
View Demo
174. 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 can take advantage of the library to add graphics drawing functionality to web applications.
View Demo
175. Related Posts Slide Out Boxes – jQuery & CSS3
In this tutorial you are going to learn how to create a little widget that can be used to show related posts in any page. When the visitor hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo.
View Demo
176. Interactive Map With Raphael
In this tutorial by Marcin Dziewulski you are going to learn how to create an interactive map from scratch with the help of Raphael – Raphael is a small JavaScript library that should simplify your work with vector graphics on the web.
View Demo
177. MobilyMap – jQuery Plugin
This is a lightweight (only 5KB) and fully and easily configurable jQuery plugin by Marcin Dziewulski that converts a simple image into a functional and practical map – a nice solution for your websites map presentation needs.
View Demo
178. POI Map – jQuery & Google Maps
In this tutorial by Bogdan Pop from WebRaptor you will learn how to build a useful (when you urgently need to present important locations to your visitors) but fairly simple POI map with jQuery, Google maps and some not so complicated CSS.
View Demo
179. jQuery Plugin For Zoomable And Interactive Maps
A very practical and useful jQuery plugin for zoomable and interactive maps – the map was made to be as appealing as possible by using crisp graphics and smooth animations. The source code can be downloaded from the site.
View Demo
180. Easy To Use jQuery & Ajax Autosuggest Plugin
Extensible and light-weight (3.2kb minified) jQuery plugin – this plugin has the usual autosuggest functionality, but with extra flexibility: multiple instances, passing custom parameters, the ID and the value are returned, keyboard-controlled, and more.
View Demo
181. Google Powered Site Search With jQuery
In this logical tutorial you will learn how to create a branded custom search engine simply by using Google’s AJAX Search API, with which you can search for images and video and news items on your site – and you can also get general web results.
View Demo
182. Search And Share
Search and Share makes highlighting text to a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and presents a variety of options accordingly.
View Demo
183. Web 2.0 Document Search Site
In this tutorial we will create a document searching site with jQuery. This site will be used to search documents by specifying an extension (file type). The data is then filtered and sent to Google.
View Demo
184. Minimalist 油Tube Player – jQuery
In this tutorial you will learn how to create a minimalistic 油Tube player with the help of jQuery 油Tube TubePlayer Plugin by Nirvana Tikku and SWFObjects. All the source files of the project can be downloaded.
View Demo
185. Custom 油Tube Video Player – jQuery
In this tutorial you will create a jQuery plugin which uses 油Tube’s chromeless player, and creates our own set of minimalistic controls. The supported controls include a Play, Pause and Replay button – and also a clickable progress bar.
View Demo
186. Music Player In JQuery
In this tutorial you create an amazing music player coded in xHTML and jQuery that made use of mouse gestures and hotkeys. You can click and drag with mouse to interact with interface’s music player or use directional keys and spacebar instead of mouse.
View Demo
Font And Text
187. Quick And Easy Font Resizer – jQuery
In this easy-to-follow tutorial you will learn how to build a JavaScript font resizer that allows you to resize some section of your text instead of everything. This tutorial focuses more on the JavaScript, so the HTML and CSS are really basic.
View Demo
188. Typeface.js – Rendering Text With JavaScript, <canvas>, And VML
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
View Demo
189. Lettering – jQuery Typography Plugin
Lettering by Dave Rupert is an easy to use and lightweight jQuery plugin for radical web typography. This is an elegant solution to create for example typographical CSS3 posters, or for really custom type headings, while keeping the text selectable.
View Demo
190. jQSlickWrap – Slick Text Wrapping For jQuery
jQSlickWrap is a plugin for jQuery which allows you to wrap content around irregularly shaped images, easily. Use float and padding CSS styles to specify how the wrapping will work. Written with Progressive Enhancement in mind.
View Demo
191. FontEffect – JQuery Plugin
Font effect is a jQuery plugin that adds some effect to html text. The available effects are Outline, Shadow, Gradient and Mirror. No images are used for these effects and no additional CSS is necessary.
View Demo
192. Pull Quotes With MooTools
Chris Coyier authored a post titled Don’t Repeat Markup a while back. In his post he created nice pull quotes without repeating any content — instead he uses jQuery to dynamically create the quotes. The following is the MooTools method for doing so.
View Demo
193. Columnizer – jQuery Plugin
The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. Note: there is more demos inside the article.
View Demo
Miscellaneous
194. Isotope jQuery Layout Plugin
Interesting and exquisite jQuery plugin by David DeSandro for magical layouts. Enables filtering, sorting, and dynamic layouts – reveals and hides items with filtering, reorders items with sorting, dynamic layouts, captivating animations and more.
View Demo
195. Giveaway Randomizer App – jQuery
In this tutorial you will learn how to create a dedicated randomizer jQuery application – especially for choosing winners in competitions and giveaways. The goal is to get a randomly selected list of contestants and their prizes.
View Demo
196. Dynamic FAQ Section – jQuery & YQL & Google Docs
In this tutorial you will learn how to create dynamic FAQ section – with the help of jQuery and YQL, which pull the contents of a shared spreadsheet in your Google Docs, and use the data to populate your FAQ section with questions and answers.
View Demo
197. Easy List Splitter – jQuery Plugin
The Easy List Splitter plugin will get your list, wrap it into a container div, generate as many lists as the number of columns you require and evenly split the list items into the different list elements. It generates a valid HTML code that you can style as you wish.
View Demo
198. Skype-Style Buttons Using MooTools
JQuery expert Janko Jovanovic dropped a sweet tutorial showing you how to create a Skype-like button using jQuery. David Walsh was impressed by Janko’s article so he decided to port the effect to MooTools.
View Demo
199. Folder Collapser For Dynamic Content
How to create a group of collapsible folders using pure JavaScript and some JQuery added to the final product to give it a little bit of flare. The code will be structured in such a way that allows for implementation into a dynamic page.
View Demo
200. MooTools Drag Opacity
In this tutorial David Walsh will learn you how to make a “drag opacity and fading” effect with the help of some MooTools. The code itself is quite simple — Drag.Move’s onStart and onComplete events to begin and end the fading.
View Demo
201. 推ter-Like Load More Widget
You click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, JavaScript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.
View Demo
202. Retro Animated Flip-Down Clock
In this tutorial, you will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, Alexandru Pitea tried to replicate the flip action of the pads and make it as lifelike as possible.
View Demo
203. GlassBox
GlassBox is a lightweight JavaScript User Interface (UI) library, which uses Prototype and Script.aculo.us for some effects. GlassBox lets you easily build lucent borders, colorful layouts and “Flash-like” effects.
View Demo
204. Fast And Simple Toggle View Content
This script is using the UL list and allows user to toggle to display the content of LI items. This is a useful user interface feature that helps designers to save space and build a less complicated user interface.
View Demo
ajax 
chasego 
openkk