2011年85个最佳的 jQuery 教程

     <span style="font-weight:bold;">jQuery让开发人员只要用少量的代码就能够开发出惊人的效果。学习和掌握应用jQuery并不难。下面为大 家列举了2011年85个最佳的jQuery教程，从中可以了解到如何为网站添加惊人但不复杂的浏览体验。<br /> <br /> </span>    <p style="text-align:left;"><strong>1. <a title="jQuery Tutorial: Building a jQuery Scroller" href="/misc/goto?guid=4958319417199360522" rel="external nofollow" target="_blank">jQuery Tutorial: Building a jQuery Scroller</a></strong></p>    <p>If you’re working on a site where a number of important stories or features need to be showcased within a small area, a news scroller is a great option. Without taking up much page real estate, you can highlight several stories along with descriptions and links to view the details. The scrolling effect helps attract and hold user interest. In this tutorial, I’ll guide you through the easy process of creating this type of news scroller with jQuery. We’ll start with an HTML list of stories that’s styled using CSS, then use jQuery to make it automatically scroll. When the user hovers over the jQuery Scroller, it will pause so they can read the abstract and click the link if they’re interested.<br /> <a href="/misc/goto?guid=4958319417199360522" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/e846971fcf9e94c4d0c942032f8e73d7.jpg" width="500" height="286" /></a></p>    <p style="text-align:left;"><strong>2. <a title="Create an interactive street view with jQuery" href="/misc/goto?guid=4958319418724539073" rel="external nofollow" target="_blank">Create an interactive street view with jQuery</a></strong></p>    <p>Earlier this year we were asked to create a website for a Swiss TV documentary about the famous “Langstrasse” in Zurich and its inhabitants. We came up with the idea of giving the user the ability to move through the street and see interesting hotspots connected with the documentary. Visit the 360° Langstrasse website so see how it works (watch out, it’s in German!).<br /> <a href="/misc/goto?guid=4958319418724539073" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/dbb9b480264002f7a5e04d22e05a24d6.jpg" width="500" height="282" /></a></p>    <p style="text-align:left;"><strong>3. <a title="Animated Content Menu with jQuery" href="/misc/goto?guid=4958184593852408913" rel="external nofollow" target="_blank">Animated Content Menu with jQuery</a></strong></p>    <p>Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.<br /> <a href="/misc/goto?guid=4958184593852408913" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/de10d5c7840f5a697f64e2a1e8588d2d.jpg" width="500" height="269" /></a></p>    <p style="text-align:left;"><strong>4. <a title="Tripping the DOM fantastic with jQuery" href="/misc/goto?guid=4958319421662940814" rel="external nofollow" target="_blank">Tripping the DOM fantastic with jQuery</a></strong></p>    <p>Don’t get me wrong, I can dance. But it’s certainly not the thing of beauty you see in the old Hollywood musicals – unless you’re watching me dance through the DOM (the Document Object Model) with jQuery.<br /> <a href="/misc/goto?guid=4958319421662940814" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/d25a8db2b0eb312ee164486be648d08e.jpg" width="500" height="277" /></a></p>    <p style="text-align:left;"><strong>5. <a title="jQuery Tutorial – Create a jQuery Menu Slider" href="/misc/goto?guid=4958190300030666399" rel="external nofollow" target="_blank">jQuery Tutorial – Create a jQuery Menu Slider</a></strong></p>    <p>In the following tutorial we are going to go through how to create a jQuery menu slider similar to the one used in our own website’s mega menu navigation (see “WordPress Plugins” menu item).<br /> <a href="/misc/goto?guid=4958190300030666399" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/27d6ffe97b41bad01a2fc0f1413e593b.jpg" width="500" height="244" /></a></p>    <p style="text-align:left;"><strong>6. <a title="Elastic Image Slideshow with Thumbnail Preview" href="/misc/goto?guid=4958319424612200726" rel="external nofollow" target="_blank">Elastic Image Slideshow with Thumbnail Preview</a></strong></p>    <p>Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.<br /> <a href="/misc/goto?guid=4958319424612200726" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/cbfdf973a410b54309735393d89761db.jpg" width="500" height="234" /></a></p>    <p style="text-align:left;"><strong>7. <a title="Chained AJAX Selects" href="/misc/goto?guid=4958319426147409045" rel="external nofollow" target="_blank">Chained AJAX Selects</a></strong></p>    <p>In today’s tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. We will describe the options server side with PHP, so it is easy for you to hook today’s example to a database.<br /> <a href="/misc/goto?guid=4958319426147409045" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/f08a666f69295fe9947cace711823a28.jpg" width="500" height="276" /></a></p>    <p style="text-align:left;"><strong>8. <a title="Flexible Slide-to-top Accordion" href="/misc/goto?guid=4958319427660854546" rel="external nofollow" target="_blank">Flexible Slide-to-top Accordion</a></strong></p>    <p>In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.<br /> <a href="/misc/goto?guid=4958319427660854546" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/ee218be1f2f83b2470f01c3fc8c18708.jpg" width="500" height="272" /></a></p>    <p style="text-align:left;"><strong>9. <a title="HTML5 File Uploads with jQuery" href="/misc/goto?guid=4958198973142197187" rel="external nofollow" target="_blank">HTML5 File Uploads with jQuery</a></strong></p>    <p>Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.<br /> <a href="/misc/goto?guid=4958198973142197187" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/8a6af1a5592f091065996c41669cabf6.jpg" width="500" height="275" /></a></p>    <p style="text-align:left;"><strong>10. <a title="Simple jQuery Filtering using Quicksand" href="/misc/goto?guid=4958319430608604728" rel="external nofollow" target="_blank">Simple jQuery Filtering using Quicksand</a></strong></p>    <p>Carrying on from the first part of our Simple jQuery Filtering Using jQuery article we’re now going to spice up the transitions a little using a jQuery plugin known as Quicksand. The core HTML markup and CSS styling from the first part of the article are going to stay the same so if you have not already done so I suggest downloading the source files before progressing.<br /> <a href="/misc/goto?guid=4958319430608604728" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/1c4cdc7ac29deaaaa0b079841a250cb6.jpg" width="500" height="311" /></a></p>    <p style="text-align:left;"><strong>11. <a title="Draggable Image Boxes Grid " href="/misc/goto?guid=4958202382327075956" rel="external nofollow" target="_blank">Draggable Image Boxes Grid </a></strong></p>    <p>Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.<br /> <a href="/misc/goto?guid=4958202382327075956" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/c3b319fa08ce73a2befe7836f318f99f.jpg" width="500" height="272" /></a></p>    <p style="text-align:left;"><strong>12. <a title="How to Block Adblock" href="/misc/goto?guid=4958319433569788723" rel="external nofollow" target="_blank">How to Block Adblock</a></strong></p>    <p>If you are a website owner, there is a pretty good chance that you rely on some form of advertising to pay for your hosting bills. And if you are lucky enough to have more than a few people visiting your site, you might even be able to pay yourself a supplement to your salary as a compensation for your hard work.<br /> <a href="/misc/goto?guid=4958319433569788723" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/fc6b51fcae9809f2a8a39be8cc11583e.jpg" width="500" height="272" /></a></p>    <p style="text-align:left;"><strong>13. <a title="Item Blur Effect with CSS3 and jQuery" href="/misc/goto?guid=4958319435076107190" rel="external nofollow" target="_blank">Item Blur Effect with CSS3 and jQuery</a></strong></p>    <p>Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.<br /> <a href="/misc/goto?guid=4958319435076107190" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/bd3443bd009a1eaad48a646e3cc12d11.jpg" width="500" height="272" /></a></p>    <p style="text-align:left;"><strong>14. <a title="How to Create a Slideshow Plugin with jQuery" href="/misc/goto?guid=4958186153176631892" rel="external nofollow" target="_blank">How to Create a Slideshow Plugin with jQuery</a></strong></p>    <p>There are hundreds of slideshow plugins out there, from all time favorites like Lightbox to the most advanced like Galleria. You might think, why make another one?. Well, most of us are using plugins like these on our websites, so why not use our own?<br /> <a href="/misc/goto?guid=4958186153176631892" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/3965e4066d9bd2eead59990e485f6125.jpg" width="500" height="302" /></a></p>    <p style="text-align:left;"><strong>15. <a title="How to Create a jQuery Image Cropping Plugin from Scratch " href="/misc/goto?guid=4958184464587206175" rel="external nofollow" target="_blank">How to Create a jQuery Image Cropping Plugin from Scratch </a></strong></p>    <p>Web applications need to provide easy-to-use solutions for uploading and manipulating rich content. This process can create difficulties for some users who have minimal photo editing skills. Cropping is one of the most used photo manipulation techniques, and this step-by-step tutorial will cover the entire development process of an image cropping plug-in for the jQuery JavaScript library.<br /> <a href="/misc/goto?guid=4958184464587206175" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/d283cb0f648973c4f363dfa6506b1a9d.jpg" width="500" height="292" /></a></p>    <p style="text-align:left;"><strong>16. <a title="Adding Weather to Your Site with jQuery and YQL" href="/misc/goto?guid=4958319439462732135" rel="external nofollow" target="_blank">Adding Weather to Your Site with jQuery and YQL</a></strong></p>    <p>If you’re working on a travel, news or other locally-oriented site, adding a display of the current weather conditions in the local area is the perfect touch. In the past, this was a relatively difficult task, involving server-side integration with weather APIs and more. Today, however, jQuery and YQL (a free web service offered by Yahoo) can be used to easily add a customized weather display to your site. In this article I’ll guide you through the process from start to finish.<br /> <a href="/misc/goto?guid=4958319439462732135" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/3dcd8c89ee2c3e5e3f849054b4f8ed6e.jpg" width="500" height="343" /></a></p>    <p style="text-align:left;"><strong>17. <a title="Shiny Knob Control with jQuery and CSS3" href="/misc/goto?guid=4958319440985978011" rel="external nofollow" target="_blank">Shiny Knob Control with jQuery and CSS3</a></strong></p>    <p>In this tutorial we will be writing a jQuery plugin for creating a shiny knob control. Aptly named knobKnob, this plugin will use CSS3 transformations and jQuery’s new event handling methods to give visitors of your website a new way of interactively choosing a value from a range.<br /> <a href="/misc/goto?guid=4958319440985978011" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/08f481a877c91045fbc0f6ff7f3efe0e.jpg" width="500" height="274" /></a></p>    <p style="text-align:left;"><strong>18. <a title="Tutorial: Getting Started With jQuery Animations" href="/misc/goto?guid=4958319442495772393" rel="external nofollow" target="_blank">Tutorial: Getting Started With jQuery Animations</a></strong></p>    <p>jQuery. No doubt you have heard about this popular JavaScript library. It has taken the throne of all the JavaScript libraries out there because of its many features and easy syntax. Today, I will show you one of the simpler uses of jQuery: you can animate things. this will be the focus of today’s tutorial.<br /> <a href="/misc/goto?guid=4958319442495772393" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/4cc69945981e2a3492ba7d7e4ebde328.jpg" width="500" height="294" /></a></p>    <p style="text-align:left;"><strong>19. <a title="Lateral On-Scroll Sliding with jQuery" href="/misc/goto?guid=4958319443992376363" rel="external nofollow" target="_blank">Lateral On-Scroll Sliding with jQuery</a></strong></p>    <p>After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.<br /> <a href="/misc/goto?guid=4958319443992376363" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/db6c9cff1de4a457d982a18808e34d02.jpg" width="500" height="268" /></a></p>    <p style="text-align:left;"><strong>20. <a title="Getting the most out of jQuery selectors" href="/misc/goto?guid=4958319445516026279" rel="external nofollow" target="_blank">Getting the most out of jQuery selectors</a></strong></p>    <p>A lot of developers who are new to jQuery get hung up by jQuery selectors. In this tutorial Jay Blanchard, author of the forthcoming book Applied jQuery, covers jQuery’s selector syntax, how to optimise jQuery selectors and how to apply more advanced selector combinations to your markup elements<br /> <a href="/misc/goto?guid=4958319445516026279" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/2200b14d54d7fcdb6323887c4e43f34f.jpg" width="500" height="229" /></a></p>    <p style="text-align:left;"><strong>21. <a title="Master Drag and Drop Technique using jQuery" href="/misc/goto?guid=4958319447012060089" rel="external nofollow" target="_blank">Master Drag and Drop Technique using jQuery</a></strong></p>    <p>Methods for developing drag and drop styles have been around for years. With the increase of programmers working for open source scripts like jQuery it’s not a surprise we are seeing an upheaval of these older methods. The JavaScript library is very adaptive and offers some major improvements to our new age web.<br /> <a href="/misc/goto?guid=4958319447012060089" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/5ba94f96cdf8ab1d01476ffef2145642.jpg" width="500" height="292" /></a></p>    <p style="text-align:left;"><strong>22. <a title="Typography Effects with CSS3 and jQuery" href="/misc/goto?guid=4958319448524610876" rel="external nofollow" target="_blank">Typography Effects with CSS3 and jQuery</a></strong></p>    <p>Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.<br /> <a href="/misc/goto?guid=4958319448524610876" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/04fcba33628f01ce04c4d9a820463e7b.jpg" width="500" height="249" /></a></p>    <p style="text-align:left;"><strong>23. <a title="How to Create Link Tooltips Using CSS3 and JQuery" href="/misc/goto?guid=4958186148947600303" rel="external nofollow" target="_blank">How to Create Link Tooltips Using CSS3 and JQuery</a></strong></p>    <p>We recently posted a tutorial on how to create script-free CSS3 tooltips… Today, we’re posting a script-enhanced version that’s SEO friendly and used a little jQuery magic to make it animate itself to the mouse position!<br /> <a href="/misc/goto?guid=4958186148947600303" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/d15589cf1262fc68bd4af1a3d061c2ea.jpg" width="500" height="245" /></a></p>    <p style="text-align:left;"><strong>24. <a title="Google Plus Style Animations with Jquery and CSS3" href="/misc/goto?guid=4958186151771141909" rel="external nofollow" target="_blank">Google Plus Style Animations with Jquery and CSS3</a></strong></p>    <p>Google plus given an awesome kick to user experience, specially circles UI animations. I feel it’s great and new definition to have user experience design. I have tried circle rotation animation effect with Jquery and CSS3. Just few lines of code applying CSS styles using jQuery methods like .addClass() and .animation(). Take a look at these live demos with modern brewers.<br /> <a href="/misc/goto?guid=4958186151771141909" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/66460a716745a026091113ea748e4e8c.jpg" width="500" height="321" /></a></p>    <p style="text-align:left;"><strong>25. <a title="Building a Website with PHP, MySQL and jQuery Mobile" href="/misc/goto?guid=4958194907811764917" rel="external nofollow" target="_blank">Building a Website with PHP, MySQL and jQuery Mobile</a></strong></p>    <p>In this two-part tutorial, we will be building a simple website with PHP and MySQL, using the Model-View-Controller (MVC) pattern. Finally, with the help of the jQuery Mobile framework, we will turn it into a touch-friendly mobile website, that works on any device and screen size.<br /> <a href="/misc/goto?guid=4958194907811764917" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/908aa4f767ab0b48145aea65ca1e421a.jpg" width="500" height="271" /></a></p>    <p style="text-align:left;"><strong>26. <a title="Geo Location with HTML5 and Jquery" href="/misc/goto?guid=4958186154575368816" rel="external nofollow" target="_blank">Geo Location with HTML5 and Jquery</a></strong></p>    <p>Last few days I have been working with HTML5 elements, it’s very interesting. This post explains you how to get geo location latitude and longitude values using Jquery. I found a geocode location script from html5demos.com and I have customized bit of code. It is useful you can built foursquare kind of location check out web application.<br /> <a href="/misc/goto?guid=4958186154575368816" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/20d698d962ce56021e83170090810b4b.jpg" width="500" height="299" /></a></p>    <p style="text-align:left;"><strong>27. <a title="jQuery Mobile Advanced Tutorial – RSS reader app " href="/misc/goto?guid=4958194907078768039" rel="external nofollow" target="_blank">jQuery Mobile Advanced Tutorial – RSS reader app </a></strong></p>    <p>Today’s tutorial is going to show you how you can use jQuery Mobile with PHP, MySQL and a bit of AJAX to build a small mobile web application.<br /> <a href="/misc/goto?guid=4958194907078768039" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/c76970fd4fb22e341c53daf228cc1939.jpg" width="500" height="281" /></a></p>    <p style="text-align:left;"><strong>28. <a title="Google Plus Style Drag and Drop adding Groups" href="/misc/goto?guid=4958319457278973413" rel="external nofollow" target="_blank">Google Plus Style Drag and Drop adding Groups</a></strong></p>    <p>Are you looking for Google plus style drag and drop adding friends in groups or circle. Google plus circle implementation so cool, same way I have tried similar user groups adding application with drag and drop effect using jquery and php. I hope it’s useful for your social media web projects.<br /> <a href="/misc/goto?guid=4958319457278973413" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/9c57f184f5cb41220351385a207a319d.jpg" width="500" height="302" /></a></p>    <p style="text-align:left;"><strong>29. <a title="Elastic Image Slideshow with Thumbnail Preview" href="/misc/goto?guid=4958319424612200726" rel="external nofollow" target="_blank">Elastic Image Slideshow with Thumbnail Preview</a></strong></p>    <p>Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.<br /> <a href="/misc/goto?guid=4958319424612200726" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/5e4a137ca39fe145745e024ed4ce269c.jpg" width="500" height="227" /></a></p>    <p style="text-align:left;"><strong>30. <a title="jQuery Tutorial – Adding Vertical Animation to the Slider Menu" href="/misc/goto?guid=4958319460254355714" rel="external nofollow" target="_blank">jQuery Tutorial – Adding Vertical Animation to the Slider Menu</a></strong></p>    <p>After our jQuery tutorial yesterday on creating a jQuery Slider Menu we have had several requests on how to modify the jQuery code to scroll the slider images vertically instead of horizontally.<br /> <a href="/misc/goto?guid=4958319460254355714" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/441cc54f7808173f6ea9a7b5965ac31f.jpg" width="500" height="236" /></a></p>    <p style="text-align:left;"><strong>31. <a title="Scrollbar Visibility with jScrollPane" href="/misc/goto?guid=4958319461762177438" rel="external nofollow" target="_blank">Scrollbar Visibility with jScrollPane</a></strong></p>    <p>Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in 非死book is an example for such a behavior. Today we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.<br /> <a href="/misc/goto?guid=4958319461762177438" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/2a77ec7997b1d35308a520d2007216bc.jpg" width="500" height="270" /></a></p>    <p style="text-align:left;"><strong>32. <a title="Submit Form without Refreshing Page with Jquery" href="/misc/goto?guid=4958319463280069399" rel="external nofollow" target="_blank">Submit Form without Refreshing Page with Jquery</a></strong></p>    <p>This post helps you to submit your form without refreshing page. In this tutorial I will show you how simple it is to do using jQuery form plugin just five lines of JavaScript code, no need to post data string values via ajax. Explained collaboration with validate plugin for implementing form field validations.<br /> <a href="/misc/goto?guid=4958319463280069399" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/a9983d5cbceca7b2cfe53a810a3a397b.jpg" width="500" height="258" /></a></p>    <p style="text-align:left;"><strong>33. <a title="Display your Favorite Tweets using PHP and jQuery" href="/misc/goto?guid=4958184466026460263" rel="external nofollow" target="_blank">Display your Favorite Tweets using PHP and jQuery</a></strong></p>    <p>If you have a 推ter account, you oftentimes find yourself looking for a way to display your latest tweets on your website or blog. This is pretty much a solved problem. There are jQuery plugins, PHP classes and tutorials that show you how to do this.<br /> <a href="/misc/goto?guid=4958184466026460263" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/eb78a61255722fa3325d680acd64abda.jpg" width="500" height="263" /></a></p>    <p style="text-align:left;"><strong>34. <a title="Ajax Image Upload without Refreshing Page using Jquery." href="/misc/goto?guid=4958188728358407509" rel="external nofollow" target="_blank">Ajax Image Upload without Refreshing Page using Jquery.</a></strong></p>    <p>Are you looking for ajax file/image upload and preview without refreshing page using Jquery. I had implemented this ajax form submitting using jquery.form plugin and used Arun Shekar’s image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos.<br /> <a href="/misc/goto?guid=4958188728358407509" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/e1a6a521a60c87868a7d7abee8d9a069.jpg" width="500" height="321" /></a></p>    <p style="text-align:left;"><strong>35. <a title="jQuery Tutorial Animation: How to show and hide text." href="/misc/goto?guid=4958319467665414050" rel="external nofollow" target="_blank">jQuery Tutorial Animation: How to show and hide text.</a></strong></p>    <p>This tutorial will go over a smooth and affective way to show or hide text with a slide-up and slide-down effect utilizing jQuery.<br /> <a href="/misc/goto?guid=4958319467665414050" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/0e28a8d02e43b6b9f1524f2d0c9b2d42.jpg" width="500" height="258" /></a></p>    <p style="text-align:left;"><strong>36. <a title="Bubble Slideshow Effect with jQuery" href="/misc/goto?guid=4958184467439028609" rel="external nofollow" target="_blank">Bubble Slideshow Effect with jQuery</a></strong></p>    <p>Today we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow. And as the code will be completely modular, you will be able to easily use it and modify it.<br /> <a href="/misc/goto?guid=4958184467439028609" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/ada306b53a090c164dcd7aecc3f05111.jpg" width="500" height="275" /></a></p>    <p style="text-align:left;"><strong>37. <a title="jQuery uploadify with PHP " href="/misc/goto?guid=4958319470623980774" target="_blank">jQuery uploadify with PHP<br /> </a></strong></p>    <p>jQuery uploadify is a powerful multiple file upload utility. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.<br /> In this tutorial, we will go through the process of using uploadify as the front uploader, and using PHP as the server-side language to store files in the serve. At the end of tutorial, you should be able to use uploadify to your needs, and you are free to download the uploadify example too.<br /> <a href="/misc/goto?guid=4958319470623980774" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/cdf324ce642dcf5ec00f42c3f52a051d.jpg" width="500" height="261" /></a></p>    <p style="text-align:left;"><strong>38. <a title="Responsive Image Gallery with Thumbnail Carousel" href="/misc/goto?guid=4958192496357847873" rel="external nofollow" target="_blank">Responsive Image Gallery with Thumbnail Carousel</a></strong></p>    <p>Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by 推ter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.<br /> <a href="/misc/goto?guid=4958192496357847873" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/9e67806e8be15b6ab54fa6212dcee6c4.jpg" width="500" height="269" /></a></p>    <p style="text-align:left;"><strong>39. <a title="Intriguing animate-on-scroll effect – jQuery tutorial" href="/misc/goto?guid=4958319473572744266" rel="external nofollow" target="_blank">Intriguing animate-on-scroll effect – jQuery tutorial</a></strong></p>    <p>I suppose that I was not the only one to become speechless in front of the Nizo for iPhone website.<br /> In this tutorial we try to recreate the intriguing scrolling effect. We’ll go for simplicity : 5 objects to animate and linear movement, no easing. The basis that opens the door for further elaboration.<br /> <a href="/misc/goto?guid=4958319473572744266" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/a6ed4d58c9e9217637de4f5d1983236d.jpg" width="500" height="300" /></a></p>    <p style="text-align:left;"><strong>40. <a title="WebPlus tutorial: jQuery tab slideout contact form " href="/misc/goto?guid=4958319475096761349" rel="external nofollow" target="_blank">WebPlus tutorial: jQuery tab slideout contact form </a></strong></p>    <p>This plugin allows you to easily add a sliding tab to your WebPlus project. The tab can contain anything. In our case we will include an pointing to a generic web form.<br /> <a href="/misc/goto?guid=4958319475096761349" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/34d68ed8720489afb254e780040b9301.jpg" width="500" height="307" /></a></p>    <p style="text-align:left;"><strong>41. <a title="Image Upload and Cropping with PHP and Jquery" href="/misc/goto?guid=4958184470278959742" rel="external nofollow" target="_blank">Image Upload and Cropping with PHP and Jquery</a></strong></p>    <p>Image cropping is the most important and required part in social media projects. In this post my friend Arun Kumar Shekar had implemented image cropping functionalities such as upload image file into physical location, cropping image using jquery and resizing image into small resolution. Hope you like this thanks!<br /> <a href="/misc/goto?guid=4958184470278959742" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/6523e822da409f529abd17ae769c899d.jpg" width="500" height="259" /></a></p>    <p style="text-align:left;"><strong>42. <a title="Having Fun With CSS3: Spinning Newspapers" href="/misc/goto?guid=4958184468847354558" rel="external nofollow" target="_blank">Having Fun With CSS3: Spinning Newspapers</a></strong></p>    <p>Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice.<br /> <a href="/misc/goto?guid=4958184468847354558" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/0c1de4a8db19ceeff37b0c128bad1f84.jpg" width="500" height="272" /></a></p>    <p style="text-align:left;"><strong>43. <a title="How to Create Sleek Sliding Box Effect With jQuery" href="/misc/goto?guid=4958189252159686815" rel="external nofollow" target="_blank">How to Create Sleek Sliding Box Effect With jQuery</a></strong></p>    <p>Today we’re going to create some sliding boxes effects built with jQuery and some CSS. Throughout this tutorial I’ll explain every line of used code with details, Hope you will enjoy this understand it easily.<br /> <a href="/misc/goto?guid=4958189252159686815" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/e7e11c69a3a1b91e76f510b870586761.jpg" width="500" height="261" /></a></p>    <p style="text-align:left;"><strong>44. <a title="Portfolio Image Navigation with jQuery" href="/misc/goto?guid=4958184461748979700" rel="external nofollow" target="_blank">Portfolio Image Navigation with jQuery</a></strong></p>    <div style="text-align:center;margin:0px;float:none;">     <ins style="border-bottom:medium none;position:relative;border-left:medium none;padding-bottom:0px;margin:0px;padding-left:0px;width:336px;padding-right:0px;display:inline-table;height:280px;visibility:visible;border-top:medium none;border-right:medium none;padding-top:0px;">      <ins style="border-bottom:medium none;position:relative;border-left:medium none;padding-bottom:0px;margin:0px;padding-left:0px;width:336px;padding-right:0px;display:block;height:280px;visibility:visible;border-top:medium none;border-right:medium none;padding-top:0px;" id="aswift_1_anchor"></ins>     </ins>    </div>    <p>Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.<br /> <a href="/misc/goto?guid=4958184461748979700" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/9a8c80d0c7de5bc4bfef05ecef35c5f8.jpg" width="500" height="269" /></a></p>    <p style="text-align:left;"><strong>45. <a title="Create Multiple Pop-up Divs using the jQuery prev() Method" href="/misc/goto?guid=4958190304246231236" rel="external nofollow" target="_blank">Create Multiple Pop-up Divs using the jQuery prev() Method</a></strong></p>    <p>This tutorial is an update on a previous Creative Individual jQuery tutorial – Create a Pop-up div in jQuery. The first tutorial showed you how to create a very simple pop-up div, but after a few requests in the comments, I felt it was important to update the technique so that multiple pop-up divs could be created without duplicating the code unnecessarily.<br /> <a href="/misc/goto?guid=4958190304246231236" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/b23e9f618595284c196a66b16d21a004.jpg" width="500" height="311" /></a></p>    <p style="text-align:left;"><strong>46. <a title="Live Design Changing with Jquery" href="/misc/goto?guid=4958319483830473566" rel="external nofollow" target="_blank">Live Design Changing with Jquery</a></strong></p>    <p>In this post I want to explain how to change design colors like 推ter UI setting. I had posted the same long days back, but now added user control system to manage own template design. It’s useful feature for your web projects to providing option to the end-user can customize his page template. This script divided into four parts Javascript, PHP, CSS and HTML+PHP.<br /> <a href="/misc/goto?guid=4958319483830473566" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/e542488641772922d12c1eaac71bca04.jpg" width="500" height="267" /></a></p>    <p style="text-align:left;"><strong>47. <a title="Animated Text and Icon Menu with jQuery" href="/misc/goto?guid=4958184460336351193" rel="external nofollow" target="_blank">Animated Text and Icon Menu with jQuery</a></strong></p>    <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.<br /> <a href="/misc/goto?guid=4958184460336351193" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/1b7be2bd59479789c45c5c9a0f524241.jpg" width="500" height="268" /></a></p>    <p style="text-align:left;"><strong>48. <a title="非死book like jQuery face recognition tutorial and demo" href="/misc/goto?guid=4958190304961448091" rel="external nofollow" target="_blank">非死book like jQuery face recognition tutorial and demo</a></strong></p>    <p>非死book influences our life each and everyday. One of the features which has contributed enormously to make 非死book appealing to even to its average users is Photos.<br /> <a href="/misc/goto?guid=4958190304961448091" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/044faadcf0e2e952a09460941c35d20b.jpg" width="500" height="228" /></a></p>    <p style="text-align:left;"><strong>49. <a title="Making a Simple Tweet to Download System" href="/misc/goto?guid=4958319488217197633" rel="external nofollow" target="_blank">Making a Simple Tweet to Download System</a></strong></p>    <p>推ter is undoubtedly a hugely popular social network. One of the keys to its success is its simple and powerful API, which opens the doors to countless novel ways for you to use the service.<br /> <a href="/misc/goto?guid=4958319488217197633" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/f48a322cc7760dc75758c7ec916755d3.jpg" width="500" height="271" /></a></p>    <p style="text-align:left;"><strong>50. <a title="Fullscreen Slideshow with HTML5 Audio and jQuery" href="/misc/goto?guid=4958184458914217857" rel="external nofollow" target="_blank">Fullscreen Slideshow with HTML5 Audio and jQuery</a></strong></p>    <p>In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.<br /> <a href="/misc/goto?guid=4958184458914217857" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/868d01f31e33e9f74481cf015cfc3793.jpg" width="500" height="269" /></a></p>    <p style="text-align:left;"><strong>51. <a title="Shutter Effect Portfolio with jQuery and Canvas" href="/misc/goto?guid=4958319491171826145" rel="external nofollow" target="_blank">Shutter Effect Portfolio with jQuery and Canvas</a></strong></p>    <p>In today’s tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.<br /> <a href="/misc/goto?guid=4958319491171826145" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/0dafcf33b94dab51598e051eb04c8f17.jpg" width="617" height="337" /></a></p>    <p style="text-align:left;"><strong>52. <a title="Generating Files with JavaScript" href="/misc/goto?guid=4958319492674107895" rel="external nofollow" target="_blank">Generating Files with JavaScript</a></strong></p>    <p>When building a web application, you oftentimes need to give users the ability to download a piece of data as a file. It could be a backup of configuration settings, reports, or other piece of information that is generated dynamically.<br /> <a href="/misc/goto?guid=4958319492674107895" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/7b2454391797a2f9c1efde9b682b8db2.jpg" width="500" height="271" /></a></p>    <p style="text-align:left;"><strong>53. <a title="Image Wall with jQuery" href="/misc/goto?guid=4958319494176248546" rel="external nofollow" target="_blank">Image Wall with jQuery</a></strong></p>    <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 when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.<br /> <a href="/misc/goto?guid=4958319494176248546" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/0024cd5d84f2759030df8937ffdbd813.jpg" width="500" height="269" /></a></p>    <p style="text-align:left;"><strong>54. <a title="非死book Wall Script 3.0 with PHP and Jquery" href="/misc/goto?guid=4958319495683033281" rel="external nofollow" target="_blank">非死book Wall Script 3.0 with PHP and Jquery</a></strong></p>    <p>非死book wall script with expanding URLs one of the popular post on 9lessons. It is just collaboration of my previous jquery articles. Recent days I received lots of requests from my readers that asked to me how to display old updates. So that I have decided to release new version with user control support. This script very easy to install few lines of code changes, take a quick look at following steps.<br /> <a href="/misc/goto?guid=4958319495683033281" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/8ea15c596683dabfe7e5938dc5ebc27c.jpg" width="500" height="293" /></a></p>    <p style="text-align:left;"><strong>55. <a title="Tutorial: Creating A Sticky Sidebar Using jQuery" href="/misc/goto?guid=4958319497190643342" rel="external nofollow" target="_blank">Tutorial: Creating A Sticky Sidebar Using jQuery</a></strong></p>    <p>Today, I will be showing how to create a jQuery sticky sidebar script. Now, I’m sure many of you have a question: Why can’t I just use “position:fixed”?<br /> <a href="/misc/goto?guid=4958319497190643342" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/1430eafed9db4a9975a6a492f89df4ce.jpg" width="500" height="251" /></a></p>    <p style="text-align:left;"><strong>56. <a title="Creating a css3 and jQuery clock" href="/misc/goto?guid=4958201670308818782" rel="external nofollow" target="_blank">Creating a css3 and jQuery clock</a></strong></p>    <p>In today’s short tutorial I would like to share a simple jQuery and css3 clock.<br /> We will simply create a clock image in photoshop and provide different images for each hand. A jQuery script will update the rotate position every 1000 millisecond, therefore creating a rotating effect on each of the three hands.<br /> <a href="/misc/goto?guid=4958201670308818782" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/fc9231cd4707e5d8437041eb9ebcf749.jpg" width="500" height="249" /></a></p>    <p style="text-align:left;"><strong>57. <a title="Live Table Edit, Delete with Pagination using Jquery" href="/misc/goto?guid=4958319500137160982" rel="external nofollow" target="_blank">Live Table Edit, Delete with Pagination using Jquery</a></strong></p>    <p>This post is a collaboration of my previous popular posts such as live table data edit, delete records with pagination using Jquery, Ajax and PHP. I had implemented this using Jquery .live() function and DOM event handler .stopImmediatePropagation(). This script helps you to instantly modify or update the table data.<br /> <a href="/misc/goto?guid=4958319500137160982" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/ccfa7b448a2f55896c9b840664533f8f.jpg" width="500" height="220" /></a></p>    <p style="text-align:left;"><strong>58. <a title="jQuery character counter" href="/misc/goto?guid=4958319501643608695" rel="external nofollow" target="_blank">jQuery character counter</a></strong></p>    <p>In today’s tutorial we are going to create a character counter that will display a feedback to the user on the number of remaining characters that they are allowed to enter<br /> <a href="/misc/goto?guid=4958319501643608695" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/50639b986c44d302bd3055e8d6034490.jpg" width="500" height="248" /></a></p>    <p style="text-align:left;"><strong>59. <a title="Photobooth with PHP, jQuery and CSS3" href="/misc/goto?guid=4958200747628173152" rel="external nofollow" target="_blank">Photobooth with PHP, jQuery and CSS3</a></strong></p>    <p>In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.<br /> <a href="/misc/goto?guid=4958200747628173152" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/273cbe0bd4503e4b1b983603404b2f6d.jpg" width="500" height="270" /></a></p>    <p style="text-align:left;"><strong>60. <a title="Rotating Image Slider with jQuery" href="/misc/goto?guid=4958184844631788595" rel="external nofollow" target="_blank">Rotating Image Slider with jQuery</a></strong></p>    <p>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.<br /> <a href="/misc/goto?guid=4958184844631788595" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/238df3fc0c561aeba87473c2848e5834.jpg" width="500" height="271" /></a></p>    <p style="text-align:left;"><strong>61. <a title="Photoflip slideshow effect with jQuery" href="/misc/goto?guid=4958319506073528219" rel="external nofollow" target="_blank">Photoflip slideshow effect with jQuery</a></strong></p>    <p>In today’s short tutorial we will create a slideshow from our previous Creating a css3 and jQuery photoflip tutorial you can view it here<br /> <a href="/misc/goto?guid=4958319506073528219" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/0c18ae5197ee4a9a63e73141f511005b.jpg" width="500" height="328" /></a></p>    <p style="text-align:left;"><strong>62. <a title="Drag and Drop Template Management System with Jquery" href="/misc/goto?guid=4958319507592240967" rel="external nofollow" target="_blank">Drag and Drop Template Management System with Jquery</a></strong></p>    <p>I have been developing Template (User Interface) management system with drag and drop panel support for my future project. In this post I want to explain how to design database tables and implementing grids drag and drop usability with jqueryUI plugin. Using this system your web project will prove a choice to the end-user, they can manage their own template interface. Take a look at this live demo<br /> <a href="/misc/goto?guid=4958319507592240967" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/ec07a665a63705dbcbdf6e9f63048c05.jpg" width="500" height="219" /></a></p>    <p style="text-align:left;"><strong>63. <a title="Making a Custom 非死book Wall with jQuery Templates" href="/misc/goto?guid=4958319509098178433" rel="external nofollow" target="_blank">Making a Custom 非死book Wall with jQuery Templates</a></strong></p>    <p>In this tutorial, we are going to create our own version of 非死book’s wall. We will be using 非死book’s Graph API with jQuery, and the template plugin. The jQuery.tmpl plugin will allow us to define templates within our page, and convert the posts we’ve obtained from the API into a real HTML page.<br /> <a href="/misc/goto?guid=4958319509098178433" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/bdcd0aee966aa735da96beade7384ade.jpg" width="500" height="274" /></a></p>    <p style="text-align:left;"><strong>64. <a title="Simon’s Google Doodle – HTML5 + JS jQuery Game" href="/misc/goto?guid=4958319510600533204" rel="external nofollow" target="_blank">Simon’s Google Doodle – HTML5 + JS jQuery Game</a></strong></p>    <p>Dude, you’ve heard a lot about Google doodles haven’t you? What about that Pacman one? It is just addictive. Company owners know how a funny game and unlimited search powers could be dangerous for productivity. And how it can be a marketing boost. The most amazing thing is that we can create our own addictive HTML game. Actually, this is why we are here today. With this tutorial you’ll see how to use some of JavaScript and HTML capabilities to build simple yet funny games.<br /> <a href="/misc/goto?guid=4958319510600533204" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/b58ded42ec2774baae3130405be18754.jpg" width="500" height="263" /></a></p>    <p style="text-align:left;"><strong>65. <a title="Countdown to launch page" href="/misc/goto?guid=4958319512110935887" rel="external nofollow" target="_blank">Countdown to launch page</a></strong></p>    <p>It is always a good idea to put up a pretty page to publicize your launch date before you launch a product / website this can create a mighty following even before your launch your website / product.<br /> <a href="/misc/goto?guid=4958319512110935887" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/425261c77be288b09546784bcb3a10ad.jpg" width="500" height="246" /></a></p>    <p style="text-align:left;"><strong>66. <a title="Live Table Edit with Jquery and Ajax" href="/misc/goto?guid=4958319513616909688" rel="external nofollow" target="_blank">Live Table Edit with Jquery and Ajax</a></strong></p>    <p>I love Jquery framework, feels that we can do awesome things. Let’s take a look at how to implement live table edit with Jquery and real time database update using Ajax. This is an interesting concept playing with DOM objects. You know that majority of readers had requested this tutorial, hope you guys like it!<br /> <a href="/misc/goto?guid=4958319513616909688" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/53f17b5060bfa14e88324095bcba8f20.jpg" width="500" height="182" /></a></p>    <p style="text-align:left;"><strong>67. <a title="Better Check Boxes with jQuery and CSS" href="/misc/goto?guid=4958319515128485646" rel="external nofollow" target="_blank">Better Check Boxes with jQuery and CSS</a></strong></p>    <p>In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.<br /> <a href="/misc/goto?guid=4958319515128485646" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/b53e9a0722528c6e37ce51dea18480a6.jpg" width="500" height="272" /></a></p>    <p style="text-align:left;"><strong>68. <a title="Moving Boxes Content with jQuery" href="/misc/goto?guid=4958319516636494627" rel="external nofollow" target="_blank">Moving Boxes Content with jQuery</a></strong></p>    <p>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.<br /> <a href="/misc/goto?guid=4958319516636494627" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/677a38a172ab2d7b6210ffcb3a4d5eae.jpg" width="500" height="270" /></a></p>    <p style="text-align:left;"><strong>69. <a title="Creating a tweet / share system" href="/misc/goto?guid=4958319518153073869" rel="external nofollow" target="_blank">Creating a tweet / share system</a></strong></p>    <p>With the advent of social networking sites the standards of web development have really improved, Sharing what is on your mind can take less than 140 characters and more for other sites like 非死book and the new kid on the block google plus<br /> <a href="/misc/goto?guid=4958319518153073869" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/63fb221e94c669efedd16ffc9eba8365.jpg" width="500" height="250" /></a></p>    <p style="text-align:left;"><strong>70. <a title="Making a Flickr-powered Slideshow" href="/misc/goto?guid=4958319519650038578" rel="external nofollow" target="_blank">Making a Flickr-powered Slideshow</a></strong></p>    <p>Today we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.<br /> <a href="/misc/goto?guid=4958319519650038578" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/919b917f8e8335482607fbdd12c54482.jpg" width="500" height="276" /></a></p>    <p style="text-align:left;"><strong>71. <a title="jQuery Tutorial – Create a Flexible Data Heat Map" href="/misc/goto?guid=4958319521160403359" rel="external nofollow" target="_blank">jQuery Tutorial – Create a Flexible Data Heat Map</a></strong></p>    <p>Add more excitement to data tables using jQuery and conditional formatting to generate flexible data “heat maps”.<br /> <a href="/misc/goto?guid=4958319521160403359" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/e4d143fdc29d6914f74bce8818b47085.jpg" width="500" height="250" /></a></p>    <p style="text-align:left;"><strong>72. <a title="How to Make Auto-Advancing Slideshows" href="/misc/goto?guid=4958192489286535645" rel="external nofollow" target="_blank">How to Make Auto-Advancing Slideshows</a></strong></p>    <p>One of the most requested improvements over the tutorials presented on this site, when it comes to slideshows, is the ability to have the slides advance automatically. It is actually not that difficult to achieve this effect, and to demonstrate it, in this short tutorial we are going to make our HTML5 Slideshow auto advance with a few lines of jQuery.<br /> <a href="/misc/goto?guid=4958192489286535645" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/510ee7ad301cdb157c2758dc6bdd0d39.jpg" width="500" height="273" /></a></p>    <p style="text-align:left;"><strong>73. <a title="Tripping the DOM fantastic with jQuery" href="/misc/goto?guid=4958319421662940814" rel="external nofollow" target="_blank">Tripping the DOM fantastic with jQuery</a></strong></p>    <p>Jay Blanchard, author of the book Applied jQuery, explains how to work with elements in your markup that are either ancestors or descendants of an HTML element that you have selected. Here he focuses on the DOM tree traversal methods<br /> <a href="/misc/goto?guid=4958319421662940814" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/58f81d858e21f70831534c030b5a53a8.jpg" width="500" height="274" /></a></p>    <p style="text-align:left;"><strong>74. <a title="Multiple Ajax Requests with Jquery" href="/misc/goto?guid=4958319525567858756" rel="external nofollow" target="_blank">Multiple Ajax Requests with Jquery</a></strong></p>    <p>Last few days I have been working with APIs for instant search results, I had an idea to implement a super instant search with multiple APIs like 推ter, 油Tube, yahoo and bing. But jquery older versions doesn’t support multiple ajax call-backs, luckily I had found Jquery 1.5 has released a new method called $.when finally I have developed super fast search at kokkoroko.com.<br /> <a href="/misc/goto?guid=4958319525567858756" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/798bba3be1e55ef2de4f31fa833f39e6.jpg" width="500" height="229" /></a></p>    <p style="text-align:left;"><strong>75. <a title="Image map with CSS3 & jQuery tooltips" href="/misc/goto?guid=4958319527076287164" rel="external nofollow" target="_blank">Image map with CSS3 & jQuery tooltips</a></strong></p>    <p>Tooltips can play a big role in your web designs and that isn’t new anymore. Just use them correctly and they will help you improve user experience.<br /> <a href="/misc/goto?guid=4958319527076287164" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/feb6944ea324c053feee26af6892e0b9.jpg" width="500" height="244" /></a></p>    <p style="text-align:left;"><strong>76. <a title="Expanding Image Menu with jQuery" href="/misc/goto?guid=4958184591020494163" rel="external nofollow" target="_blank">Expanding Image Menu with jQuery</a></strong></p>    <p>In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat effect.<br /> <a href="/misc/goto?guid=4958184591020494163" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/135f0ec4c4052f059a5bac5f0602db93.jpg" width="500" height="271" /></a></p>    <p style="text-align:left;"><strong>77. <a title="jQuery Parallax Tutorial – Animated Header Background" href="/misc/goto?guid=4958188531590251782" rel="external nofollow" target="_blank">jQuery Parallax Tutorial – Animated Header Background</a></strong></p>    <p>I think we all agree that the parallax effect can get you that WOW factor when someone visits your website. So, I thought i would show you a live jQuery parallax example. In this tutorial i will explain in detail how to create your own parallax background effect using jQuery to manage the animation aspects of the banner which you could use for your header background.<br /> <a href="/misc/goto?guid=4958188531590251782" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/d2a3d9a845e6276988bc3915743d5237.jpg" width="500" height="220" /></a></p>    <p style="text-align:left;"><strong>78. <a title="非死book Graph API Connect with PHP and Jquery" href="/misc/goto?guid=4958319531508660822" rel="external nofollow" target="_blank">非死book Graph API Connect with PHP and Jquery</a></strong></p>    <p>Last few days I have been working on labs.9lessons to connecting 非死book Graph API access token system, it’s very interesting. This post I had presented in easy way to connect and read the 非死book home timeline with PHP and Jquery. Explained how to store 非死book token and user id hope you like it. Thanks !<br /> <a href="/misc/goto?guid=4958319531508660822" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/9d8b891be19c10eb1bd1233b429c0252.jpg" width="500" height="278" /></a></p>    <p style="text-align:left;"><strong>79. <a title="Animated Content Menu with jQuery" href="/misc/goto?guid=4958184593852408913" rel="external nofollow" target="_blank">Animated Content Menu with jQuery</a></strong></p>    <p>Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.<br /> <a href="/misc/goto?guid=4958184593852408913" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/7cf0ad6e9ef97bb6a49d6779876f06b6.jpg" width="500" height="269" /></a></p>    <p style="text-align:left;"><strong>80. <a title="Overlay-like Effect with jQuery" href="/misc/goto?guid=4958184596682688557" rel="external nofollow" target="_blank">Overlay-like Effect with jQuery</a></strong></p>    <p>Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.<br /> <a href="/misc/goto?guid=4958184596682688557" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/e496e208af4d32fadd2ebdc9bf38e9c1.jpg" width="500" height="269" /></a></p>    <p style="text-align:left;"><strong>81. <a title="Gravity Registration Form with Jquery" href="/misc/goto?guid=4958319535915773515" rel="external nofollow" target="_blank">Gravity Registration Form with Jquery</a></strong></p>    <p>Sometimes registration form decides your web application success rate, I feel the first step(registration) should be less fields and eye catching it will surely impress the users. I had designed a new style registration form with gravitational effect. I hope you like this. Thank you!<br /> <a href="/misc/goto?guid=4958319535915773515" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/e4d686d91185005cf91d54e0cf253c6b.jpg" width="500" height="213" /></a></p>    <p style="text-align:left;"><strong>82. <a title="Fullscreen Gallery with Thumbnail Flip" href="/misc/goto?guid=4958190297818283274" rel="external nofollow" target="_blank">Fullscreen Gallery with Thumbnail Flip</a></strong></p>    <p>In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.<br /> <a href="/misc/goto?guid=4958190297818283274" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/75561764d0056d6a3220f7d7dbbb2e4d.jpg" width="500" height="269" /></a></p>    <p style="text-align:left;"><strong>83. <a title="Thumbnails Preview Slider with jQuery" href="/misc/goto?guid=4958190299296658579" rel="external nofollow" target="_blank">Thumbnails Preview Slider with jQuery</a></strong></p>    <p>In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.<br /> <a href="/misc/goto?guid=4958190299296658579" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/e2c28a8dfce0d4f4aeb181d6e3a5c046.jpg" width="500" height="270" /></a></p>    <p style="text-align:left;"><strong>84. <a title="Sweet Thumbnails Preview Gallery" href="/misc/goto?guid=4958184839041774211" rel="external nofollow" target="_blank">Sweet Thumbnails Preview Gallery</a></strong></p>    <p>In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.<br /> <a href="/misc/goto?guid=4958184839041774211" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/4fa29ff4842ae52a71b9db3b5354a440.jpg" width="500" height="270" /></a></p>    <p style="text-align:left;"><strong>85. <a title="Animated Form Switching with jQuery" href="/misc/goto?guid=4958190303510262447" rel="external nofollow" target="_blank">Animated Form Switching with jQuery</a></strong></p>    <p>In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.<br /> <a href="/misc/goto?guid=4958190303510262447" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Tutorials 2011" alt="2011年 85 个最好的jQuery开发指南" src="https://simg.open-open.com/show/4763ef2db499d85ecd7ed855339d4f02.jpg" width="500" height="271" /></a></p>    <br /> 转自：    <a href="/misc/goto?guid=4958319543205568325" target="_blank">http://webdesign14.com/85-best-jquery-tutorials-2011/</a>