欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery動(dòng)態(tài)進(jìn)行圖片縮略的原理及實(shí)現(xiàn)

 更新時(shí)間：2013年08月13日 16:45:40   作者：  
圖片縮略在某些情況下還是比較實(shí)用的，比如在做一些商品的預(yù)覽圖縮略等等，下面為大家介紹下具體的實(shí)現(xiàn)思路及代碼，有需求的朋友可以參考下
復(fù)制代碼 代碼如下:

//頁面加載完執(zhí)行resizeImage()函數(shù)
$(document).ready(resizeImage());

function resizeImage(){
$(".pic a img").each(function(){
//加載圖片至內(nèi)存，完成后執(zhí)行
$(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))
{
//重新設(shè)置img的width和height
$(this).width((boxHeight*imgWidth)/imgHeight);
$(this).height(boxHeight);
//讓圖片居中顯示
var margin=(boxWidth-$(this).width())/2;
$(this).css("margin-left",margin);
}
else
{
//重新設(shè)置img的width和height
$(this).width(boxWidth);
$(this).height((boxWidth*imgHeight)/imgWidth);
//讓圖片居中顯示
var margin=(boxHeight-$(this).height())/2;
$(this).css("margin-top",margin);
}
});
})
}

相關(guān)文章

最新評論