jQuery_jquery를 기반으로 한 이미지 크기 자동 적응 구현 코드
- WBOY원래의
- 2016-05-16 18:16:131068검색
에 대하여이미지 사전 로딩, 무한한 이미지를 표시하는 제한된 컨테이너 등 멀리서 확대한 이전 이미지와 유사한 점이 많습니다.
크기 계산: 내부와 외부의 두 가지 비율.
코드 복사 코드는 다음과 같습니다.
// 컨테이너 비율과 이미지 비율
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
* 이미지 크기 조정
* @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 = $('
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
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.