日期:2012-8-31 来源:GBin1.com
响应式的网站设计中,很重要的一个部分就是图片的响应式设计,今天我们将介绍一个超棒的帮助你生成响应式图片设计的jQuery插件 - jQuery picture。使用它能够帮助你快速的生成支持响应式设计的图片。
主要特性
- 插件非常小,压缩版2kb
- 支持figure标签及其新加入的picture标签
- 支持主流浏览器
- 使用方便
如何使用
初始化js插件:
$(function(){
$('figure, picture').picture();
});
HTML:
大家可以看到以上代码中,我们设定了media query的对应值,这里我们使用html5的data属性设定不同宽度的显示图片。
另外这个插件还支持picture标签,这个标签还不是合法的html标签。
HTML:
同样调用js,如下:
........
来源:超棒的jQuery响应式图片处理插件:jQuery picture
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/8288/viewspace-742365/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/8288/viewspace-742365/