软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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