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 
碼頭工人 