39个超实用jQuery实例应用特效

小鱼儿 2022-05-29 08:52 224阅读 0赞

**摘要：**程序员和Web设计师可以利用jQuery的诸多特性开发设计出许多光彩夺目的网站，当然这也取决于设计师们自己的创造力。 下面收集了39个开发者们最爱的jQuery应用以及教程，快来试试，让你的页面炫起来！

**1.**[**Contextual Slideout**][Contextual Slideout]**：上下文滑动特效**

**![Contextual Slideout Tips With jQuery & CSS3][Contextual Slideout Tips With jQuery _ CSS3]**

**2.[Revealing Photo Slider][]：图片幻灯片特效**

**![Revealing Photo Slider][Revealing Photo Slider 1]**

**3.[Fancy Box][]：魔幻盒**

![Fancy Box][Fancy Box 1]

**4.[Scrollable][]：滚动特效**

![Scrollable][Scrollable 1]

**5.**[**Flip**][Flip]：**翻转特效,实现4个方向旋转**

![Flip][Flip 1]

**6.[Smart tooltips][]：智能提示**

![Smart tooltips][Smart tooltips 1]

**7.[Slide tab box][]：幻灯片选项卡**

**![Create slide tab box][]**

**8**.**[Tabbed Interface/Tabbed Structure Menu][Tabbed Interface_Tabbed Structure Menu]：选项卡式接口和菜单**

**![jQuery Tabbed Interface / Tabbed Structure Menu Tutorial][jQuery Tabbed Interface _ Tabbed Structure Menu Tutorial]**

**9.[jQuery plugin: Easy Accordion][jQuery plugin_ Easy Accordion]：可以让自定义列表（DTs）轻松生成一个漂亮光滑的水平Accordion插件**

![156_120910094508_1.jpg][]

**10.[Animate Panning Slideshow with jQuery][]**：**平移幻灯片**

这是一个教大家使用jQuery实现动画平移幻灯片效果的教程，学习该教程需要下载 [easing animations][]和[timing slide changes][]这两个插件。

![Animate Panning Slideshow with jQuery][Animate Panning Slideshow with jQuery 1]

**11.[Blockster transition effect][]：Blockster过渡特效**

Blockster是JavaScript里面一款非常有特色展示过度效果的应用，其核心概念就是块与块之间的过渡。

![Blockster transition effect][Blockster transition effect 1]

**12.[Making a Custom YouTube Video Player][]：定制个性化的YouTube视频播放器**

**![Making a Custom YouTube Video Player][Making a Custom YouTube Video Player 1]**

**13.[Sexy Drop Down Menu with jQuery ][Sexy Drop Down Menu with jQuery]：迷你下拉菜单教程**

![Sexy Drop Down Menu w jQuery][]

**14.[Building a jQuery Image Scroller][]：构建卷条式图片**

**![Building a jQuery Image Scroller][Building a jQuery Image Scroller 1]**

**15.[Custom Animation Banner with jQuery][]：动画广告图教程**

**![Custom Animation Banner with jQuery][Custom Animation Banner with jQuery 1]**

**16.[Full Page Image Gallery with jQuery][]：制作页面画廊**

**![Full Page Image Gallery with jQuery][Full Page Image Gallery with jQuery 1]**

**17.[Randomizer App with jQuery][]：随机数产生器**

![Randomizer App w/ jQuery][Randomizer App w_ jQuery]

**18.[Animated Drop Down Menu with jQuery][]：动画下拉菜单**

**![Animated Drop Down Menu with jQuery][Animated Drop Down Menu with jQuery 1]**

**19.[Making an Interactive Picture with jQuery][]：制作交互式图片**

**![Making an Interactive Picture with jQuery][Making an Interactive Picture with jQuery 1]**

**20.[A jQuery Twitter Ticker][]：Twitter Ticker教程**

**![A jQuery Twitter Ticker][A jQuery Twitter Ticker 1]**

**21.[jQSlickWrap][]：可以让文字环绕在漂浮图片周围的jQuery插件**

**![jQSlickWrap][jQSlickWrap 1]**

**22.[Animated Text and Icon Menu with jQuery][]：制作动画文本和图标菜单**

**![Animated Text and Icon Menu with jQuery][Animated Text and Icon Menu with jQuery 1]**

**23.[Image Wall with jQuery][]：图片墙**

**![Image Wall with jQuery][Image Wall with jQuery 1]**

**24.[jQuery look: Tim Van Damme][jQuery look_ Tim Van Damme]**

Tim的两个核心是简化版的Accordion和悬浮效果。值得注意的是,悬浮效果只能在WebKit(Safari和Chrome)上工作，本教程的关键是教你如何利用jQuery制作产生这一特效。

**![jQuery look: Tim Van Damme][jQuery look_ Tim Van Damme 1]**

**25.[How to Load In and Animate Content with jQuery][]：内容自动加载**

在本教程中，会添加ajax函数，用户无需导航即可把内容自动加载到容器中。

![How to Load In and Animate Content with jQuery][How to Load In and Animate Content with jQuery 1]

**26.[Nivo Slider][]：Nivo幻灯片教程**

![Nivo Slider][Nivo Slider 1]

**27.[Coin Slider][]：硬币式幻灯片**

**![Coin Slider][Coin Slider 1]**

**28.[HTML5 and jQuery Techniques to Build a Webpage][]：使用HTML5和jQuery创建网页**

![HTML5 and jQuery Techniques to Build a Webpage][HTML5 and jQuery Techniques to Build a Webpage 1]

**29.[Latest Post Blogroll Slider with jQuery and PHP][]：使用jQuery和PHP创建友情链接幻灯片**

![Latest Post Blogroll Slider with jQuery and PHP][Latest Post Blogroll Slider with jQuery and PHP 1]

**30.**[**Making a Photoshoot Effect With jQuery & CSS**][Making a Photoshoot Effect With jQuery _ CSS]：**图片拍摄特效**

![Making a Photoshoot Effect With jQuery & CSS][Making a Photoshoot Effect With jQuery _ CSS 1]

**31.**[**Coding a Rotating Image Slideshow w/ CSS3 and jQuery**][Coding a Rotating Image Slideshow w_ CSS3 and jQuery]**：旋转图片幻灯片**

![Coding a Rotating Image Slideshow w/ CSS3 and jQuery][Coding a Rotating Image Slideshow w_ CSS3 and jQuery 1]

**32.**[**Slider Gallery**][Slider Gallery]**：滑块画廊**

![Slider Gallery][Slider Gallery 1]

**33.**[**Making Better Select Elements with jQuery and CSS3**][Making Better Select Elements with jQuery and CSS3]**：使用jQuery和CSS3制作更好的选择元素**

![Making Better Select Elements with jQuery and CSS3][Making Better Select Elements with jQuery and CSS3 1]

**34.**[**Jquery Tutorial : Toggle Effect on Hover/Click**][Jquery Tutorial _ Toggle Effect on Hover_Click]**：切换特效**

![Jquery Tutorial : Toggle Effect on Hover/Click][Jquery Tutorial _ Toggle Effect on Hover_Click 1]

**35.**[**Creating an Animated 404 Page**][Creating an Animated 404 Page]**：动感的404**

![Creating an Animated 404 Page][Creating an Animated 404 Page 1]

**36.**[**Create Smooth Rotatable Images with CSS3 and jQuery**][Create Smooth Rotatable Images with CSS3 and jQuery]**：制作平滑可旋转图像特效**

![Create Smooth Rotatable Images with CSS3 and jQuery][Create Smooth Rotatable Images with CSS3 and jQuery 1]

**37.**[**Neon Text Effect With jQuery & CSS**][Neon Text Effect With jQuery _ CSS]：**霓虹灯文字**

![Neon Text Effect With jQuery & CSS][Neon Text Effect With jQuery _ CSS 1]

**38.**[**Bubbleriffic Image Gallery with jQuery**][Bubbleriffic Image Gallery with jQuery]**：Bubbleriffic图片库**

![Bubbleriffic Image Gallery with jQuery][Bubbleriffic Image Gallery with jQuery 1]

**39.**[**Animated Portfolio Gallery with jQuery**][Animated Portfolio Gallery with jQuery]**：动态画廊**

![Animated Portfolio Gallery with jQuery][Animated Portfolio Gallery with jQuery 1]

[Contextual Slideout]: http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/
[Contextual Slideout Tips With jQuery _ CSS3]: /images/20220529/7187f515f054428492c8ce277583182d.png
[Revealing Photo Slider]: http://css-tricks.com/666-revealing-photo-slider/
[Revealing Photo Slider 1]: /images/20220529/0f8a9697756e4dd39f5948eede5aca05.png
[Fancy Box]: http://fancybox.net/
[Fancy Box 1]: /images/20220529/d339b26c430d471f88632ddb1eeaf3c7.png
[Scrollable]: http://jquerytools.org/demos/scrollable/index.html
[Scrollable 1]: /images/20220529/0a8c524a62694772b04727c60a52b59e.png
[Flip]: http://lab.smashup.it/flip
[Flip 1]: /images/20220529/099fff5ef52f4b56bc2f1fb07c400ec8.png
[Smart tooltips]: http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery-part-2-smart-tooltips
[Smart tooltips 1]: /images/20220529/e7702929d7f0412083e5f62b8efcaffb.png
[Slide tab box]: http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/
[Create slide tab box]: /images/20220529/2eaa3eeb7e2043a4965dd3386a5565b7.png
[Tabbed Interface_Tabbed Structure Menu]: http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial
[jQuery Tabbed Interface _ Tabbed Structure Menu Tutorial]: /images/20220529/2064576dc6904b63a83dae4c87e72526.png
[jQuery plugin_ Easy Accordion]: http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/
[156_120910094508_1.jpg]: /images/20220529/19b10a30df6c461f816645b18cfe4421.png
[Animate Panning Slideshow with jQuery]: http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/
[easing animations]: http://gsgd.co.uk/sandbox/jquery/easing/
[timing slide changes]: http://www.evanbot.com/article/jquery-timer-plugin/23
[Animate Panning Slideshow with jQuery 1]: /images/20220529/0ea1d2d52ee24457ab88e1441169462f.png
[Blockster transition effect]: http://www.mitya.co.uk/scripts/Blockster-transition-effect-122
[Blockster transition effect 1]: /images/20220529/a495253a22ff4707a6a7d2b850cf8d6a.png
[Making a Custom YouTube Video Player]: http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/
[Making a Custom YouTube Video Player 1]: /images/20220529/31536e12c9aa416f873797ae67397495.png
[Sexy Drop Down Menu with jQuery]: http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
[Sexy Drop Down Menu w jQuery]: /images/20220529/4b70e2dd0ca14326b9c3c5061fd92bbc.png
[Building a jQuery Image Scroller]: http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/
[Building a jQuery Image Scroller 1]: /images/20220529/fbc85ff786a84fbaa8a2213195d009a6.png
[Custom Animation Banner with jQuery]: http://tympanus.net/codrops/2010/10/18/custom-animation-banner/
[Custom Animation Banner with jQuery 1]: /images/20220529/675911d93fe54195b7c690f76713c54f.png
[Full Page Image Gallery with jQuery]: http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/
[Full Page Image Gallery with jQuery 1]: /images/20220529/5b4d482e3781463583b8056e1d11012b.png
[Randomizer App with jQuery]: http://tutorialzine.com/2010/09/giveaway-randomizer-app-jquery/
[Randomizer App w_ jQuery]: /images/20220529/fa306b4e440d44aaa5043ebe89ef363b.png
[Animated Drop Down Menu with jQuery]: http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/
[Animated Drop Down Menu with jQuery 1]: /images/20220529/69c91402baed455b9d5329d97fff8145.png
[Making an Interactive Picture with jQuery]: http://buildinternet.com/2009/11/making-an-interactive-picture-with-jquery/
[Making an Interactive Picture with jQuery 1]: /images/20220529/a85a1138c464403b8953e172231c2eee.png
[A jQuery Twitter Ticker]: http://tutorialzine.com/2009/10/jquery-twitter-ticker/
[A jQuery Twitter Ticker 1]: /images/20220529/e6ce3b6013a948d5ae0e633bc7f31d16.png
[jQSlickWrap]: http://www.csdn.net/article/2012-09-07/jQSlickWrap
[jQSlickWrap 1]: /images/20220529/48f0f1e998874a4da218dd7182eaf2ae.png
[Animated Text and Icon Menu with jQuery]: http://tympanus.net/codrops/2011/07/12/animated-text-and-icon-menu/
[Animated Text and Icon Menu with jQuery 1]: /images/20220529/639ad5a3af23425f93583cec6518c7df.png
[Image Wall with jQuery]: http://tympanus.net/codrops/2011/05/25/image-wall/
[Image Wall with jQuery 1]: /images/20220529/a57af65df89946409a81da00f48382f0.png
[jQuery look_ Tim Van Damme]: http://jqueryfordesigners.com/jquery-look-tim-van-damme/
[jQuery look_ Tim Van Damme 1]: /images/20220529/672370e9599d4838b21d377e7a643079.png
[How to Load In and Animate Content with jQuery]: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
[How to Load In and Animate Content with jQuery 1]: /images/20220529/bff6810370514fafb8662d60d59f923d.png
[Nivo Slider]: http://nivo.dev7studios.com/
[Nivo Slider 1]: /images/20220529/97b3f076fe7c4b9c83a8d1cb64b73130.png
[Coin Slider]: http://workshop.rs/projects/coin-slider/
[Coin Slider 1]: /images/20220529/8269882116844d47b7388f06a2338168.png
[HTML5 and jQuery Techniques to Build a Webpage]: http://www.sendesignz.com/index.php/jquery/66-html-5-and-jquery-techniques-to-build-the-webpage
[HTML5 and jQuery Techniques to Build a Webpage 1]: /images/20220529/6393ebd17274480c95bd720494bf8085.png
[Latest Post Blogroll Slider with jQuery and PHP]: http://tympanus.net/codrops/2010/06/17/latest-post-blogroll-slider/
[Latest Post Blogroll Slider with jQuery and PHP 1]: /images/20220529/f0f561065b874a6592dee0258ff5d67e.png
[Making a Photoshoot Effect With jQuery _ CSS]: http://tutorialzine.com/2010/02/photo-shoot-css-jquery/
[Making a Photoshoot Effect With jQuery _ CSS 1]: /images/20220529/dc4f31f9ddf242fe8b7d7225f410a8ed.png
[Coding a Rotating Image Slideshow w_ CSS3 and jQuery]: http://tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/
[Coding a Rotating Image Slideshow w_ CSS3 and jQuery 1]: /images/20220529/4a76b3fa160a4c35aef5975d560eb8a6.png
[Slider Gallery]: http://tympanus.net/codrops/2010/10/07/slider-gallery/
[Slider Gallery 1]: /images/20220529/52cb938b1dd8456ca577d1c7d6860b98.png
[Making Better Select Elements with jQuery and CSS3]: http://tutorialzine.com/2010/11/better-select-jquery-css3/
[Making Better Select Elements with jQuery and CSS3 1]: /images/20220529/aa5b2dbf845a4d9483dab88d6623516d.png
[Jquery Tutorial _ Toggle Effect on Hover_Click]: http://acrisdesign.com/2010/03/jquery-tutorial-toggle-effect-on-hoverclick/
[Jquery Tutorial _ Toggle Effect on Hover_Click 1]: /images/20220529/ada0b316f4b94cada8cecf0ef2ce0407.png
[Creating an Animated 404 Page]: http://tutorialzine.com/2010/08/animated-404-not-found-page-css-jquery/
[Creating an Animated 404 Page 1]: /images/20220529/fbc823f69c2b4f15989723c9a7fcedd3.png
[Create Smooth Rotatable Images with CSS3 and jQuery]: http://www.elated.com/articles/smooth-rotatable-images-css3-jquery/
[Create Smooth Rotatable Images with CSS3 and jQuery 1]: /images/20220529/3b2c16317a40435fa7cce17a04982b23.png
[Neon Text Effect With jQuery _ CSS]: http://tutorialzine.com/2010/06/neon-text-effect-jquery/
[Neon Text Effect With jQuery _ CSS 1]: /images/20220529/a4d142dd363c4e28ac8c913e47144202.png
[Bubbleriffic Image Gallery with jQuery]: http://tympanus.net/codrops/2010/12/10/bubbleriffic-image-gallery/
[Bubbleriffic Image Gallery with jQuery 1]: /images/20220529/c622fb0b5429403d9a4641e2d27fcb20.png
[Animated Portfolio Gallery with jQuery]: http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/
[Animated Portfolio Gallery with jQuery 1]: /images/20220529/b86456350b214c5688f524efda0936e5.png