加载中 ...
首页 > 建站 > 资源 > 正文

超棒的jQuery响应式图片处理插件:jQuery picture

2019-02-10 09:37:56 来源:

在线演示 ? 当地下载

响应式的网站设计中,很主要的一个部门就是图片的响应式设计,今天我们将先容一个超棒的帮忙你天生响应式图片设计的jQuery插件 - jQuery picture。利用它可以或许帮忙你快速的天生撑持响应式设计的图片。

首要特征

1.插件很是小,紧缩版2kb

2.撑持figure标签及其新插手的picture标签

3.撑持主流阅读器

4.利用便利

若何利用

初始化js插件:

$(function(){
??????? $('figure, picture').picture();
});

HTML:


???????
???????????
???????

年夜家可以看到以上代码中,我们设定了media query的对应值,这里我们利用html5的data属性设定分歧宽度的显示图片。

别的这个插件还撑持picture标签,这个标签还不是正当的html标签。

HTML:


???
???
???
???

一样挪用js,以下:

$(function(){
??????? $('figure, picture').picture();
});

若是你需要撑持IE6/7/8,要知道它们不撑持media queries,所以你需要利用Respond。

但愿年夜家喜好这个插件!

来历:超棒的jQuery响应式图片处置插件:jQuery picture

“广域创业网”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与

我们联系删除或处理,客服邮箱,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同

其观点或证实其内容的真实性。