响应式设计是指页面可以自动响应用户的设备环境,可自动调整分辨率、图片尺寸及相关功能等,今天就给大家推荐一个响应式图片显示效果插件 - jQuery Picture。
jQuery Picture 是一个非常容易使用的轻量级 jQuery 插件,它可用于实现响应式的图片显示效果。它是基于 HTML5 的,可将 figure 和 picture 标签中的图片设置为响应式图片。使用方法也很简单,只需在标签中设置好图片,再初始化 JS 就可以了。
如何使用
首先添加 jQuery 框架和 jQuery Picture 插件
<script src="jquery.min.js"></script>
<script src="jquery-picture-min.js"></script>
之后在 figure 或 picture 标签中添加图片,如下
<figure data-media="small.jpg" data-media440="medium.jpg" data-media600="large.jpg" title="给力技术">
<a href="http://site518.net">
<img src="large.jpg" alt="给力技术">
</a>
</figure>
最后初始化就完成了
$('figure').picture();