50 Best jQuery Techniques 2010
1. jPlayer – jQuery mp3 player plugin
2. QuickSand
Reorder and filter items with a nice shuffling animation. Just specify source container and destination collection which will replace the source collection. New elements will appear with fancy scaling+alpha effect, deleted elements (non-existant in destination collection) will scale out and rearranged items will move to their destination positions.
3. Colorful Sliders With jQuery & CSS3
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.
4. prettyPhoto
5. Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.
6. ImageFlow
ImageFlow is a picture gallery, which allows an intuitive image handling. The basic idea is to digitally animate the thumbing through a physical image stack. That intuitive handling is automatically caused by the metaphorical use of the well known process of thumbing through.
7. HoverFade
8. Ingleby
Picbox is a lightweight (around 5KB) javascript image viewer based on the excellent Slimbox by Christophe Beyls, and available using either the Mootools or jQuery frameworks. It features automatic resizing and zooming of large images, allowing them to fit in the browser or be viewed at full size.
9. Nivo Slider
10. Circular Motion Effect with jQuery
11. How to Create a Nifty Dynamic Shadow with jQuery
First I want to welcome you to my very first article for 1stwebdesigner. Today I’ll show you how to create a very nifty looking dynamic shadow with a few teaspoons of jQuery, a pinch of CSS and some transparent PNG’s as Base. I’ll explain every line of used code, so you can easily follow along and create your own awesome looking dynamic shadow powered by jQuery.
12. jQuery-Notes
jQuery-Notes is a simple and easy to use jQuery-Plugin that allows you to add notes to any image (even foreign ones) on your website or blog.
13. jQuery plugin: Easy Accordion
14. Galleriffic
A jQuery plugin for rendering rich, fast-performing photo galleries.
15. Photo Zoom Out Effect with jQuery
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.
16. Create A Multiple URL Shortener Page
17. Contextual Slideout Tips With jQuery & CSS3
18. Annotation Overlay Effect with jQuery
19. jQuery quickie: Colourful rating system with CSS3
Today, we’re going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.
20. Growl
21. Control.Tabs
22. A Fresh Bottom Slide Out Menu with jQuery
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.
23. COIN SLIDER
Roke1984 is a display free font based on gemotric forms and mathematic symbols.
This font includes accents and numerals.
24. Interactive Photo Desk with jQuery and CSS3
25. Making a Mosaic Slideshow With jQuery & CSS
26. Beautiful Photo Stack Gallery with jQuery and CSS3
27. Create a awesome images gallery using css3 and jquery
Today we will be creating a very simple but great looking css3 image gallery using jquery and css3. The image gallery will be tilted to the side and on hover will move. Whenever you click on the image a lightbox will pop out. So lets begin.
28. Automatic Image Slider w/ CSS & jQuery
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.
29. Simple Tooltip w/ jQuery & CSS
There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. I would like to share how I’ve created mine today, and am also open to any critiques and suggestions for those jQuery ninjas out there. Lets take a look.
31. Javascript game engine for jQuery
jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.
33. Micro Image Gallery: A jQuery Plugin
34. SuperSized
This ain’t no Lucinda. League Script #1 is a modern, coquettish script font that sits somewhere between your high school girlfriend’s love notes and handwritten letters from the ’20s. Designed exclusively for the League of Moveable Type, it includes ligatures and will act as the framework for future script designs.
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
36. Cloud Carousel – A 3d Carousel in Javascript
There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. To redress the balance in JavaScript’s favour, I have created this jQuery carousel plugin.
37. Image Highlighting and Preview with jQuery
In this tutorial we will show you how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context. We will highlight images on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image on the screen.
39. Full Page Image Gallery with jQuery
In this tutorial we are going 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. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.
40. Lens Flare
41. SlideNote
42. qTip – The jQuery tooltip plugin
qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework.
43. Interactive Image Vamp up with jQuery, CSS3 and PHP
Today we will show you how to create an online application for giving some funny touches to an image. We will be using jQuery and jQuery UI for dragging and resizing little bling elements like mustaches and glasses. With PHP the image and the bling elements will get merged and the end result can be viewed.
44. Elegant Accordion with jQuery and CSS3
45. Open Standard Media Player
The Open Standard Media Player is an all-in-one media player for the web. This media player is an industry changing, open source (GPL) media player that is built to dynamically deliver any type of web media, including HTML5, 油Tube, Vimeo, and Flash.
46. Pretty Simple Content Slider with jQuery and CSS3
47. CSS3 Rounded Image With jQuery
48. Image Cross Fade Transition
A modern heavy weight typeface ideal for use on print, web, motion, t-shirts and apparel. Details include extended European character set, manually edited kerning and Euro symbol.
49. imgAreaSelect
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 (like those on Flickr).
50. Awesome CSS3 & jQuery Slide Out Button
ajax 
码头工人 