18個最新最給力的jQuery教程分享
新年伊始，相信廣大的程序員們也都有了自己的新年計劃。在新的一年里，你為自己定下了怎樣的目標呢?本文選取了在2011年最給力的18個jQuery的教程分享給大家，希望大家在新年開始能學習到不少實用的jQuery技術(shù)知識。
1、利用視覺差效果的幻燈圖片播放器
在這篇教程中(http://tympanus.net/codrops/2011/01/03/parallax-slider/)，將介紹如何利用人的視覺差的原理，設(shè)計一個向左滑動的幻燈圖片播放器，其中當用戶在瀏覽圖片時，會感覺到圖片和背景都在向左快速滑動，效果很眩。
2、表單切換的動畫效果
在這篇教程中(http://tympanus.net/codrops/2011/01/06/animated-form-switching/)，你將會學習到如何在用戶填寫表單時(一般來說都會有若干步)切換幾種不同的表單的效果，這可以讓用戶在表單切換時，感覺到依舊是在同一個頁面中的變換效果。實現(xiàn)其實很簡單，都是在一個頁面容器中進行了動畫的變換，只不過是在表單的尺寸大小都變換了。
3、一個jQuery實現(xiàn)的帶有預(yù)覽縮略圖的圖片庫效果
在這篇教程中(http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/)，你將會學習到如何用jQuery實現(xiàn)一個向左滑動的圖片瀏覽功能，但這個跟普通的圖片瀏覽功能有點不同的時，當用戶點上圖的下面那些小圓點的時候，能夠預(yù)覽到還沒查看的圖片的小的預(yù)覽圖，這樣將會方便用戶決定是否繼續(xù)去查看，如果愿意查看的話，則點擊縮略圖就可以打開完整的圖片了。
4、一個特別的引號顯示效果
在這篇教程中(http://www.marcofolio.net/webdesign/jquery_quickie_smooth_animated_quote_display.html)，你將會學習到，如何把一段文字放在一個如上圖顯示的特別的雙引號之內(nèi)。
5、閱讀jQuery代碼后的收獲
Paul Irish這位工程師，致力與jQuery和Google Chrome的研究，做了一個視頻講解，(http://net.tutsplus.com/articles/lectures/11-more-things-i-learned-from-the-jquery-source/)，在其中講解了他從jQuery代碼中的閱讀所得。
6、用jQuery實現(xiàn)一個HTML5的幻燈自動播放效果
在HTML5中，播放圖片時可以設(shè)置自動播放的屬性，而在本篇教程中(http://tutorialzine.com/2011/01/how-to-make-auto-advancing-slideshows/)，講解了如何使用jQuery去實現(xiàn)這個效果。
#p#
7、使用jQuery和CSS創(chuàng)建一個下拉菜單
在本教程中(http://onebiginternet.com/2011/01/how-to-create-a-drop-down-menu-using-jquery-and-css/#)，將會學習如何使用jQuery和CSS去簡單實現(xiàn)一個下拉菜單的效果。
8、使用jQuery去實現(xiàn)一個很cool的菜單導(dǎo)航欄效果
在本教程中(http://line25.com/tutorials/how-to-create-a-cool-animated-menu-with-jquery)，你將會從開始一步步學習如何使用photoshop及jQuery實現(xiàn)一個很cool的菜單導(dǎo)航，本教程的一大特色是手把手教你制作整個菜單圖片的全過程，十分詳細。
9、使用jQuery去展示你最喜歡的音樂唱片
在這篇教程中(http://line25.com/tutorials/display-your-favourite-music-with-jquery-last-fm)，你將會學習到如何使用jQuery及一個很好的jQuery插件lastfmrecords(http://jeroensmeets.net/wordpress/lastfmrecords/)去打造一個能展示你最喜歡的音樂唱片的效果。其中，如上圖所示，當你點最喜歡的唱片時，會有一個唱片自動向右滑出的效果。
10、使用php和jQuery實現(xiàn)一個digg url的效果
在本教程中(http://superdit.com/2011/01/18/digg-like-url-submitter-using-jquery-and-php/)，將會學習如何使用php和jQuery去實現(xiàn)一個類似digg的效果，即當用戶提交一個網(wǎng)頁的地址后，會自動去獲得該網(wǎng)頁的內(nèi)容，并將其關(guān)鍵摘要顯示出來。
11、簡單的jQuery實現(xiàn)的Flickr Tooltips菜單
在本教程中(http://superdit.com/2011/01/26/simple-jquery-flickr-style-tooltip-menu/)，將會學習如何用jQuery去實現(xiàn)一個Flickr風格的下拉菜單，其特色是每個菜單的前面有圖片的提示。
12、一個用jQuery實現(xiàn)的位置變換效果
在本教程中(http://superdit.com/2011/01/22/shuffle-between-images-using-jquery/)，將學習到如何使用jQuery實現(xiàn)一個有趣的圖片位置變換的效果。
#p#
13、用jQuery實現(xiàn)拉桿條去變換圖片的大小
在本教程中(http://superdit.com/2011/01/13/jquery-expand-stacked-images-using-slider/)，將學習到如何用jQuery實現(xiàn)拉桿條去變換圖片的大小。
14、使用jQuery去實現(xiàn)縮略圖預(yù)覽
在本教程中(http://tympanus.net/codrops/2011/01/27/thumbnails-preview-slider/)，將會學習到如何使用jQuery實現(xiàn)一個圖庫的縮略圖效果，如上圖所示，當點每個小圓點的時候，會以平滑過渡等效果，去以不同尺寸去顯示縮略圖。
15、介紹jQuery的Data Method
在本教程中(http://tutorialzine.com/2010/11/jquery-data-method/)，將介紹jQuery中的Data Method的使用方法。
16、介紹jQuery的replaceText插件的使用
在這個教程中(http://net.tutsplus.com/tutorials/javascript-ajax/spotlight-jquery-replacetext/)，詳細介紹了jQuery中的rerplaceText方法的使用，這個控件的作用是可以將文本中含有用戶輸入關(guān)鍵字的詞以高亮度方式顯示，十分方便
17、做一個象iGoogle的界面
本教程中(http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/)，將指導(dǎo)你使用jQuery和CSS，去設(shè)計一個界面有點象iGoogle應(yīng)用的界面，其中從上圖可以看到，界面中的每個小區(qū)域方塊都是可以編輯和關(guān)閉的，有點象portal的應(yīng)用。
18、XML和jQuery打造的圖片動畫效果
本教程(http://www.subether.co.uk/blog/2011/01/xml-banner-fader-in-jquery/)將指導(dǎo)你如何使用xml和jQuery去打造一個簡單的圖片瀏覽功能，功能簡單但講解的十分清晰。
【編輯推薦】
