软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 新闻 专题 热点
您的位置: 广信之家 > 免费资源 > 分享资源 > 文章正文

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插

时间:01-08 22:53 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  自适应布局的设计是最近大家谈论的非常多的概念,他的设计理念在于无论客户端是什么样类型的设备,也不管设备的屏幕显示的大小,都可以提供指定并且优化的布 局。典型的例

自适应布局的设计是最近大家谈论的非常多的概念,他的设计理念在于无论客户端是什么样类型的设备,也不管设备的屏幕显示的大小,都可以提供指定并且优化的布 局。典型的例子是,如果你使用Media Queries来重新定义整个布局额大小,同时你也需要定义导航,表单,图片,幻灯等等元素。这就是为什么今天我们推荐给大家10个jQuery插件帮助大家设计自适应的布局的原因。希望大家喜欢!

1. The Heads-Up Grid

使用HTML,CSS和Javascript开发。head-up Grid是一个符合responsive的overlay grid,专门为浏览器网站开发设计。用来相对简单的来满足对于responsive web设计的需要。

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

2. FitVids.JS

一个轻量价的,为video嵌入自适应宽度而开发的jQuery插件。为了实现responsive web设计中的流动宽度效果。

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

3. AdaptiveMedia

使用adaptivemedia,你只需要一个CSS文件来定义所有的窗口大小,不需要更少或者一样的解决方式,不需要CSS3 media queries,小于3kb,HTML5和IE6兼容。用户callback:在完成所有任务之前完成用户方法。

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

4. rlightbox

一个jQuery UI的mediabox,可以用来显示各种类型的内容,例如,图片,youtube和vimeo视频。拥有很多独特的特性例如, 全景图和实时改变大小,和其它的jQuery UI一样,支持ThemeRoller。

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

5. Elastislide

一个responsive jQuery的轮播器,在不同的屏幕大小上会自适应尺寸

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

6. Responsive Image Gallery with Thumbnail Carousel

使用Elastislide这个插件,这个技巧将展示如何执行一个responsive的web设计图片画廊,能够根据可视区域来改变大小。拥有一个切换器来切换缩略图轮播。支持键盘d导航

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

7. Seamless Responsive Photo Grid

用来管理照片的比例

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

8. Responsive jQuery Slideshow

这个演示展示了如何实现缩放的自适应。和kiskolabs.com使用一样的实现方式

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

9. wmuSlider

记住还处于实验状态,使用MIT license。

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

10. Doubletake

用来试验一个概念,Doubletake是一个根据浏览器宽度动态更新图片src属性的插件。开始时是一个手机上可以浏览的小图片。然后doubletake会使用一系列定义断点来根据需要更新src

分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

via jquery4u

来源: 分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插件

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与分享10款帮助你设计自适应布局(Responsive Layout)的jQuery插无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈