最近在学习JS的OOP所以写了这么个东西

使用方法：

$(".viewArea img").zoom({height:74,width:103});

效果演示：

http://demo.jb51.net/html/jquery_img/jquery_img.htm

代码：

复制代码 代码如下:

(function($){

$.fn.zoom = function(settings){

//一些默认配置；

settings = $.extend({

height:0,

width:0,

loading:"lightbox-ico-loading.gif"

},settings);

var images = this;

$(images).hide();

var loadding = new Image();

loadding.className="loadding"

loadding.src = settings.loading;

$(images).after(loadding);

//预加载

var preLoad = function($this){

var img = new Image();

img.src = $this.src;

if (img.complete) {

processImg.call($this);

return;

}

//$this.src = loadding.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.width ? settings.width :

this.width;

$(this).next(".loadding").remove()

$(this).show();

}

return $(images).each(function(){

preLoad(this);

});

}

})(jQuery);

效果是这样的：