快捷導(dǎo)航

基于jQuery的圖片大小自動適應(yīng)實現(xiàn)代碼

更新時間：2010年11月17日 14:27:27 作者：

這個和以前弄的圖片遠(yuǎn)處放大有許多相同的地方，比如圖片預(yù)加載、有限容器顯示無限大圖片。

關(guān)于
這個和以前弄的圖片遠(yuǎn)處放大有許多相同的地方，比如圖片預(yù)加載、有限容器顯示無限大圖片。

大小計算：內(nèi)外兩個比例。

 
// 容器比例和圖片比例 
var dr = dw/dh, ir = iw/ih; 
if(dr>ir){ 
ih = dh; iw = ih * ir; 
}else{ 
iw = dw; ih = iw / ir; 
} 

居中顯示：CSS絕對定位，負(fù)邊距。

復(fù)制代碼代碼如下:

 
$img.css({width:iw,height:ih,position:'absolute',top:'50%',left:'50%',marginLeft:-iw/2,marginTop:-ih/2}) 

加載中和加載出錯：可自定義的參數(shù)。

HTML容器：
<div class="jq-img-autoresize" data-img-size="160,390" data-img-url="m1.jpg"></div>

如何使用：

復(fù)制代碼代碼如下:

 
$('div.jq-img-autoresize').imgAutoResizer({ 
loading : function () { $(this).text('loading..'); } 
,error : function () { $(this).text('無效..'); } 
}); 

所有代碼：

復(fù)制代碼代碼如下:

 
/* 
* 圖片等比縮放 
* @by ambar 
* @create 2010-11-17 
* @update 2010-11-17 
*/ 
$.fn.imgAutoResizer = function (options) { 
return this.each(function () { 
var opt = $.extend({ 
sizeAttr : 'data-img-size' 
,srcAttr : 'data-img-url' 
,error : null 
,loading : null 
}, options || {}); 
var $el = $(this), src = $el.attr(opt.srcAttr), size = $el.attr(opt.sizeAttr).split(','); 
// 容器寬高 
var dw = size[0], dh = size[1]; 
var $img = $('<img />', { src : src }), img = $img[0]; 
var autoresize = function () { 
if($el.data('img.complete')) return; 
// 圖片寬高 
var iw = img.width, ih = img.height; 
if(!iw || !ih) return; 
// 比例 
var dr = dw/dh, ir = iw/ih; 
if( !(dw > iw && dh > ih) ){ 
if(dr>ir){ 
ih = dh; iw = ih * ir; 
}else{ 
iw = dw; ih = iw / ir; 
} 
} 
// console.log(dr,':',iw,'@',ih); 
$el.data('img.complete',true).css({position:'relative',width:dw,height:dh,overflow:'hidden'}); 
$img.css({width:iw,height:ih,position:'absolute',top:'50%',left:'50%',marginLeft:-iw/2,marginTop:-ih/2}).appendTo($el.empty()); 
}; 
$img 
.load(autoresize) 
.error(function () { 
if($.isFunction(opt.error)) opt.error.call($el); 
}); 
if(img.complete){ 
if(img.width && img.height) autoresize(); 
}else{ 
if($.isFunction(opt.loading)) opt.loading.call($el); 
} 
}) 
}; 