首页风格
门户
博客

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

日期:2012-8-31  来源:GBin1.com

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

在线演示  本地下载

响应式的网站设计中,很重要的一个部分就是图片的响应式设计,今天我们将介绍一个超棒的帮助你生成响应式图片设计的jQuery插件 - jQuery picture。使用它能够帮助你快速的生成支持响应式设计的图片。

主要特性

  • 插件非常小,压缩版2kb
  • 支持figure标签及其新加入的picture标签
  • 支持主流浏览器 
  • 使用方便

如何使用

初始化js插件:

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

HTML:

    <figure data-media="http://placehold.it/370x185" data-media440="http://placehold.it/440x220" data-media600="http://placehold.it/600x300" title="A Half Brained Idea">

<a href="http://www.gbin1.com">
<noscript>
<img src="http://placehold.it/600x300" alt="gbin1 demo">
</noscript>
</a>

</figure>

大家可以看到以上代码中,我们设定了media query的对应值,这里我们使用html5的data属性设定不同宽度的显示图片。

另外这个插件还支持picture标签,这个标签还不是合法的html标签。

HTML:

<picture alt="A Half Brained Idea">
<source src="assets/images/small.png">
<source src="assets/images/medium.png" media="(min-width:440px)">
<source src="assets/images/large.png" media="(min-width:600px)">
<noscript>
<img src="assets/images/large.png" alt="A Half Brained Idea">
</noscript>
</picture>

同样调用js,如下:

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

如果你需要支持IE6/7/8,要知道它们不支持media queries,所以你需要使用Respond

希望大家喜欢这个插件!

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

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. yushan

    不错,不过兼容性有待考究
    2012-8-31 下午5:43
今日推荐