推薦40個非常優秀的 jQuery 外掛程式和教程【系列三】

jQuery 在如今的 Web 開發項目中扮演著重要角色，jQuery 以其外掛程式眾多、獨特、輕量以及支援大規模的網站開發聞名。本文大家分享40個實用的 jQuery 外掛程式，可以根據您的項目需要來選擇使用。Snippet – jQuery Syntax Highlighter( 示範 | 下載 )  Snippet 是一款超棒的代碼高亮外掛程式，支援15種流行語言，有數十種色彩配置供選擇，酷！650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1336405S5-0.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />Apple-like Retina Effect With jQuery( 示範 | 下載 )使用 jQuery 實現的蘋果 Retina 效果外掛程式，很棒！650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1336403627-1.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />Animate Panning Slideshow with jQuery( 示範 | 下載 )一款很棒的 jQuery 投影片外掛程式，有詳細的製作教程。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/133640JC-2.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />Colourful rating system with CSS3( 示範 | 下載 )使用 jQuery 和 CSS3 實現的很棒的評分外掛程式。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/133640JH-3.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />Smooth animated quote display( 示範 | 下載 )使用 jQuery 實現的平滑顯示引用內容的外掛程式。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1336404M9-4.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />Create Custom PopUp (Modal Window) with jQuery( 示範 | 下載 )這個教程教你使用 jQuery 製作一款模態彈窗外掛程式。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1336406350-5.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />Create a Digg-style post sharing tool with jQuery( 示範 | 下載 )使用 jQuery 製作的一款類似 Digg 風格的內容分享外掛程式。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1336401923-6.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />Create an Attractive Before and After Photo Effect with jQuery( 示範 | 下載 )這個教程教您使用 jQuery 實現一款照片的前後對照效果外掛程式。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1336401F9-7.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />CSS3 Rounded Image With jQuery( 示範 | 下載 )這個教程教您使用 jQuery 和 CSS3 實現圖片的圓角效果。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/133640G52-8.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />Simple JQuery Image Slide Show with Semi-Transparent Caption( 示範 | 下載 )使用 jQuery 製作的一款簡單的圖片投影片外掛程式。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/133640KJ-9.jpg" alt="40款非常棒的" jQuery 外掛程式和製作教程" width="560" border="0" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-style: initial; border-color: initial; border-image: initial; border-style: initial; border-color: initial; box-shadow: rgb(51, 51, 51) 1px 1px 5px; -webkit-box-shadow: rgb(51, 51, 51) 1px 1px 5px; border-style: initial; border-color: initial; " />

本文出自 “夢想天空” 部落格，請務必保留此出處http://lihongbo.blog.51cto.com/3956353/819911