Jquery动态进行图片缩略的原理及实现

代码如下:

//页面加载完执行resizeimage()函数
$(document).ready(resizeimage());

function resizeimage(){
$(".pic a img").each(function(){
//加载图片至内存，完成后执行
$(this).load(function(){
//获得原始图片高宽
var imgwidth = $(this).width();
var imgheight = $(this).height();
//获得图片所在div高宽
var boxwidth=$('.pic').width();
var boxheight=$('.pic').height();
//比较imgbox的长宽比与img的长宽比大小
if((boxwidth/boxheight)>=(imgwidth/imgheight))
{
//重新设置img的width和height
$(this).width((boxheight*imgwidth)/imgheight);
$(this).height(boxheight);
//让图片居中显示
var margin=(boxwidth-$(this).width())/2;
$(this).css("margin-left",margin);
}
else
{
//重新设置img的width和height
$(this).width(boxwidth);
$(this).height((boxwidth*imgheight)/imgwidth);
//让图片居中显示
var margin=(boxheight-$(this).height())/2;
$(this).css("margin-top",margin);
}
});
})
}