jquery响应式布局_30个jQuery响应式布局插件

jquery响应式布局

设计师使用的一些最有用的jQuery响应式布局插件的广泛列表，这些插件旨在为其网站设计响应式布局。 响应式布局在Web设计领域中相对较新，并且由于移动Web设计的普及和屏幕分辨率的提高而变得越来越流行。 请享用！

相关文章：

• 10个jQuery插件来帮助响应式布局

1. jquery-quickfit

一种快速而肮脏的方法，可将文本放入其周围的容器中。

源 演示

2.小​​屏幕下拉菜单

“五个简单步骤”网站采用具有简洁功能的响应式设计。 当浏览器窗口狭窄时，右上角的菜单将从典型菜单链接转换为下拉菜单。 本教程将使用jQuery向您展示如何重新创建它。

源 演示

3.加倍

根据浏览器宽度动态更新图像的src。 从HTML中的小型移动友好图片开始。 Doubletake将在必要时使用一组定义的断点来更新图像SRC。

源 演示

4. ResponsiveSlides.js

一个很小的jQuery插件，使用“ ul”中的图像创建响应式幻灯片。 它适用于各种浏览器，包括IE6及更高版本的所有IE版本。

来源+演示

5. jQuery响应式缩略图库

该插件允许我们以2种不同的尺寸定义每个图像，只需设置一个断点宽度，它就可以根据屏幕尺寸决定显示哪个图像。

来源+演示

6.灯箱

是一个jQuery UI Mediabox，可以显示多种类型的内容，例如图像，YouTube和Vimeo视频。 它具有许多独特的功能，例如Panorama和Live Re-size，并且像其他jQuery UI小部件一样，已准备好ThemeRoller。

源 演示

7.同位素

是用于智能动态布局的jQuery插件，仅靠CSS不能实现。 您可以使用jQuery选择器轻松隐藏和显示项目元素，并通过排序对项目元素重新排序。

来源+演示

8. jQuery自动图像蒙太奇

当考虑某些限制时（例如使用全屏时的窗口大小，正确的图像编号以填充所有可用空间或使用中的图像大小），以类似蒙太奇的方式排列图像可能是一项艰巨的任务。

源 演示

9. wmuSlider

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

这是一个易于设置的响应式图像滑块插件。 它具有导航和分页控件，动画和触摸支持。

来源+演示

10.平视网格

抬头表格网格是用于浏览器内网站开发的响应式重叠网格。 创建它是为了使其相对容易地适应响应式Web设计的需求。

来源+演示

11.自适应媒体

为什么使用AdaptiveMedia？ 您以桌面为中心的图像会缓慢加载，并会向访问者收取小屏幕设备（如手机）的费用。 这就是为什么; 您可以为不同的屏幕尺寸创建多个图像，并使用AdaptiveMedia加载它们。

源 演示

12. Hoverizr

一个灵敏的jQuery插件，可在任何目标图像的顶部（或下方）输出经过处理的图像，并具有3种内置效果：灰度，模糊和色彩反转。

来源+演示

13. TinyNav.js

在小屏幕上浏览时，将“使用列表创建的导航”转换为选择下拉列表。 它还会自动选择当前页面，并为该项目添加selected =“ selected”。

来源+演示

14. HTML中的自适应图像

检测访问者的屏幕尺寸，并自动创建，缓存和交付设备合适的网页嵌入式HTML图像的重新缩放版本。

来源+演示

15.动态轮播

轮播插件，用于响应式布局。

来源+演示

16.响应式菜单

这也是一个简单的jQuery插件，用于将基于列表的导航转换为针对移动设备和较低浏览器宽度的select元素。

来源+演示

17.照片刷卡

这是一个jQuery Mobile插件，用于创建专门针对移动设备的图库。 它提供了直观的界面，可以与移动网站上的图像进行交互。

来源+演示

18. scrolldeck.js

使用此插件，您可以轻松地创建响应式幻灯片/演示文稿/登录页面网站。 它包括scrollorama提供的漂亮的简单动画。

来源+演示

19. TouchCarousel

是适用于移动设备的轻量级jQuery内容滚动器，具有针对移动设备和台式机的触摸导航。 可用作旋转木马，横幅旋转器和图片库。

源 演示

20. jQuery和CSS3的响应式水平布局

这样做的想法是使每个面板可单独滚动，并在从菜单中单击或选择视口左侧的内容面板后对其进行动画处理。

源 演示

21. Responsly.js

包含一组响应式小部件，响应式图像滑块就是其中之一。 这是一个相当简单的滑块，具有键盘导航，间隔，自动启动以及prev＆nav功能。

来源+演示

22.相机

相机幻灯片是基于Diapo幻灯片的开源项目，但具有其他功能，例如响应式，公共方法，皮肤，缓和和更多过渡。

来源+演示

23. UnoSlider

一个完全响应，启用触摸，移动优化的jQuery滑块插件。

来源+演示

24. FlexSlider

响应式滑块，带有许多可定制的设置。 它支持回调API，触摸滑动，自定义导航选项，您可以在幻灯片中使用任何html元素。

源 演示

25. SwipeJS

轻巧的移动滑块，具有1：1的触摸运动，可靠的边界，防止滚动，旋转/调整大小和完全与库无关的功能。

来源+演示

26.蓝莓

一个实验性的开源jQuery图像滑块插件，专门为处理流畅/响应的Web布局而编写。

来源+演示

27. Breakpoints.js

XOXCO的黑客和设计师项目。 它为您的响应式设计定义了断点。 当浏览器进入或退出断点时，Breakpoints.js将触发自定义事件。

来源+演示

28. jQuery石工

jQuery的动态布局插件。 这是CSS浮动的另一面。 浮动时，将元素水平和垂直排列。

来源+演示

29. jQuery响应式网络

jQuery插件通过根据操作系统，浏览器和分辨率将动态类添加到BODY类中来帮助设计更具响应性和自适应性的网站。

来源+演示

30.响应JS

轻巧的jQuery插件，可为Web设计人员提供用于构建响应式网站的工具。 它提供了语义方法，可以通过HTML5数据属性逐步根据断点和服务图像动态交换代码块。

来源+演示

翻译自: https://www.sitepoint.com/30-jquery-responsive-layout-plugins/

jquery响应式布局