40 个实用的jQuery技术与应用程序

   <div class="post_item">     <h3><a title="Contextual Slideout Tips With jQuery & CSS3<br /> " href="/misc/goto?guid=4958184894439525176" kesrc="http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/">Contextual Slideout Tips With jQuery & CSS3<br /> </a></h3>     <p>Knowing the importance of HTML standards, authors are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Contextual Slideout Tips With jQuery & CSS3" src="https://simg.open-open.com/show/f49e298c9549c7be112d93fda2621b52.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Revealing Photo Slider" href="/misc/goto?guid=4958188540225718906">Revealing Photo Slider</a></h3>     <p>Jonathan Snook has an article up “Content Overlay with CSS” in which extra content is revealed in a certain area when it is moused over. This inspired author to try to do something similar with jQuery. His first thought was a thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Revealing Photo Slider" src="https://simg.open-open.com/show/574131594f1fab927488a0669fe0d8a6.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Fancy Box" href="/misc/goto?guid=4958188365554939871">Fancy Box</a></h3>     <p>FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Fancy Box" src="https://simg.open-open.com/show/a7f965cbb3f602d325c31a7a85894cbf.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Scrollable" href="/misc/goto?guid=4958523726671124788">Scrollable</a></h3>     <p>Scrollable is the most successful tool in jQuery library. Any size and shape. Infinite loops and more. You can scroll through these elements by clicking on the arrow buttons or using the left and right arrow keys from your keyboard.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Scrollable" src="https://simg.open-open.com/show/a49af6ffaa6c978c979a5fd862c7d840.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Flip" href="/misc/goto?guid=4958523726772938840">Flip</a></h3>     <p>Flip is a jQuery plugin that will flip easily your elements in four directions.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Flip" src="https://simg.open-open.com/show/e0b35af64b3b3531c3b905ecf30c4686.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Smart tooltips" href="/misc/goto?guid=4958185129580474475">Smart tooltips</a></h3>     <p>These tooltips will act a little bit smarter than our basic version. The script will skip links with empty or missing title tags, but more important: the tooltips will try to stay in the browser viewport.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Smart tooltips" src="https://simg.open-open.com/show/bb9baaad1168bec960b7244723852c74.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Create slide tab box" href="/misc/goto?guid=4958200096521920278">Create slide tab box</a></h3>     <p>There are so many kinds of tabbed menu nowadays. Still author really like the sliding effect (such as in Coda website). Luckily, thank to jQuery, we could reassembly this effect and trust him it only takes a few minutes (He is not such a hard-working developer to write something longer then that).</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Create slide tab box" src="https://simg.open-open.com/show/fa12d9c18e3cbeb3f145bf17c6a2fdd0.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="jQuery Tabbed Interface / Tabbed Structure Menu Tutorial" href="/misc/goto?guid=4958187927554515772">jQuery Tabbed Interface / Tabbed Structure Menu Tutorial</a></h3>     <p>Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It’s a good “space-saver” and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="jQuery Tabbed Interface / Tabbed Structure Menu Tutorial" src="https://simg.open-open.com/show/c77676a4125cf6e45a38ed1fd20cd5d1.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="jQuery plugin: Easy Accordion" href="/misc/goto?guid=4958523726957420404">jQuery plugin: Easy Accordion</a></h3>     <p>A couple of months ago author found hisself looking for a jQuery plugin to create a horizontal accordion. He needed a simple and clean solution for one of his projects and, at a first glance, Slidedeck seemed to be what he was looking for. Unfortunately, this turned out to be not that flexible as he wished it to be. Hence, he decided to create his own horizontal accordion plugin.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="jQuery plugin: Easy Accordion" src="https://simg.open-open.com/show/bf96352837d553bedd890bebbbcf4401.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Animate Panning Slideshow with jQuery" href="/misc/goto?guid=4958184900128950160">Animate Panning Slideshow with jQuery</a></h3>     <p>Be the end of this tutorial, we’ll have a slideshow that transitions by changing the visible window. You will need to download two plugins for this tutorial: one for easing animations and one for timing slide changes.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Animate Panning Slideshow with jQuery" src="https://simg.open-open.com/show/4c7d1a40ee6256abc4801e6a5033eade.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Blockster transition effect" href="/misc/goto?guid=4958523727085080907">Blockster transition effect</a></h3>     <p>Blockster is a Javascript transition effect designed for ‘featured content’ rotators or slideshows. Its underlying concept is to transition between one element to the next block by block.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Blockster transition effect" src="https://simg.open-open.com/show/9528cc1474585279234a5e347029ec15.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Making a Custom 油Tube Video Player" href="/misc/goto?guid=4958523727172111156">Making a Custom 油Tube Video Player</a></h3>     <p>Today we are going to make a jQuery plugin which uses 油Tube’s chromeless player, and creates our own set of minimalistic controls, which allows for perfect integration with your designs. The supported controls include a Play/Pause/Replay button, and a clickable progress bar.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Making a Custom 油Tube Video Player" src="https://simg.open-open.com/show/bedf9be691302e1d671af005bdd4d2d9.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Sexy Drop Down Menu w jQuery " href="/misc/goto?guid=4958186648421292885">Sexy Drop Down Menu w jQuery </a></h3>     <p>In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Sexy Drop Down Menu w jQuery " src="https://simg.open-open.com/show/250e518a812c7915aece814f83851825.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Building a jQuery Image Scroller" href="/misc/goto?guid=4958184914389672068">Building a jQuery Image Scroller</a></h3>     <p>In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Building a jQuery Image Scroller" src="https://simg.open-open.com/show/6183ba364a388154348a2bd5a89766a6.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Custom Animation Banner with jQuery" href="/misc/goto?guid=4958523727332480392">Custom Animation Banner with jQuery</a></h3>     <p>In today’s tutorial we will be creating a custom animation banner with jQuery. The idea is to have different elements in a banner that will animate step-wise in a custom way.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Custom Animation Banner with jQuery" src="https://simg.open-open.com/show/563db8ca06282d6db23c10f0619f644f.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Full Page Image Gallery with jQuery" href="/misc/goto?guid=4958184296375936985">Full Page Image Gallery with jQuery</a></h3>     <p>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.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Full Page Image Gallery with jQuery" src="https://simg.open-open.com/show/8ae136ceb9ee49724d5668d3331f9d03.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Randomizer App w/ jQuery" href="/misc/goto?guid=4958523727451755463">Randomizer App w/ jQuery</a></h3>     <p>The app is divided in three steps – in step one you provide a list of the contestants’ name and email, divided by a comma (each contestant on a separate line). In the second step, you provide a prize name and a number, signifying the number of copies that have been offered. In the last step, you get a randomly selected list of contestants and their prizes.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Randomizer App w/ jQuery" src="https://simg.open-open.com/show/e76e8f6f0a10ff72951920585b783433.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Animated Drop Down Menu with jQuery" href="/misc/goto?guid=4958186747262555329">Animated Drop Down Menu with jQuery</a></h3>     <p>Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Animated Drop Down Menu with jQuery" src="https://simg.open-open.com/show/1f3fb4b544a239a81f9e3fc587bbcd53.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Making an Interactive Picture with jQuery" href="/misc/goto?guid=4958523727571008809">Making an Interactive Picture with jQuery</a></h3>     <p>In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect of a photo (ie items or people).</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Making an Interactive Picture with jQuery" src="https://simg.open-open.com/show/2a5a67459c84c42e31d9a9fddee28570.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="A jQuery 推ter Ticker" href="/misc/goto?guid=4958523727666936150">A jQuery 推ter Ticker</a></h3>     <p>In this tutorial we are going to create a pure 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. As a result, the ticker will be easily included into any web page and easily modified to your likings.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="A jQuery 推ter Ticker" src="https://simg.open-open.com/show/81d3c00f364f2c8e75842f80d91e7900.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="jQSlickWrap" href="/misc/goto?guid=4958523727765573432">jQSlickWrap</a></h3>     <p>jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="jQSlickWrap" src="https://simg.open-open.com/show/b0eac373e74a448b019dfd5657b4bd3d.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Animated Text and Icon Menu with jQuery" href="/misc/goto?guid=4958184460336351193">Animated Text and Icon Menu with jQuery</a></h3>     <p>Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Animated Text and Icon Menu with jQuery" src="https://simg.open-open.com/show/a8f060b70e240a9c6c66f368f26b2be3.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Image Wall with jQuery" href="/misc/goto?guid=4958319494176248546">Image Wall with jQuery</a></h3>     <p>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</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Image Wall with jQuery" src="https://simg.open-open.com/show/ec33310229e23a731d8aa3cc10a0a926.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="jQuery look: Tim Van Damme" href="/misc/goto?guid=4958337393805209258">jQuery look: Tim Van Damme</a></h3>     <p>The two key effects Tim is using are a simplified accordion and a hover effect. It’s worth noting that the hover effect only works in WebKit (Safari & Chrome), but he will show you how to create the effect using jQuery too.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="jQuery look: Tim Van Damme" src="https://simg.open-open.com/show/9ddb3d972601d9605ffa60024cb7f509.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="How to Load In and Animate Content with jQuery" href="/misc/goto?guid=4958523727940227717">How to Load In and Animate Content with jQuery</a></h3>     <p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="How to Load In and Animate Content with jQuery" src="https://simg.open-open.com/show/de09389fd92a5c27ff4b0d8e299df97f.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Nivo Slider" href="/misc/goto?guid=4958184843884278848">Nivo Slider</a></h3>     <p>The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. Completely free and totally open source, there literally is no better way to make your website look totally stunning.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Nivo Slider" src="https://simg.open-open.com/show/eac39e5b49dddbe156d4ac1c1f5d9837.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Coin Slider" href="/misc/goto?guid=4958184836033279473">Coin Slider</a></h3>     <p>jQuery Image Slider with Unique Effects</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Coin Slider" src="https://simg.open-open.com/show/a7a580f67f3c250d2bd5669caddc0baa.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="HTML5 and jQuery Techniques to Build a Webpage" href="/misc/goto?guid=4958523728101184206">HTML5 and jQuery Techniques to Build a Webpage</a></h3>     <p>In this tutorial, we are going to build a web page using HTML 5, CSS and jQuery techniques. The tutorial aims to demonstrate how to build a website when the specifications are finalized.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="HTML5 and jQuery Techniques to Build a Webpage" src="https://simg.open-open.com/show/f96f82f620cda1d7cababd691d55fe43.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Latest Post Blogroll Slider with jQuery and PHP" href="/misc/goto?guid=4958523728191689389">Latest Post Blogroll Slider with jQuery and PHP</a></h3>     <p>In this tutorial we are going to create a blogroll slider that shows the latest post of your favorite blogs. We will be using jQuery, PHP and XSL. The aim is to get a given RSS feed of a blog and parse the XML data with the help of PHP.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Latest Post Blogroll Slider with jQuery and PHP" src="https://simg.open-open.com/show/eabe02fee4ab8978910e1ff5e97f98a9.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Making a Photoshoot Effect With jQuery & CSS" href="/misc/goto?guid=4958338458057263326">Making a Photoshoot Effect With jQuery & CSS</a></h3>     <p>We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Making a Photoshoot Effect With jQuery & CSS" src="https://simg.open-open.com/show/20419b8c6189da8ddb209fefa5621cb4.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Coding a Rotating Image Slideshow w/ CSS3 and jQuery" href="/misc/goto?guid=4958192490023530812">Coding a Rotating Image Slideshow w/ CSS3 and jQuery</a></h3>     <p>Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Coding a Rotating Image Slideshow w/ CSS3 and jQuery" src="https://simg.open-open.com/show/775a611b9c19cad2ecf47f678b43e4e3.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Slider Gallery" href="/misc/goto?guid=4958192492171157752">Slider Gallery</a></h3>     <p>This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area which opens once an album is chosen.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Slider Gallery" src="https://simg.open-open.com/show/f626e4bcecebdf97f04401a5662a54f2.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Making Better Select Elements with jQuery and CSS3" href="/misc/goto?guid=4958325154444352484">Making Better Select Elements with jQuery and CSS3</a></h3>     <p>the select elements are impossible to change beyond a certain extent. This is why, today authors are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Making Better Select Elements with jQuery and CSS3" src="https://simg.open-open.com/show/198eb36b73829f9ec6770fc8f76339a1.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Jquery Tutorial : Toggle Effect on Hover/Click" href="/misc/goto?guid=4958523728409381636">Jquery Tutorial : Toggle Effect on Hover/Click</a></h3>     <p>Today we will learn how to get simple toggle effect on hover/click with jQuery. We will use Css and Jquery to get our final output.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Jquery Tutorial : Toggle Effect on Hover/Click" src="https://simg.open-open.com/show/dba3ba0dd95e6bffce664fae379ea56c.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Creating an Animated 404 Page" href="/misc/goto?guid=4958523728496434917">Creating an Animated 404 Page</a></h3>     <p>We are going to create an animated 404 page, which you can easily customize and improve.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Creating an Animated 404 Page" src="https://simg.open-open.com/show/5580532e5dab9b54aeae69e3cf3dfc74.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Create Smooth Rotatable Images with CSS3 and jQuery" href="/misc/goto?guid=4958523728586355215">Create Smooth Rotatable Images with CSS3 and jQuery</a></h3>     <p>In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Create Smooth Rotatable Images with CSS3 and jQuery" src="https://simg.open-open.com/show/dd9e89869666988b133c3df356571b63.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Neon Text Effect With jQuery & CSS" href="/misc/goto?guid=4958326253015538853">Neon Text Effect With jQuery & CSS</a></h3>     <p>Today we are going to do the first tutorial on the site, which is both design and code oriented, to bring you the full web development experience.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Neon Text Effect With jQuery & CSS" src="https://simg.open-open.com/show/addf4dbdf3d9a8a833df721dc6e172c9.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Bubbleriffic Image Gallery with jQuery" href="/misc/goto?guid=4958523728713848728">Bubbleriffic Image Gallery with jQuery</a></h3>     <p>In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Bubbleriffic Image Gallery with jQuery" src="https://simg.open-open.com/show/5d71dd247efcff62184d20f9eb2b21b5.jpg" width="500" /></p>    </div>    <div class="post_item">     <h3><a title="Animated Portfolio Gallery with jQuery" href="/misc/goto?guid=4958523728802898001">Animated Portfolio Gallery with jQuery</a></h3>     <p>Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item.</p>     <p><img title="40 Useful jQuery Techniques and Applications image" alt="Animated Portfolio Gallery with jQuery" src="https://simg.open-open.com/show/a7af6ab80ca8c3ed24ef21640eec73d4.jpg" width="500" /></p>    </div>