jQuery_jquery를 기반으로 한 이미지 크기 자동 적응 구현 코드-JS 튜토리얼-php.cn

에 대하여이미지 사전 로딩, 무한한 이미지를 표시하는 제한된 컨테이너 등 멀리서 확대한 이전 이미지와 유사한 점이 많습니다.

크기 계산: 내부와 외부의 두 가지 비율.

코드 복사 코드는 다음과 같습니다.

 
// 컨테이너 비율과 이미지 비율
var dr = dw/dh, ir = iw/ih; 
if(dr>ir){ 
ih = dh; iw = ih * ir 
}else{ 
iw = dw; ih = iw /ir; 
} 

중앙 표시: CSS 절대 위치 지정, 음수 여백.

코드 복사 코드는 다음과 같습니다.

 
$img.css({width:iw ,높이: ih,위치:'절대',위:'50%',왼쪽:'50%',marginLeft:-iw/2,marginTop:-ih/2}) 

로드 중 및 로드 오류: 사용자 정의 가능한 매개변수.

HTML 컨테이너:

사용방법:

코드 복사 코드는 다음과 같습니다.

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

모든 코드:

코드 복사 코드는 다음과 같습니다.

/*
* 이미지 크기 조정
* @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 = $('', { 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
// ratio
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); 'img.complete',true ).css({position:'relative',width:dw,height:dh,overflow:'hidden'})
$img.css({width:iw,height:ih ,위치:'절대', 위쪽:'50%',왼쪽:'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);
}
})
}

데모 주소:
http://demo.jb51.net /js/imgAutoResizer/

패키지 다운로드:http://xiazai.jb51.net/201011/yuanma/imgAutoResizer.rar