用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); } }); }) }
网友评论文明上网理性发言 已有0人参与
发表评论: