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

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7281
9


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1341
46


라라벨 튜토리얼
1258
25


PHP 튜토리얼
1205
29

