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

206 阅读 0 评论 136 点赞

我是靠谱客的博主会撒娇镜子，最近开发中收集的这篇文章主要介绍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); 
} 
}); 
}) 
} 