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);

　　}

　　});

　　})

　　}