一、插件介绍
项目中有图片的时候，有的宽大于高，有的宽小于高，尤其在做图片列表的时候，经常发现缩略图会有变形的。我们怎样来解决这一问题呢。
方法一：用photoshop来处理缩略图。小的项目还可以，大的项目，这样做难免会累的半死；
方法二：用jqthumb.js这款插件，只需要写上几句话，就可以让我们的项目中的缩略图快速解决！
jQThumb 兼容所有浏览器，包括 IE6。在高级浏览器中使用背景方式实现，并设置图片的尺寸（background-size）和位置（background-position）实现居中；在 IE6 等老旧的浏览器中使用图片的方式实现，并使用绝对定位和 margin 实现居中。
二、插件图片、DEMO及下载
三、插件作者下载地址
作者： Pak Cheong
最新版本 : 1.9.3
需要 : jQuery >=v1.3.0 or Zepto (with zepto-data plugin) >=v1.0.0
官方下载地址： https://github.com/pakcheong/jqthumb
官方本站下载： http://www.ijquery.cn/study/demo/jqthumb/jqthumb-1.9.3.zip
官方本站查看： http://www.ijquery.cn/study/demo/jqthumb/jqthumb-1.9.3/src/demo.jquery.html
官方本站查看： http://www.ijquery.cn/study/demo/jqthumb/jqthumb-1.9.3/src/demo.zepto.html
四、兼容性
需要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、JavaScript
$(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 | 函数 | 所有图片处理后的回调函数 |