jquery.jzoom.js兼容IE的问题

      工作都一年了,这是我的第一篇文章,写一点关于自己用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/

      写了第一篇文章,心里还挺高兴的,这样不仅能记录自己成长过程,还可以大家一起交流,一起学习,我以后要多多记录,努力成长,加油!



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值