JQuery特效
丁丁编程技术 http://www.kmdin.com Email: 1844205@qq.com
JQuery特效
目录
1.导航类 ............................................................................................................................................................................................................. 6
(1)Horizontal accordion: jQuery ................................................................................................................................................................ 6 (2)jQuery-Horizontal Accordion.......................................................................................................................................................... 6 (3)jQuery plugin: Accordion ...................................................................................................................................................................... 6 (4)Accordion Menu script .......................................................................................................................................................................... 6 (5)模仿ext的tab选项卡 .......................................................................................................................................................................... 7 (6) ............................................................................................................................................................................................................... 9 （7）De-Constructing Accordion and Hover Effects with jQuery ............................................................................................................ 9 （8）导航到页内指定位置 ...................................................................................................................................................................... 9 （10） Sexy Drop Down Menu w/ jQuery & CSS .................................................................................................................................. 10 （11） A Different Top Navigation ......................................................................................................................................................... 10 （12）Sliding Jquery Menu Tutorial ....................................................................................................................................................... 10 （13）Animated Drop Down Menu with jQuery .................................................................................................................................... 11 14. jQuery UI错误！未找到索引项。 Potato Menu............................................................................................................................. 11 15. Make a Mega Drop-Down Menu with jQuery .................................................................................................................................... 11 （16）Superfish v1.4.8 – jQuery menu plugin by Joel Birch .................................................................................................................. 12 （17）jQuery (mb)Menu 2.7 ................................................................................................................................................................... 12 （18） jQuery File Tree .......................................................................................................................................................................... 12 19.jQuery & CSS Example – Dropdown Menu ....................................................................................................................................... 13 20. Reinventing a Drop Down with CSS and jQuery ............................................................................................................................... 13 21. Simple jQuery Dropdowns ................................................................................................................................................................. 13 22. Styling Drop Down Boxes with jQuery .............................................................................................................................................. 14 23. jQuery iPod-style Drilldown Menu .................................................................................................................................................... 14 24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready .................................... 14 25. mcDropdown jQuery Plug-in v1.2.07 ................................................................................................................................................ 15 26. jQuery Drop Line Tabs ....................................................................................................................................................................... 15 27. Cut & Paste jQuery Mega Menu ........................................................................................................................................................ 16 28. jdMenu Hierarchical Menu Plugin ..................................................................................................................................................... 16 2.消息提示类 ................................................................................................................................................................................................... 16
（1）Facebox .......................................................................................................................................................................................... 16 （2）SimpleModal .................................................................................................................................................................................. 17 （3）jTip ................................................................................................................................................................................................. 17 （4）BetterTip ......................................................................................................................................................................................... 17 （5）clueTip ............................................................................................................................................................................................ 18 （6）jQuery lightBox plugin ................................................................................................................................................................... 18 （7）jQuery Impromptu .......................................................................................................................................................................... 19 （8） jQuery.UI Messenger\ （9）FancyBox ....................................................................................................................................................................................... 20 （10）Coda Popup Bubbles .................................................................................................................................................................... 20 （11）jGrowl ........................................................................................................................................................................................... 20 （12）jqWindowsEngine ........................................................................................................................................................................ 21 （13）jQuery Alert Dialogs..................................................................................................................................................................... 21 （14）BeautyTips .................................................................................................................................................................................... 22
丁丁编程技术 Email：greenvc@gmail.com http://www.kmdin.com 第 1 页，共 97 页
JQuery特效
（15）Facebook/Xiaonei 风格模态框 ................................................................................................................................................... 22 3.图片展示类 ................................................................................................................................................................................................... 23
(1)imgAreaSelect ..................................................................................................................................................................................... 23 (2)Easy Slide ............................................................................................................................................................................................ 24 (3)Easy News ........................................................................................................................................................................................... 24 (4)jQZoom ............................................................................................................................................................................................... 25 (5)jCarousel Lite ...................................................................................................................................................................................... 25 (6)jCarousel .............................................................................................................................................................................................. 26 (7)Spacegallery-Jquery ............................................................................................................................................................................. 26 (8)jQuery Slider Gallery ........................................................................................................................................................................... 26 (9)jQuery Cycle Plugin ............................................................................................................................................................................ 27 (10)Zoomimage ........................................................................................................................................................................................ 27 (11)prettyPhoto ......................................................................................................................................................................................... 28 (12)ThickBox ........................................................................................................................................................................................... 29 (13)Galleria .............................................................................................................................................................................................. 29 (14)jQuery Flash Plugin ........................................................................................................................................................................... 30 (15)jQuery.SerialScroll ............................................................................................................................................................................. 30 (16)InnerFade ........................................................................................................................................................................................... 31 (17)NyroModal ........................................................................................................................................................................................ 31 (18)CrossSlide .......................................................................................................................................................................................... 32 (19)Magnify ............................................................................................................................................................................................. 32 (20)Img Notes .......................................................................................................................................................................................... 33 (21)FancyZoom ........................................................................................................................................................................................ 33 (22)Jcrop .................................................................................................................................................................................................. 34 (23)Galleriffic........................................................................................................................................................................................... 34 (24)Image Upload and Auto Crop ............................................................................................................................................................ 35 (25)prettyGallery ...................................................................................................................................................................................... 35 (26)jQuery.popeye .................................................................................................................................................................................... 35 (27)s3Slider .............................................................................................................................................................................................. 36 (28)Pirobox .............................................................................................................................................................................................. 37 (29)Simple Controls Gallery .................................................................................................................................................................... 37 (30)Agile Carousel ................................................................................................................................................................................... 37 (31)jQuery Plugin-Page Peel .................................................................................................................................................................... 38 (32)Easy Slider ......................................................................................................................................................................................... 38 (33)imgPreview ........................................................................................................................................................................................ 39 (34)Jquery Fade In.Fade Out .................................................................................................................................................................... 39 (35)Captify ............................................................................................................................................................................................... 39 (36)jParallax ............................................................................................................................................................................................. 40 (37)jQuery---运用图片预加载技术打造幻灯片 ..................................................................................................................................... 41 (38)jQuery pageSlide ............................................................................................................................................................................... 42 (39)Creating a Slick Auto-Playing Featured Content Slider ..................................................................................................................... 42 (40)Portfolio Layout Idea Using jQuery ................................................................................................................................................... 42 (41)jQuery---图片先模糊后清楚 ............................................................................................................................................................ 43 (42)使用jQuery实现网页报纸 .............................................................................................................................................................. 43 (43)jQuery购物网站产品展示. .............................................................................................................................................................. 43 (44)Gallerific ............................................................................................................................................................................................ 44 丁丁编程技术 Email：greenvc@gmail.com http://www.kmdin.com 第 2 页，共 97 页
JQuery特效
(45)ZoomImage ........................................................................................................................................................................................ 45 (46)EasySlider .......................................................................................................................................................................................... 45 (47)The Slider from Barack Obama’s website ......................................................................................................................................... 46 (48)CodaSlider ......................................................................................................................................................................................... 46 (49)jQuery Slider II .................................................................................................................................................................................. 47 (50)Beautiful Slider 热点图书：www.hotbook.cn .................................................................................................................................. 47 (51)LoopedSlider ..................................................................................................................................................................................... 47 (52)SpaceGallery ...................................................................................................................................................................................... 48 (53)jQuery Popeye ................................................................................................................................................................................... 49 (54)Noobslide 热点图书：www.hotbook.cn ........................................................................................................................................... 49 (55)Accessible News Slider 热点图书：www.hotbook.cn ..................................................................................................................... 49 (56)SmoothGallery 热点图书：www.hotbook.cn ................................................................................................................................... 50 (57)jQuery Multimedia Portfolio.............................................................................................................................................................. 50 (58)s3Slider .............................................................................................................................................................................................. 50 (59)fxMarquee .......................................................................................................................................................................................... 51 (60)商品放大镜效果 ............................................................................................................................................................................... 51 (61)PageSlide ........................................................................................................................................................................................... 53 64.不错的图片分类展示或者文字展示效果 ......................................................................................................................................... 54 67.利用z-index做的图片展示效果 ....................................................................................................................................................... 55 4.自动填充类 ................................................................................................................................................................................................... 56
（1）AutoComplete-JQuery .................................................................................................................................................................... 56 （2）Facebook like Autocomplete .......................................................................................................................................................... 56 （3）jQuery Autocomplete Mod ............................................................................................................................................................. 56 （4）jqac ................................................................................................................................................................................................. 57 （5）jQuery Tag Suggestion ................................................................................................................................................................... 57 （6）Autocomplete-jQuery ajax ............................................................................................................................................................. 57 （7）jQuery.Suggest ............................................................................................................................................................................... 57 （8）Autocomplete- jQuery plugin ......................................................................................................................................................... 57 （9）jQuery plugin: Autocomplete ......................................................................................................................................................... 58 （10）jSuggest ........................................................................................................................................................................................ 58 （11）jQuery Live Ajax Search Plug-in .................................................................................................................................................. 58 （12）ddcombobox ................................................................................................................................................................................. 59 5.分页类 ........................................................................................................................................................................................................... 60
（1）jQuery Pagination ........................................................................................................................................................................... 60 （2）pager jQuery plug-in ...................................................................................................................................................................... 61 （3）JQuery Pager .................................................................................................................................................................................. 61 6.编辑器类 ....................................................................................................................................................................................................... 61
（1）jwysiwyg ........................................................................................................................................................................................ 61 （2）Damn Small Rich Text Editor ......................................................................................................................................................... 62 (3)xhEditor ............................................................................................................................................................................................... 62 7.表格类 ........................................................................................................................................................................................................... 63
(1)Flexigrid .............................................................................................................................................................................................. 63 (2)Ingrid ................................................................................................................................................................................................... 63 (3)jQuery Grid .......................................................................................................................................................................................... 63 (4)tableHover ......................................................................................................................................................................................... 64 (5)JQuery.Resizer ..................................................................................................................................................................................... 64 丁丁编程技术 Email：greenvc@gmail.com http://www.kmdin.com 第 3 页，共 97 页
JQuery特效
(6)tablesorter ............................................................................................................................................................................................ 64 (7)csv2table .............................................................................................................................................................................................. 65 (8)tableFormSynch ................................................................................................................................................................................... 65 8.色彩选择器类 ............................................................................................................................................................................................... 66
(1) Farbtastic ............................................................................................................................................................................................ 66 (2)jQuery Color Picker ............................................................................................................................................................................. 66 (3)iColorPicker ......................................................................................................................................................................................... 66 9.数据验证类 ................................................................................................................................................................................................... 67
1. jQuery plugin: Validation ................................................................................................................................................................... 67 2. Masked Input Plugin .......................................................................................................................................................................... 67 3 jVal...................................................................................................................................................................................................... 68 10.报表类 ......................................................................................................................................................................................................... 68
1................................................................................................................................................................................................................ 68 2. Flot..................................................................................................................................................................................................... 69 3. jQchart ............................................................................................................................................................................................... 69 4 jquery.sparkline ................................................................................................................................................................................... 70 5. jQuery Google Charts (演示地址) ....................................................................................................................................................... 70 6. jqPlot (演示地址) ................................................................................................................................................................................. 70 11.上传类 ......................................................................................................................................................................................................... 70
1. jqUploader ......................................................................................................................................................................................... 70 2. jQuery Multiple File Upload Plugin .................................................................................................................................................. 70 3. jQuery: Ajax file upload .................................................................................................................................................................... 71 12.日期时间类 ................................................................................................................................................................................................. 71
1. jQuery UI Datepicker ........................................................................................................................................................................ 71 2. Date Picker ........................................................................................................................................................................................ 72 3. Date Range Picker ............................................................................................................................................................................. 72 13.圆角效果类 ................................................................................................................................................................................................. 72
1. jQuery Corner .................................................................................................................................................................................... 72 2. JQuery Curvy Corners ....................................................................................................................................................................... 73 3. jQuery Corner .................................................................................................................................................................................... 73 4. jQuery Corners .................................................................................................................................................................................. 74 14.评价类 ......................................................................................................................................................................................................... 74
（1）Creating a Dynamic Poll with jQuery and PHP .............................................................................................................................. 74 （3） jQuery Ajax Rater Plugin ............................................................................................................................................................ 75 4. Star Rating widget ............................................................................................................................................................................. 75 5. jQuery Star Rating Plugin ................................................................................................................................................................. 76 6. Ajax Poll ............................................................................................................................................................................................ 76 7.jQuery 投票调查组件 .......................................................................................................................................................................... 76 15.虚拟键盘类 ................................................................................................................................................................................................. 77
1................................................................................................................................................................................................................ 77 2.jQuery 虚拟键盘 .................................................................................................................................................................................. 78 3.Virtual keyboard 虚拟键盘 .................................................................................................................................................................. 79 16.Form元件扩展 ........................................................................................................................................................................................... 79
（1）jQuery.combobox ........................................................................................................................................................................... 79 （2）jquery button:对按钮的扩展 .......................................................................................................................................................... 80 (3)ContextMenu ....................................................................................................................................................................................... 80 丁丁编程技术 Email：greenvc@gmail.com http://www.kmdin.com 第 4 页，共 97 页
Jquery特效 - 图文
