工作都一年了,这是我的第一篇文章,写一点关于自己用jQuery的经历。最近的项目中涉及到图片创建,并放大显示,我用了jQuery的一个插件:jquery.jzoom.js 。在Firefox中调试效果不错,但是在IE中总是报参数无效的错误,真是烦死人了,又没有什么好的debug工具,无法单步跟踪js代码,就一直放着了。今天终于清闲了一些,仔细看看网上的介绍,发现这个插件本身在IE中就有问题,排除了自己使用方法的错误,然后自己看看源码,不好调,只好一步一步alert,在上网查查资料,终于问题解决了,感觉还挺爽的。O(∩_∩)O~
具体解决办法如下:
除了有几个参数没有定义(有可能会有影响,忘记具体是哪几个了),主要的应该是以下这个函数
$slider.slider({value:0,
min: 0,
max: 100,
step: settings.step,
change: function(event, ui) {
if(!swapped) {
var hiSrc = ig.attr("src").replace(settings.re, settings.replace);
swapImage(ig, hiSrc);
$div.children("span.loader").fadeIn(250);
swapped = true;
}
val = ui.value;
newWidth = settings.sW+((settings.lW-settings.sW)*val)/100;
newHeight = settings.sH+((settings.lH-settings.sH)*val)/100;
ig_pos = ig.position();
if(settings.debug && typeof(console) != 'undefined') {
console.log('new dimensions:'+newWidth+'x'+newHeight);
}
deltaWidth = ig.width()-settings.sW;
leftPos = Math.abs(ig_pos.left);
leftFactor = leftPos/deltaWidth;
newDeltaWidth = newWidth-settings.sW;
newLeft = (leftFactor*newDeltaWidth)*-1;
deltaHeight = ig.height()-settings.sH;
topPos = Math.abs(ig_pos.top);
topFactor = topPos/deltaHeight;
newDeltaHeight = newHeight-settings.sH;
newTop = (topFactor*newDeltaHeight)*-1;
ig.css({ width: newWidth, height: newHeight, left:newLeft, top:newTop});
}
});
中的最后一句:ig.css({ width: newWidth, height: newHeight, left:newLeft, top:newTop});中参数多传了两个,去掉后两个参数即可,也就是改为ig.css({ width: newWidth, height: newHeight})。我以在IE6,IE7中调试通过。贴出来分享一下,不过由于本人经验尚浅,说实话源码不是很理解,但是调试成功了,如果有错误的地方,希望大家帮忙指正,在此先谢过。
这个插件还是挺好的,展示效果不错,大家可以访问这个网址了解:http://lab.gianiaz.com/jquery/gzoom/
还有其他很好的插件:http://webagentur-meerbusch.de/blog/2010/03/jquery-zoom-effekte-zum-nachbauen/
写了第一篇文章,心里还挺高兴的,这样不仅能记录自己成长过程,还可以大家一起交流,一起学习,我以后要多多记录,努力成长,加油!