冠富商务通中文社区

 找回密码
 立即注册
查看: 4|回复: 0
打印 上一主题 下一主题
收起左侧

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

[复制链接]
跳转到指定楼层
楼主
发表于 2017-10-3 15:08:32 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式


响应式的网站设计中,很重要的一个部分就是图片的响应式设计,今天我们将介绍一个超棒的帮助你生成响应式图片设计的jQuery插件 - jQuery picture。使用它能够帮助你快速的生成支持响应式设计的图片。
主要特性
1.插件非常小,压缩版2kb
2.支持figure标签及其新加入的picture标签
3.支持主流浏览器
4.使用方便
如何使用
初始化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
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|关于我们|申请友链|Archiver|手机版|拘留所|冠富商务通

GMT+8, 2026-5-14 10:57 , Processed in 0.230001 second(s), 11 queries , Wincache On.

Powered by HCMS Version 2.0

© 2008-05-14 guanfu.net.cn

快速回复 返回顶部 返回列表