25个新鲜的jQuery教程和插件

1. Hover Slide Effect

Demo – Tutorial

This jQuery tutorial will demonstrate how to create an image area with several images that slides out when you hover over them, showing other images. Random sliding effect add to its beauty, by random sliding effect I means the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.

2. jQuery Smooth Tabs Plugin

Plugin Details

jQuery Smooth Tabs is easy to use plugin, which allows you to display your content with some effects, for better user experience. All you need is a single container for your desired tabs and content, some nice CSS and images.

3. Animated Portfolio Gallery

Demo – Tutorial

In this tutorial jQuery is used to create awesome animated portfolio gallery with scroller for thumbnails and a content area where we will display details about the portfolio item. Images will appear as an overlay when we click to enlarge them. The heading will be animated from the top, fade out the previous image and slide the descriptions from the slides.

4. Soxer

Tutorial

This is a very simple and small plugin for soft background image transition effect.

5. Pull Out Content Panel

Demo – Tutorial

In this tutorial you will learn to create a content panel that slides out at a predefined scroll position. For Example, if you want related posts to be displayed as a sliding content panel when your visitor scroll down to the end of the article, you can use this Pull Out Content Panel. It will reveal a teaser with related content and it can be expanded to full page size to show more. Item container will be adapted depending on how many items can fit to the user’s screen.

6. Fancy OpenID Selector

Plugin Details

Provides predefined OpenID endpoints in a tooltip dropdown, with automatic URL replacement.

7. Custom Animation Banner

Demo – Tutorial

In this tutorial you will learn to create a custom animation banner with jQuery, having different elements in a banner that will animate step-wise in a custom way.

8. jQuery Static Gmap Zoom

Plugin Details

jQuery Static Gmap Zoom is a simple jQuery plugin. It creates a static Google map with a mouse-over zoom effect, as a light-weight alternative to a normal dynamic Google map.

9. Annotation Overlay Effect

Demo – Tutorial

In this simple tutorial you will create a simple overlay effect to display annotations or notes in web pages.

10. Embed Picasa Gallery

Tutorial

If you keep your images on PicasaWeb, this plugin lets you integrate an interactive gallery showing images of your choice.

11. Slider Gallery

Demo – Tutorial

This tutorial will explain how to create a creative gallery with a slider for the thumbnails. Once album is chosen the thumbnails area will expands, thumbnails will scroll to the end and move back to the first image.

12. Quovolver

Plugin Details

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

13. Compact News Previewer

Demo – Tutorial

In this tutorial you will learn to create a news previewer that let’s you show your latest articles or news in a compact way. The news previewer will show list of articles on the left side and the preview of the article with a longer description on the right.

14. Style-my-tooltips

Demo – Tutorial

A very small plugin to enhance and glorify the browser tooltips. It adds just few options and styling via CSS, otherwise it works just like browser’ native tooltips.

15. Polaroid Photobar Gallery

Demo – Tutorial

In this tutorial you will learn to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover.

16. wdScrollTab Scroll Tab

Plugin Details

wdScrollTab is a tab panel which has ability to scroll for tabs that do not fit on the page. It supports iframe, ajax call and dynamically loaded content.

17. Full Page Image Gallery

Demo – Tutorial

In this tutorial you will create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview using jQuery and CSS3 Webkit properties.

18. Tiny Carousel

Demo & Tutorial

Tiny Carousel is a lightweight jQuery-based carousel for sliding HTML based content horizontally or vertically. It also supports navigation by button, also number of blocks to move and the starting point of carousel can be set.

19. Collapsing Site Navigation

Demo – Tutorial

This tutorial will demonstrate you how to create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a sub-menu slides up from the bottom. Clicking on one of the sub-menu items will make the whole menu collapse like a card deck and the respective content area will slide out.

20. Activity Indicator

Plugin Details

Activity Indicator is a jQuery plugin that generates a clear activity indicator using SVG or VML. No additional images or external CSS is required in order to use this plugin.

21. Making an Apple-style Splash Screen

Demo – Tutorial

In this tutorial you will be creating a simple jQuery plugin that will display fancy Apple-style splash screens.

22. Creating a Stylish Coming Soon Page

Demo – Tutorial

This tutorial will show how to create a stylish coming soon page using PHP, MySQL and jQuery. It will enable you to collect visitor’s emails and store them in a simple database table, on which you can send launching updates about your website.

23. Making Better Select Elements with jQuery and CSS3

Demo – Tutorial

In this tutorial you will learn how to build a script that will replace an ordinary select element with a better looking, markup powered version, while keeping all the functionalities intact.

24. Quick Feedback Form w/ PHP and jQuery

Demo – Tutorial

This tutorial will demonstrate how to create elegant Feedback form to get instant visitor’s response. It uses jQuery, PHP and the PHPMailer class.

25. Moleskine Notebook with jQuery Booklet

Plugin Details

This tutorial will explain how to use and customize jQuery Booklet Plugin to create a virtual moleskine notebook with latest posts from the blog.