求助大神 jquery 放大镜 函数调用出问题

[qq_35950687]

图片展示 用了jquery 放大镜效果， 放大的图片 高度显示没有问题 但是宽度出问题了，变窄了，放大后右面都是空白 ，我试着调了jquery.jqzoom-core.js 里面好几个参数 都没有效果，哪位大神给看看是哪里的原因


jquery.jqzoom-core.js 部分代码如下：

| LargeImage
| The large detailed image

function Largeimage() {
var $obj = this;
this.node = new Image();
this.loadimage = function (url) {
//showing preload
loader.show();
this.url = url;
this.node.style.position = 'absolute';
this.node.style.border = '0px';
this.node.style.display = 'none';
this.node.style.left = '-5000px';
this.node.style.top = '0px';
document.body.appendChild(this.node);
this.node.src = url; // fires off async
};
this.fetchdata = function () {
var image = $(this.node);
var scale = {};
this.node.style.display = 'block';
$obj.w = image.width();
$obj.h = image.height();
$obj.pos = image.offset();
$obj.pos.l = image.offset().left;
$obj.pos.t = image.offset().top;
$obj.pos.r = $obj.w + $obj.pos.l;
$obj.pos.b = $obj.h + $obj.pos.t;
scale.x = ($obj.w / smallimage.w);
scale.y = ($obj.h / smallimage.h);
el.scale = scale;
document.body.removeChild(this.node);
$('.zoomWrapperImage', el).empty().append(this.node);
//setting lens dimensions;
lens.setdimensions();
};
this.node.onerror = function () {
alert('Problems while loading the big image.');
throw 'Problems while loading the big image.';
};
this.node.onload = function () {
//fetching data
$obj.fetchdata();
loader.hide();
el.largeimageloading = false;
el.largeimageloaded = true;
if (settings.zoomType == 'drag' || settings.alwaysOn) {
lens.show();
stage.show();
lens.setcenter();
}
};
this.setposition = function () {
var left = -el.scale.x * (lens.getoffset().left - smallimage.bleft + 1);
var top = -el.scale.y * (lens.getoffset().top - smallimage.btop + 1);
$(this.node).css({
'left': left + 'px',
'top': top + 'px'
});
};
return this;
};
$(el).data("jqzoom", obj);
};
//es. $.jqzoom.disable('#jqzoom1');
$.jqzoom = {
defaults: {
zoomList: '',
zoomType: 'standard',
//innerzoom/standard/reverse/drag
zoomWidth: 300,
//zoomWindow default width
zoomHeight: 300,
//zoomWindow default height
xOffset: 10,
//zoomWindow x offset, can be negative(more on the left) or positive(more on the right)
yOffset: 0,
//zoomWindow y offset, can be negative(more on the left) or positive(more on the right)
position: "right",
//zoomWindow default position
preloadImages: true,
//image preload
preloadText: '截入大图中...',
title: true,
lens: true,
imageOpacity: 0.4,
alwaysOn: false,
showEffect: 'show',
//show/fadein
hideEffect: 'hide',
//hide/fadeout
fadeinSpeed: 'slow',
//fast/slow/number
fadeoutSpeed: '2000' //fast/slow/number
},
disable: function (el) {
var api = $(el).data('jqzoom');
api.disable();
return false;
},
enable: function (el) {
var api = $(el).data('jqzoom');
api.enable();
return false;
},
disableAll: function (el) {
jqzoompluging_disabled = true;
},
enableAll: function (el) {
jqzoompluging_disabled = false;
}
};
})(jQuery);

[qq_35950687]

/*========================================================, | Stage |---------------------------------------------------------: | Window area that contains the large image `========================================================*/ function Stage() { var $obj = this; this.node = $("<div class='zoomWindow'><div class='zoomWrapper'><div class='zoomWrapperTitle'></div><div class='zoomWrapperImage'></div></div></div>"); this.ieframe = $('<iframe class="zoomIframe" src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" ></iframe>'); this.setposition = function () { this.node.leftpos = 0; this.node.toppos = 0; if (settings.zoomType != 'innerzoom') { //positioning switch (settings.position) { case "left": this.node.leftpos = (smallimage.pos.l - smallimage.bleft - Math.abs(settings.xOffset) - settings.zoomWidth > 0) ? (0 - settings.zoomWidth - Math.abs(settings.xOffset)) : (smallimage.ow + Math.abs(settings.xOffset)); this.node.toppos = Math.abs(settings.yOffset); break; case "top": this.node.leftpos = Math.abs(settings.xOffset); this.node.toppos = (smallimage.pos.t - smallimage.btop - Math.abs(settings.yOffset) - settings.zoomHeight > 0) ? (0 - settings.zoomHeight - Math.abs(settings.yOffset)) : (smallimage.oh + Math.abs(settings.yOffset)); break; case "bottom": this.node.leftpos = Math.abs(settings.xOffset); this.node.toppos = (smallimage.pos.t - smallimage.btop + smallimage.oh + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height) ? (smallimage.oh + Math.abs(settings.yOffset)) : (0 - settings.zoomHeight - Math.abs(settings.yOffset)); break; default: //liuxun修改 //this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset)); this.node.leftpos = $(el).width()+settings.xOffset; this.node.toppos = Math.abs(settings.yOffset); break; } } this.node.css({ 'left': this.node.leftpos + 'px', 'top': this.node.toppos + 'px' }); return this; }; this.append = function () { $('.zoomPad', el).append(this.node); this.node.css({ position: 'absolute', display: 'none', zIndex: 5001 }); if (settings.zoomType == 'innerzoom') { this.node.css({ cursor: 'default' }); var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft; $('.zoomWrapper', this.node).css({ borderWidth: thickness + 'px' }); } $('.zoomWrapper', this.node).css({ width: Math.round(settings.zoomWidth) + 'px' , borderWidth: thickness + 'px' }); $('.zoomWrapperImage', this.node).css({ width: '100%', height: Math.round(settings.zoomHeight) + 'px' }); //zoom title $('.zoomWrapperTitle', this.node).css({ width: '100%', position: 'absolute' }); $('.zoomWrapperTitle', this.node).hide(); if (settings.title && zoomtitle.length > 0) { $('.zoomWrapperTitle', this.node).html(zoomtitle).show(); } $obj.setposition(); }; this.hide = function () { switch (settings.hideEffect) { case 'fadeout': this.node.fadeOut(settings.fadeoutSpeed, function () {}); break; default: this.node.hide(); break; } this.ieframe.hide(); }; this.show = function () { switch (settings.showEffect) { case 'fadein': this.node.fadeIn(); this.node.fadeIn(settings.fadeinSpeed, function () {}); break; default: this.node.show(); break; } if (isIE6 && settings.zoomType != 'innerzoom') { this.ieframe.width = this.node.width(); this.ieframe.height = this.node.height(); this.ieframe.left = this.node.leftpos; this.ieframe.top = this.node.toppos; this.ieframe.css({ display: 'block', position: "absolute", left: this.ieframe.left, top: this.ieframe.top, zIndex: 99, width: this.ieframe.width + 'px', height: this.ieframe.height + 'px' }); $('.zoomPad', el).append(this.ieframe); this.ieframe.show(); }; }; };

[qq_35950687]

/*========================================================, | Smallimage |---------------------------------------------------------: | Base image into the anchor element `========================================================*/ function Smallimage(image) { var $obj = this; this.node = image[0]; this.findborder = function () { var bordertop = 0; bordertop = image.css('border-top-width'); btop = ''; var borderleft = 0; borderleft = image.css('border-left-width'); bleft = ''; if (bordertop) { for (i = 0; i < 3; i++) { var x = []; x = bordertop.substr(i, 1); if (isNaN(x) == false) { btop = btop + '' + bordertop.substr(i, 1); } else { break; } } } if (borderleft) { for (i = 0; i < 3; i++) { if (!isNaN(borderleft.substr(i, 1))) { bleft = bleft + borderleft.substr(i, 1) } else { break; } } } $obj.btop = (btop.length > 0) ? eval(btop) : 0; $obj.bleft = (bleft.length > 0) ? eval(bleft) : 0; }; this.fetchdata = function () { $obj.findborder(); $obj.w = image.width(); $obj.h = image.height(); $obj.ow = image.outerWidth(); $obj.oh = image.outerHeight(); $obj.pos = image.offset(); $obj.pos.l = image.offset().left + $obj.bleft; $obj.pos.t = image.offset().top + $obj.btop; $obj.pos.r = $obj.w + $obj.pos.l; $obj.pos.b = $obj.h + $obj.pos.t; $obj.rightlimit = image.offset().left + $obj.ow; $obj.bottomlimit = image.offset().top + $obj.oh; }; this.node.onerror = function () { alert('Problems while loading image.'); throw 'Problems while loading image.'; }; this.node.onload = function () { $obj.fetchdata(); if ($(".zoomPad", el).length == 0) obj.create(); }; return $obj; };