分享11个新鲜、实用的jQuery插件

jopen 12年前
     <h3>1. rlightbox : A jQuery UI Mediabox</h3>    <p><a href="https://simg.open-open.com/show/0d98902dc6d85a915732776dbcf96420.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1737" title="rlightbox" alt="rlightbox – A jQuery UI Mediabox" src="https://simg.open-open.com/show/0d98902dc6d85a915732776dbcf96420.jpg" width="500" height="356" /></a><br /> rlightbox是一个轻量级的jQuery插件,它可以用来展示多样的内容,比如图片、视频、Flash动画等,它还可以自适应浏览器的宽高。除此之外,它拥有一些其他同类插件所没有的功能:可实现只展示图片的一部分,通过拖动来查看图片其它部分。因为它是基于jQuery UI的,所以自定义样式也变得非常方便。<br /> <br /> <strong><a href="/misc/goto?guid=4958192828217136493" target="_new">项目地址</a></strong>/<strong> <a href="/misc/goto?guid=4958197519351454131" target="_new">下载</a></strong></p>    <h3>2. FitText : A jQuery Plugin For Inflating Web Type </h3>    <p><a href="https://simg.open-open.com/show/e6b93873bb7ed2ff68ce75ff33211c37.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1739" title="fittext-jquery-plugin" alt="fittext-jquery-plugin" src="https://simg.open-open.com/show/e6b93873bb7ed2ff68ce75ff33211c37.jpg" width="500" height="307" /></a><br /> FitText 是一个 jQuery 的字体自动调整插件。以适应不同的浏览屏幕。<br /> <strong><a href="/misc/goto?guid=4958187542206624962" target="_new">项目地址</a></strong>/<strong> <a href="/misc/goto?guid=4958197520781628453" target="_new">下载</a></strong></p>    <h3>3. ImageMapster </h3>    <p><a href="https://simg.open-open.com/show/51f4a1c25e75a97a5d1760463f2a18a1.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1740" title="imagemapster" alt="imagemapster" src="https://simg.open-open.com/show/51f4a1c25e75a97a5d1760463f2a18a1.jpg" width="500" height="446" /></a><br /> <a href="http://www.open-open.com/ajax/ajax20111001224108.htm" target="_blank">ImageMapster </a>这是一个用于创建可交互式图片地图的jQuery插件。 </p>    <p>使用这个插件任何类型的图片地图都可以被高亮选中,单个区域或多个区域并提供多种操作方式。</p> 其提供了非常多的内置功能比如:改变Color-opacity或被选中时的边框。或者添加淡入淡出的效果。 还可以为选中的区域添加Tooltip消息展示,分组选中多个区域等功能。    <br />    <p><strong><a href="/misc/goto?guid=4958197521522859321" target="_new">项目地址</a></strong>/<strong> <a href="/misc/goto?guid=4958197522263663121" target="_new">下载</a></strong></p>    <h3>4. Apprise : The Alert Alerternative For jQuery </h3>    <p><a href="https://simg.open-open.com/show/7cd6beafe87223a3d2e4e3db055b3cc5.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1742" title="Apprise" alt="Apprise" src="https://simg.open-open.com/show/7cd6beafe87223a3d2e4e3db055b3cc5.jpg" width="500" height="300" /></a><br /> Aprrise是一个简单的模式对话框。风格、内容、位置和功能都完全可自定义。<br /> <strong><a href="/misc/goto?guid=4958197523006988865" target="_new">项目地址</a></strong></p>    <h3>5. Badger : Super Sexy iOS Style Badges for jQuery </h3>    <p><a href="https://simg.open-open.com/show/9c71003898b7981137f4fb32098faebe.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1743" title="Badger" alt="Badger" src="https://simg.open-open.com/show/9c71003898b7981137f4fb32098faebe.jpg" width="500" height="299" /></a><br /> 提供一种简单的方法,让页面元素看起来像 iOS 风格,无需任何图片。<br /> <strong><a href="/misc/goto?guid=4958197523744500638" target="_new">项目地址</a></strong></p>    <h3>6. FitVids. js : jQuery Plugin For Fluid Width Video Embeds </h3>    <p><a href="https://simg.open-open.com/show/1eeaef64805f4a0ee9ec2f3f4fc97cb0.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1744" title="FitVids" alt="FitVids" src="https://simg.open-open.com/show/1eeaef64805f4a0ee9ec2f3f4fc97cb0.jpg" width="500" height="353" /></a><br /> 如果你需要你的视频能够自动适应网页的宽度,FitVids.js这个jquery插件可以帮助你。<br /> <strong><a href="/misc/goto?guid=4958197524504456217" target="_new">项目地址</a></strong>/<strong> <a href="/misc/goto?guid=4958197525233667697" target="_new">下载</a></strong></p>    <h3>7. Portamento : Add Floating Panel To Your Web Page </h3>    <p><a href="https://simg.open-open.com/show/f8d25dfeb83d5c7761df885add051b6b.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1745" title="Portamento" alt="Portamento" src="https://simg.open-open.com/show/f8d25dfeb83d5c7761df885add051b6b.jpg" width="500" height="366" /></a><br /> 我们浏览网站的时候,经常能看到固定在页面中且不会随着滚动条滚动的DIV层,这样的浮动效果可通过Portamento这个jQuery插件实现。Portamento是一个轻量级的jQuery插件,它具有简单并且容易使用的特点。使用此插件,只需一行代码便可实现网页元素浮动于固定位置的效果。它会检测浏览器大小是否足以显示浮动层,如果过小将不会浮动显示。Portamento也提供了几个参数可供设置,定制性也是比较高的。<br /> <strong><a href="/misc/goto?guid=4958192828952363576" target="_new">项目地址</a></strong></p>    <h3>8. uLightBox </h3>    <p><a href="https://simg.open-open.com/show/d6bbbd8685d2ab3e821f90d8c076ae2b.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1746" title="UI light box" alt="UI light box" src="https://simg.open-open.com/show/d6bbbd8685d2ab3e821f90d8c076ae2b.jpg" width="500" height="198" /></a><br /> jQuery uLight Box是一个简单和易于使用的插件,并且能够满足创建灯箱效果所有的要求。具备高度可定制。<strong><a href="/misc/goto?guid=4958197526678355740" target="_new"><br /> 项目地址</a></strong></p>    <h3>9. jQuery Wiggle </h3>    <p><a href="https://simg.open-open.com/show/15c871d05900934cc7d3cc1d76167e30.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1747" title="jQuery Wiggle" alt="jQuery Wiggle" src="https://simg.open-open.com/show/15c871d05900934cc7d3cc1d76167e30.jpg" width="500" height="316" /></a><br /> jQuery Wiggle这个插件可用于模仿iPhone手机上的图标按纽蠕动(wiggle)效果。<br /> <strong><a href="/misc/goto?guid=4958197527419116181" target="_new">项目地址</a></strong></p>    <h3>10. Elastislide – A Responsive jQuery Carousel Plugin </h3>    <p><a href="https://simg.open-open.com/show/6abb5d406bf09c6cbf8c0cd20ced7be2.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1749" title="Elastislide" alt="Elastislide" src="https://simg.open-open.com/show/6abb5d406bf09c6cbf8c0cd20ced7be2.jpg" width="500" height="272" /></a><br /> Elastislide是一个jQuery carousel插件。展示框会根据内容自动调整。<br /> <strong><a href="/misc/goto?guid=4958197528169283941" target="_new">项目地址</a></strong></p>    <h3>11. JCookies : HTTP Cookie Handling Plugin </h3>    <a href="https://simg.open-open.com/show/4c8886ade5fa4cacf804ce5f8907e597.jpg" rel="lightbox"><img class="aligncenter size-full wp-image-1750" title="jcookie" alt="jcookie" src="https://simg.open-open.com/show/4c8886ade5fa4cacf804ce5f8907e597.jpg" width="500" height="272" /></a>    <br /> jCookies能够让你存储任何数据类型如:字符串,数组,对象等。它通过JavaScript存储Cookies,然后通过服务器端代码如:C# 和PHP 读取数据。    <br />    <strong><a href="/misc/goto?guid=4958197528918823787" target="_new">项目地址</a></strong>