최근에 JS OOP를 배워서 이렇게 썼습니다.
사용 방법:
$(".viewArea img").zoom({height:74,width:103})
효과 데모:
http://demo.jb51.net/html/jquery_img/jquery_img.htm
코드:
(function($){
$.fn.zoom = function(settings){
// 일부 기본 구성;
설정 = $.extend({
높이:0,
너비:0,
loading:"lightbox-ico-loading.gif"
},settings);
var 이미지 = this ;
$(images).hide();
var loading = new Image()
loading.className="loading"
loading.src = 설정. loading;
$( Images).after(loading);
//미리 로드 중
var preLoad = function($this){
var img = new Image(); = $this.src;
if (img.complete) {
processImg.call($this);
return;
}
//$this.src = loading.src; //오류가 발생합니다.
img.onload = function(){
//$this.src = this.src의 크기로 인해 //잘못된 크기가 얻어집니다.
processImg.call ($this);
img .onload=function(){};
}
}
//이미지 크기 계산
function processImg(){
//if( settings.height===0|| settings.width ===0) return;
var m = this.height-settings.height;
var n = this.width - settings.width; if(m>n)
this.height = this.height>settings.height ? settings.height :
this.height;
else
this.width = this.width >settings. 너비 ? settings.width :
this.width;
$(this).next(".loadding").remove()
$(this).show()
return $(images).each( function(){
preLoad(this);
})
}
})(jQuery)
효과는 다음과 같습니다: