分享20个响应式web设计的必备jQuery插件
jjfat 12年前
<p>日期：2012-9-12 来源：<a href="/misc/goto?guid=4958523995396018545">GBin1.com</a></p> <p>响应式设计(responsive design)在近些年是非常流行的web设计，能够帮助你有效的针对不同设备的显示屏幕自适应的显示内容，大大的提高了用户的使用体验和web设计的要求，作为最为流行的jQuery来说，也提供了很多现成的插件帮助你实现响应式设计，在今天的这套插件推荐中，我们将推荐给大家20个不错的响应式设计常用插件，希望大家喜欢！</p> <h2><a href="/misc/goto?guid=4958193490916835242" target="_blank">jQuery Masonry — A layout plugin for jQuery</a></h2> <p>相信大家对于这个<a title="masonry" href="/misc/goto?guid=4958523995531465443" target="_blank">jQuery布局插件</a>肯定不陌生，很多网站都使用它开发瀑布流布局。 </p> <img class="aligncenter size-full wp-image-32049" alt="jQuery Masonry" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/jQuery-Masonry.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958317065124610780" target="_blank">Isotope — An exquisite jQuery plugin for magical layouts</a></h2> <p>另外一个不错的布局插件，<a title="isotope" href="/misc/goto?guid=4958523995645958987" target="_blank">以前文章</a>中我们也介绍过。 </p> <img class="aligncenter size-full wp-image-32045" alt="Isotope -- An exquisite jQuery plugin for magical layouts" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Isotope-An-exquisite-jQuery-plugin-for-magical-layouts.jpg" width="550" height="275" /> <br /> <h2><a title="responsive-picture" href="/misc/goto?guid=4958523995734856126" target="_blank">jQuery picture</a></h2> <p><a title="responsive picture" href="/misc/goto?guid=4958523995831616825" target="_blank">以前文章</a>中介绍过这个超棒的响应式图片处理插件 </p> <p><img alt="jquerypicture" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/jquerypicture.jpg" /> </p> <p>还记得这个插件吧，针对不同的屏幕设备应用不同大小的图片 </p> <h2><a href="/misc/goto?guid=4958523995913603380" target="_blank">Really Simple Slideshow</a></h2> <p><img alt="simpleslider" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/simpleslider.jpg" /></p> <p>超简单的幻灯，支持响应式设计</p> <h2><a href="/misc/goto?guid=4958332590581506245" target="_blank">Hoverizr – Responsive jQuery Photo manipulation plugin</a></h2> <p>一个支持图片响应式处理的插件 </p> <img class="aligncenter size-full wp-image-32046" alt="Hoverizr" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Hoverizr.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958322766405738824" target="_blank">Response JS</a></h2> <img class="aligncenter size-full wp-image-32047" alt="Response JS" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Response-JS.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958192496357847873" target="_blank">Responsive Image Gallery with a Thumbnail Carousel</a></h2> <p>支持响应式的图片轮播插件 </p> <img class="aligncenter size-full wp-image-32048" alt="Responsive Image Gallery with a Thumbnail Carousel" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Responsive-Image-Gallery-with-a-Thumbnail-Carousel.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958327965796831409" target="_blank">scrolldeck</a></h2> <p>用来创建滚动式幻灯的jQuery插件 </p> <img class="aligncenter size-full wp-image-32050" alt="scrolldeck" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/scrolldeck.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958184656266865134" target="_blank">PhotoSwipe</a></h2> <p>支持不同设备的幻灯插件 </p> <img class="aligncenter size-full wp-image-32051" alt="PhotoSwipe" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/PhotoSwipe.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958201085384655479" target="_blank">Supersized – Fullscreen Background Slideshow</a></h2> <p><a title="supersized" href="/misc/goto?guid=4958523996204003332" target="_blank">以前文章</a>我们也介绍过，超棒的全屏幕幻灯，支持响应式 </p> <img class="aligncenter size-full wp-image-32053" alt="Supersized – Fullscreen Background Slideshow" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Supersized-%E2%80%93-Fullscreen-Background-Slideshow1.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958332583091611038" target="_blank">The Heads-Up Grid</a></h2> <img class="aligncenter size-full wp-image-32054" alt="The Heads-Up Grid" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/The-Heads-Up-Grid.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958197528169283941" target="_blank">Elastislide – A Responsive jQuery Carousel Plugin</a></h2> <p>另外一个轮播式幻灯插件 </p> <img class="aligncenter size-full wp-image-32055" alt="Elastislide – A Responsive jQuery Carousel Plugin" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Elastislide-%E2%80%93-A-Responsive-jQuery-Carousel-Plugin.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958332593648367488" target="_blank">Transform a Menu to a Dropdown for Small Screens</a></h2> <p>帮助你将导航转换为下拉菜单 </p> <img class="aligncenter size-full wp-image-32057" alt="Transform a Menu to a Dropdown for Small Screens" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Transform-a-Menu-to-a-Dropdown-for-Small-Screens.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958332589036939749" target="_blank">ResponsiveSlides.js</a></h2> <p>响应式幻灯插件 </p> <img class="aligncenter size-full wp-image-32058" alt="ResponsiveSlides-js" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/ResponsiveSlides-js.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958189137622498742" target="_blank">Automatic Image Montage with jQuery</a></h2> <img class="aligncenter size-full wp-image-32059" alt="Automatic Image Montage with jQuery" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Automatic-Image-Montage-with-jQuery.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958332592104091188" target="_blank">Doubletake</a></h2> <img class="aligncenter size-full wp-image-32060" alt="Doubletake" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Doubletake.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958320026409186987" target="_blank">Blueberry – A responsive jQuery image slider</a></h2> <p>响应式图片幻灯 </p> <img class="aligncenter size-full wp-image-32062" alt="Blueberry – A responsive jQuery image slider" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Blueberry-%E2%80%93-A-responsive-jQuery-image-slider.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958188992257659952" target="_blank">Adaptive Images in HTML</a></h2> <p>帮助你针对屏幕自动创建HTML图片 </p> <img class="aligncenter size-full wp-image-32063" alt="Adaptive Images in HTML" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/Adaptive-Images-in-HTML.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958187542206624962" target="_blank">FitText — jQuery plugin for inflating web type</a></h2> <p>一个帮助你生成合适字体的jQuery插件 </p> <img class="aligncenter size-full wp-image-32064" alt="FitText -- jQuery plugin for inflating web type" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/FitText-jQuery-plugin-for-inflating-web-type.jpg" width="550" height="275" /> <h2><a href="/misc/goto?guid=4958197524504456217" target="_blank">FitVids.JS</a></h2> <p>帮助你生成响应式视频的jQuery插件 </p> <img class="aligncenter size-full wp-image-32065" alt="FitVids-js" src="http://www.gbin1.com/technology/jqueryplugins/20120912-jqueryplugins-for-responsive-design/FitVids-js.jpg" width="550" height="275" /> <p><span style="font-size:16px;">来源：</span><a href="/misc/goto?guid=4958523995396018545"><span style="font-size:16px;">分享20个响应式web设计的必备jQuery插件</span></a></p>