免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

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

时间:09-04 14:25 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  响应式的网站设计中,很重要的一个部分就是图片的响应式设计,今天我们将介绍一个超棒的帮助你生成响应式图片设计的jQuery插件 - jQuery picture。使用它能够帮助你快速的

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

在线演示   本地下载

响应式的网站设计中,很重要的一个部分就是图片的响应式设计,今天我们将介绍一个超棒的帮助你生成响应式图片设计的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

    相关阅读:

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

    精彩图文

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