Jquery动态进行图片缩略

欢迎大家访问我的个人网站 萌萌的IT人

//页面加载完执行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);
            }
        });            
    })
}