最近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 イメージ = this ;
$(images).hide();
varloading = new Image();
loading.className="loading"
loading.src = 設定。読み込み;
$(images).after(loading);
//プリロード
var preLoad = function($this){
var img = new Image(); = $this.src;
if (img.complete) {
processImg.call($this);
}
//$this.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 :
else
this.width = this.width >settings. width ? settings.width :
this.width;
$(this).next(".loadding").remove()
$(this).show(); >return $(images).each(function(){
preLoad(this);
})
}
})(jQuery);効果は次のとおりです: