帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）

   <p>        自适应设计（Responsive Layouts）是时下网页设计领域最热门的话题之一，自适应设计的目标是要让产品界面能够响应用户的行为，根据不同终端设备自动调整尺寸，带给用户良好的使用体验。下面是收集的15款优秀的自适应 <strong>jQuery</strong> 插件，希望这些插件能够帮助到您。</p>    <h3><strong>01. <a href="/misc/goto?guid=4958184846134874306" target="_blank">Slides</a></strong></h3>    <p>Slides 是一款优秀的幻灯片插件，能够帮助开发者制作出优雅的幻灯片效果。</p>    <p><img title="slides" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/57af13f944f82edd3a78cdea3c9500a4.jpg" width="580" height="305" /></p>    <h3>02. <a href="/misc/goto?guid=4958188549303377295" target="_blank">FlexSlider</a></h3>    <p>另一款优秀的幻自适应幻灯片插件，支持所有主流的浏览器，提供水平和垂直两种方向并带有丰富的动画效果。</p>    <p><img title="flexslider" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/721984efa3ca668c89fdc37c5402422d.jpg" width="580" height="268" /></p>    <h3>03. <a href="/misc/goto?guid=4958187542206624962" target="_blank">Fit Text</a></h3>    <p>FitText 是一款文本大小自动调整插件 ，使用这款插件能够让你的Web项目在屏幕宽度不同的设备上自动调整字体大小。</p>    <p><img title="fit-text" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/be0d47cac4a5f7833ef20bd78237b1d8.jpg" width="580" height="175" /></p>    <h3>04. <a href="/misc/goto?guid=4958323261810690930" target="_blank">Responsly</a></h3>    <p>一款轻量的响应式组件，目前提供了幻灯片和手风琴功能，可以很容易集成到网站项目中。</p>    <p><img title="Responsly" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/ce728c846358f866099bd545053653c3.jpg" width="580" height="216" /></p>    <h3>05. <a href="/misc/goto?guid=4958197528169283941" target="_blank">Elastislide</a></h3>    <p>Elastislide 是一款非常优秀的响应式 jQuery 幻灯片插件，集成了 Touchwipe 插件以支持触屏设备。</p>    <p><img title="elastiside" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/62200b430f36ff2f02375919274a237d.jpg" width="580" height="247" /></p>    <h3>06. <a href="/misc/goto?guid=4958184656266865134" target="_blank">Photo Swipe</a></h3>    <p>Photo Swipe 是一款用于移动设备的相册插件，能够帮助你的移动应用增加吸引力。</p>    <p><img title="photoswipe" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/ffa869c45ba5cb34f50c85e12e0d0092.jpg" width="580" height="264" /></p>    <h3>07. <a href="/misc/goto?guid=4958192496357847873" target="_blank">Responsive Image Gallery</a></h3>    <p>这款相册插件能够自适应屏幕尺寸，同时支持按键方式的导航功能。</p>    <p><img title="responsive-image-gallery" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/ad55a2ba6af4431ac170d339521e78af.jpg" width="580" height="266" /></p>    <h3>08. <a href="/misc/goto?guid=4958317065124610780" target="_blank">Isotope</a></h3>    <p><span>Isotype 这款优秀的 </span><a href="/misc/goto?guid=4958342739992244490" target="_blank"><strong>jQuery</strong></a><span> 插件，用于创建动态的，智能的布局，这款插件能够对一组页面项目进行过滤、排序等很多操作。</span></p>    <p><img title="isotope" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/0708d6331b758804d400e30326c5a532.jpg" width="580" height="322" /></p>    <h3>09. <a href="/misc/goto?guid=4958188992257659952" target="_blank">Adaptive Images</a></h3>    <p>Adaptive Images 插件能够检测访问者屏幕尺寸，自适应屏幕宽度，能够非常方便的嵌入到你的项目中。</p>    <p><img title="the-adaptive-images" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/0fea2146b8936952e179b23f82780cf0.jpg" width="580" height="269" /></p>    <h3>10. <a href="/misc/goto?guid=4958327161705086140" target="_blank">Jquery Responsive Thumbnail Gallery Plugin</a></h3>    <p>这款 <a href="/misc/goto?guid=4958342739992244490" target="_blank"><strong>jQuery</strong></a> 插件带有缩略图功能，能够根据容器的尺寸自适应。</p>    <p><img title="jquery-responsive-thumbnail" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/95bc67b433e754209cddffa176752c4b.jpg" width="580" height="331" /></p>    <h3>11. <a href="/misc/goto?guid=4958327965796831409" target="_blank">Scrolldeck</a></h3>    <p>一款非常棒的自适应幻灯片插件，使用 Scrollorama 插件和键盘事件监听来实现幻灯片的切换。</p>    <p><img title="scroll-deck" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/2930ac885be7afb471142f7998bba2d8.jpg" width="580" height="268" /></p>    <h3>12. <a href="/misc/goto?guid=4958332589036939749" target="_blank">Responsive Slides</a></h3>    <p>ResponsiveSlides.js 是一款轻量的幻灯片插件支持所有的主流浏览器，包括IE6在内的所有IE版本。</p>    <p><img title="responsive-slide" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/ee2dbc238d572286edaf00dda2e5a3b6.jpg" width="580" height="268" /></p>    <h3>13. <a href="/misc/goto?guid=4958332590581506245" target="_blank">Hoverizr</a></h3>    <p>Hoverizr 是另一款轻量的 jQuery 自适应插件，支持灰阶变换（Gray Scale）。</p>    <p><img title="hoverizr" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/779f488f646fa6ea1080f28a9d4464c0.jpg" width="580" height="399" /></p>    <h3>14. <a href="/misc/goto?guid=4958342745196897006" target="_blank">Fancy Box</a></h3>    <p>Fancy Box 是一款非常优秀的弹窗插件，能够为图片、HTML内容和其它多媒体内容提供优雅的弹出缩放效果。</p>    <p><img title="fancy-box" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/ca3edb26ecb65827ed6c2c7f772d2a2d.jpg" width="580" height="315" /></p>    <h3>15. <a href="/misc/goto?guid=4958342745995950805" target="_blank">Amazium</a></h3>    <p>Amazium 是一个基于 960 网格系统的自适应 CSS 框架，能够帮助你构建自适应的网页布局。</p>    <p><img title="amazium" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）" src="https://simg.open-open.com/show/3c2dd06833f954e4ac2af7c07e919e84.jpg" width="580" height="410" /><br /> <br /> 转自：http://www.cnblogs.com/lhb25/archive/2012/06/04/30-jquery-plugins-to-help-with-responsive-layouts-a.html</p>