jqthumb.js缩略图插件-缩略图不变形不拉伸显示

jqthumbs

 

插件介绍

项目中有图片的时候,有的宽大于高,有的宽小于高,尤其在做图片列表的时候,经常发现缩略图会有变形的。我们怎样来解决这一问题呢。

用jqthumb.js这款插件,只需要写上几句话,就可以让我们的项目中的缩略图快速解决!

jQThumb 兼容所有浏览器,包括 IE6。在高级浏览器中使用背景方式实现,并设置图片的尺寸(background-size)和位置(background-position)实现居中;在 IE6 等老旧的浏览器中使用图片的方式实现,并使用绝对定位和 margin 实现居中。

php也有一款很好用的缩略图裁剪插件:timthumb.php ?。大家去百度一下用法很简单!

兼容性

需要jquery1.3.0版以上,或者 zepto1.0.0以上。

支持:IE6+ 、Chrome 、Firefox 、Opera、Safari .

使用教程

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jqthumb.min.js"></script>

2、调用

$(function(){
 $('img').jqthumb();
});

参数

属性/方法类型默认值说明
classname‘jqthumb’缩略图容器的 class
width整数100缩略图的宽度,单位为 px
height整数100缩略图的高度,单位为 px
position{top:’50%’, left:’50%’}缩略图的位置,默认为 50%,即水平并且垂直居中
source字符串‘src’指定图像源属性,默认为 src
showoncomplete布尔值true处理后时候立即显示,如果为 false 则不自动显示,需要额外设置让它显示,比如使用回调函数 after、done
before函数处理前的回调函数
after函数某一个图片处理后的回调函数
done函数所有图片处理后的回调函数

下载地址

要求:?jQuery >=v1.3.0 or Zepto (with zepto-data plugin) >=v1.0.0

GitHub:?https://github.com/pakcheong/jqthumb