2011年必须看的20多个新鲜和实用的jQuery插件
admin 13年前
<p>利用jQuery插件能够让开发人员以很少的几行代码，就能够快速开发出惊人的效果。 这篇文章将介绍一些高级和尖端的jQuery插件，以提高你的Web设计。</p> <p></p> <h3><a href="/misc/goto?guid=4958187536642913719">Supersized 3.2 – Fullscreen Slideshow jQuery Plugin</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187536642913719"><img title="2011年必须看的20多个新鲜和实用的jQuery插件" border="0" alt="2011年必须看的20多个新鲜和实用的jQuery插件" src="https://simg.open-open.com/show/5d78da8cb63ae9a7b60d440f59a1c6dc.jpg" width="600" height="345" /></a> <br /> </div> 这是一个利用jQuery实现的全屏幕背景幻灯片插件。 <h3><a href="/misc/goto?guid=4958186132241847444">Expanding Fullscreen Grid Portfolio</a></h3> <div class="image"> <a href="/misc/goto?guid=4958186132241847444"><img alt="Expanding Fullscreen Grid Portfolio" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/fullscreen_grid.jpg" /></a> <br /> </div> 其主要思想是先在一个网格布局中尽可能多的展示多个网页内容。当点击时才放大全屏详细内容。 <h3><a href="/misc/goto?guid=4958187539394051729">Quovolver</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187539394051729"><img alt="Quovolver" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/quovolver.jpg" /></a> <br /> </div> 这一个jQuery插件提供了一种优雅的方式来展示引用、推荐或评论的内容。要展示的内容可以放在任意HTML标签中，各内容项目之间转换持续的时间和动画的速度都可以自定义。 <br /> <h3><a href="/misc/goto?guid=4958187540799241545">jQuery Spin Button Plugin: Smart Spin</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187540799241545"><img alt="jQuery Spin Button Plugin: Smart Spin" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/smart_spin.jpg" /></a> <br /> </div> Smart spin是一个 <span class="st">微调按钮(Spin Button)构件通常用于让用户从一个取值范围你选择一个值。它由一个文本输入框和旁边的向上和向下两个按钮组成。支持键盘操作。</span> <h3><a href="/misc/goto?guid=4958187542206624962">FitText</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187542206624962"><img alt="FitText" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/fittextjs.jpg" /></a> <br /> </div> FitText 是一个非常有趣的工具，它支持自动调整文本大小。 <h3><a href="/misc/goto?guid=4958187185057997595">DropKick</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187185057997595"><img alt="DropKick" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/dropkickjs.jpg" /></a>HTML中默认的select下拉菜单的样式很不好看，这里我推荐一个可自定义样式的jQuery下拉菜单插件DropKick。它能将页面中乏味的<select>菜单按自定义的样式转换成漂亮的下拉菜单，此插件提供了一系列的回调方法，比如可以在值改变时调用某个方法。 </div> <h3><a href="/misc/goto?guid=4958187544956299917">HTML5 jQuery Music Player</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187544956299917"><img alt="HTML5 Music Player" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/music_player.jpg" /></a> <br /> </div> 这是一个基于HTML5实现的音乐播放器。 <h3><a href="/misc/goto?guid=4958186126800104466">Circular Content Carousel with jQuery</a></h3> <div class="image"> <a href="/misc/goto?guid=4958186126800104466"><img alt="Circular Content Carousel with jQuery" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/circular_carousel.jpg" /></a> <br /> </div> 一个简单的jQuery内容滑动切换插件。 <h3><a href="/misc/goto?guid=4958187547718033723">jQuery Image Gallery</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187547718033723"><img alt="jQuery Image Gallery Demo" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/image_gallery.jpg" /></a> <br /> </div> Image Gallery利用jQuery UI实现拥有Lightbox效果和Slideshow功能的插件。 <h3><a href="/misc/goto?guid=4958187549122145798">Overscroll</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187549122145798"><img alt="Overscroll" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/overscroll.jpg" /></a> <br /> </div> Overscroll是一个在浏览器模仿iPhone/ipad的滚动体验。 <h3><a href="/misc/goto?guid=4958187550520076893">jBar</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187550520076893"><img alt="jBar" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/jBar.jpg" /></a> <br /> </div> jbar这个jQuery插件能够将一个无序的<ul>列表转换成一个下拉菜单。 <h3><a href="/misc/goto?guid=4958186307794631391">leanModal</a></h3> <div class="image"> <a href="/misc/goto?guid=4958186307794631391"><img alt="leanModal" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/leanmodal.jpg" /></a> <br /> </div> 这是一个超级简单的模式对话框插件。适合于展示隐藏在页面中的内。具有灵活的高度和宽度，不需要图片支持，可以在同一个页面创建多个实例。适合做登录，注册和警告框等。 <h3><a href="/misc/goto?guid=4958187540799241545">ImageLens – A jQuery plug-in for Lens Effect Image Zooming</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187540799241545"><img alt="ImageLens – A jQuery plug-in for Lens Effect Image Zooming" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/image_lens.jpg" /></a> <br /> </div> 使用这个jQuery插件为图片添加放大镜缩放效果。 <h3><a href="/misc/goto?guid=4958187554621534971">My QR Code</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187554621534971"><img alt="My QR Code" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/qr.jpg" /></a> <br /> </div> 这个jQuery插件利用Google Chart API+jQuery来为移动设备生成QR二维码。默认将生成页面URL的QR码。当然你可以自己指定内容编码和设置QR码的大小。 <h3><a href="/misc/goto?guid=4958187556024174828">Simple Overlay</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187556024174828"><img alt="Simple Overlay" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/simple_overlay.jpg" /></a> <br /> </div> 一个jQuery插件用于创建轻量级的，灵活的遮罩效果。 <h3><a href="/misc/goto?guid=4958187557438034759">MobilyMap</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187557438034759"><img alt="MobilyMap" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/mobily_map.jpg" /></a> <br /> </div> MobilyMap一个jQuery插件 (7KB) 可用于从任何图片创建类似于Google Maps，具有可拖拉的界面。 <br /> <h3><a href="/misc/goto?guid=4958187558844253292">Snippet</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187558844253292"><img alt="Snippet" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/snippet.jpg" /></a> <br /> </div> Snippet jQuery Syntax Highlighter 是一个建立在SHJS的 开源插件,Snippet提供了简单而且快捷的方法,可以方便的为你带来高亮语法的提示.可以在IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62中运行. <br /> <h3><a href="/misc/goto?guid=4958187560265386547">NETEYE Activity Indicator</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187560265386547"><img alt="NETEYE Activity Indicator" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/activity.jpg" /></a> <br /> </div> 一个jQuery插件使用SVG或VML来实现半透明的活动指示灯。 <h3><a href="/misc/goto?guid=4958187561673155325">jLinkPreview</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187561673155325"><img alt="jLinkPreview" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/jlinkpreview.jpg" /></a> <br /> </div> jLinkPreview是一个实现在访问链接之前生成一张预览图片。 <h3><a href="/misc/goto?guid=4958187563078376826">jRumble</a></h3> <div class="image"> <a href="/misc/goto?guid=4958187563078376826"><img alt="jRumble" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/jrumble.jpg" /></a> <br /> </div> jRumble是一个可以让任意元素产生抖动/震动/摇动特效的jQuery插件。当鼠标移过或点击时将产生这些特效。 <h3><a href="/misc/goto?guid=4958186296300745126">Grid Navigation Effects with jQuery</a></h3> <div class="image"> <a href="/misc/goto?guid=4958186296300745126"><img alt="Grid Navigation Effects with jQuery" src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/08/grid_nav.jpg" /></a> <br /> </div> jQuery插件实现一些巧妙的网格导航效果。