一、插件介绍
项目中有图片的时候，有的宽大于高，有的宽小于高，尤其在做图片列表的时候，经常发现缩略图会有变形的。我们怎样来解决这一问题呢。
方法一：用photoshop来处理缩略图。小的项目还可以，大的项目，这样做难免会累的半死；
方法二：用jqthumb.js这款插件，只需要写上几句话，就可以让我们的项目中的缩略图快速解决！
jQThumb 兼容所有浏览器，包括 IE6。在高级浏览器中使用背景方式实现，并设置图片的尺寸（background-size）和位置（background-position）实现居中；在 IE6 等老旧的浏览器中使用图片的方式实现，并使用绝对定位和 margin 实现居中。
二、插件图片、DEMO及下载
三、使用教程
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jqthumb.min.js"></script>2、JavaScript
$('.img').jqthumb({
width:200,
height:200
});
部分参数配置实例
$('.original').jqthumb({
classname : 'jqthumb',
source : 'attr-src',
width : 440,
height : 294,
zoom : 1,
position : { y: '50%', x: '50%' },
show : false,
before : function(oriImage){},
after : function(imgObj){
fadeIn($(imgObj));
}
});
$('.example1').jqthumb({
classname : 'jqthumb',
source : 'attr-src',
width : '100%',
height : 121,
zoom : 1.3,
position : { y: '50%', x: '50%' },
show : false,
before : function(oriImage){},
after : function(imgObj){
fadeIn($(imgObj));
}
});
$('.example2').jqthumb({
classname : 'jqthumb',
source : 'attr-src',
width : '100%',
height : 121,
zoom : 1.3,
position : { y: '100%', x: '45%' },
show : false,
before : function(oriImage){},
after : function(imgObj){
fadeIn($(imgObj));
}
});
$('.example3').jqthumb({
classname : 'jqthumb',
source : 'attr-src',
width : '100%',
height : 295,
position : { y: '50%', x: '50%' },
show : false,
before : function(oriImage){},
after : function(imgObj){
fadeIn($(imgObj));
}
});
$('.example4').jqthumb({
classname : 'jqthumb',
source : 'attr-src',
width : '100%',
height : 295,
position : { y: '50%', x: '12%' },
show : false,
onDemand: true,
before : function(oriImage){},
after : function(imgObj){
fadeIn($(imgObj));
}
});
四、参数
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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 | 函数 | 所有图片处理后的回调函数 |
改造后代码：
好处：不同尺寸的地方调用时，不需要重复去定义宽高，宽高由js自动获取外围元素宽度得到。
在需要进行图片等比缩放的地方，添加类：scaleBox
<div class="picture scaleBox">
<img src="图片的链接地址" />
</div>
.jqthumb {
position: absolute;
left: 0px;
top: 0px;
}
.xxx .picture {
display: block;
overflow: hidden;
position: relative;
}
//图片等比缩放
function scaleImg(){
$(".scaleBox").each(function(){
$(this).find("img").jqthumb({
width: $(this).outerWidth(),
height: $(this).outerHeight(),
after: function(imgObj){
imgObj.css('opacity', 1).animate({opacity: 1},1000);
}
});
})
}
$(document).ready(function() {
scaleImg();//图片等比缩放
});
重点说明：如果与滚动等特效配合使用，scaleImg();必须在滚动等代码之后调用，否则会出现问题。
