Best jQuery Tutorials - June 2011

13年前

Image Wall with jQuery

Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Rotating Image Slider with jQuery

In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.

Moving Boxes Content with jQuery

Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.

Analog JQuery clock

In this tutorial we will use JQuery and a plugin named jQueryRotate.

Preview window

In this guide you will lern how to make a box that shows a preview of the description on mouseover.

Create a clean, simple slideshow using HTML, CSS and JQuery

This tutorial will show you how to create a slideshow using JQuery.

jQuery Image Load

Tutorial about image loader with jQuery.

bit.ly URL Shortener using jQuery and Ajax

This tutorial will show you how to create Bit.ly short URLs using jQuery and Ajax.

WaterWheel jQuery carousel

This jQuery plugin can display images with a cascading waterfall effect. It can be positioned either horizontally or vertically, and custom events can fired when an image rotates into the center or is clicked. The appearance of the carousel is very customizable.

Simple Use of Event Delegation

Tutorial about event delegation with jQuery.

Scroll Linked Navigation

There are a few websites that have a left hand navigation automatically updates it's selection based on where you've scrolled to on the page. This tutorial will show you exactly how to achieve just that.

Quick Tip: Create Cross-Browser Datepickers in Minutes

In this quick tip, I'll show you how to use the new HTML5 date input, and then provide a fallback jQuery UI solution for the browsers which don't yet support this new input type.

Build a Neat HTML5 Powered Contact Form

In this tutorial, we are going to learn how to create a swanky HTML5 AJAX powered contact form. The form will use some of the new HTML5 input elements and attributes, and will be validated using the browser's built-in form validation.

jQuery 非死book Style Token Auto Complete Textfield

Do you want to spice up your form fields with a 非死book style auto complete text field? Today, I am going to show you how to do that.

Create a grid Image Gallery that has intersecting highlights with jQuery and CSS

Tutorial about creation the effect of intersecting lines to highlight the selected image in a grid like a crosshair.

3D Wall Gallery

Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.