js放大镜兼容性的问题

Question

<script>
if(typeof(qsoft) == "undefined")   
       qsoft = {};   
          
   qsoft.PopBigImage = function (origImageId,dx,dy)   
   {   
       this.oim = document.getElementById(origImageId);   
          
       this.oim.style.cursor = "crosshair";   
          
       this.ow = this.oim.width;   
       this.oh = this.oim.height;   
          
       this.detaX = dx?dx : 30;   
       this.detaY = dy?dy : 0;   
          
       this.getAbsSize = function (obj)   
       {   
           return obj.getBoundingClientRect();   
       };   
          
       var rect = this.getAbsSize(this.oim);   
       this.ol = rect.left + this.detaX + this.ow;   
       this.ot = rect.top + this.detaY;   
          
       this.src = this.oim.src;   
          
       this.getImageSize = function (img)   
       {   
           var im = new Image();   
           im.src = img.src;   
              
           var size = {};   
           size.width = im.width;   
           size.height = im.height;   
              
           im = null;   
           delete im;   
              
           return size;   
       };   
          
       var rsize = this.getImageSize(this.oim);   
       this.w = rsize.width;   
       this.h = rsize.height;   
          
       var qObj = this;   
          
       this.createMask = function ()   
       {   
           if(typeof(this.mask) == "undefined")   
           {   
               this.mask = document.createElement("div");   
               this.mask.id = this.oim.id + "_mask";   
                  
               this.mask.style.position  = "absolute";   
               this.mask.style.width = this.ow;   
               this.mask.style.height = this.oh;   
               this.mask.style.left = this.ol;   
               this.mask.style.top = this.ot;   
               this.mask.style.backgroundImage  = "url("+this.src+")";   
               this.mask.style.backgroundRepeat = "no-repeat";        
               this.mask.style.display ="none";       
                  
               document.body.appendChild(this.mask);         
                  
               //this.mask.style = "position: absolute; ";//left: "+this.ol+"; top: "+this.ot+";width: " + this.ow + "; height: " + this.oh + ";   
               ///*display: none;*/ background: url(" + this.src + ") left top no-repeat;";   
           }   
       };   
          
       this.regEvent = function ()   
       {   
           this.oim.onmousemove = function ()   
           {   
               var x = Math.ceil(event.offsetX * qObj.w/qObj.ow) - qObj.ow/2;   
               var y = Math.ceil(event.offsetY * qObj.h/qObj.oh) - qObj.oh/2;   
             
              if(x<0) x = 0;   
              if(y<0) y = 0;   
                 
              var maxx = Math.ceil((qObj.w-qObj.ow));   
              var maxy = Math.ceil((qObj.h-qObj.oh));   
                 
              if(x>maxx) x = maxx;   
              if(y>maxy) y = maxy;   
                 
              qObj.mask.style.backgroundPositionX = -x;   
              qObj.mask.style.backgroundPositionY = -y;    
                 
           };   
              
           this.oim.onmouseout = function (e)   
           {   
               qObj.mask.style.display = "none";   
           };   
              
           this.oim.onmouseenter = function (e)   
           {   
               qObj.mask.style.display = "block";   
           };   
              
       };   
          
       this.render = function ()   
       {   
           this.createMask();   
           this.regEvent();   
       };    
          
   };   
      
   qsoft.version = 0.1;  
window.onload = function (){   
        var pbi = new qsoft.PopBigImage("orig",24,-2);     
        pbi.render();     
           
        var pbi1 = new qsoft.PopBigImage("win7",24,-2);     
        pbi1.render();     
                   
    }   
</script>
<img width="160"  height="120" id="orig" src="room_small.jpg" alt="" /> 
  
我想实现的功能是产品图片的局部放大功能，但是在火狐下就不能正常运行,在IE下就能运行,请问如何解决这个问题啊。如何让他能在火狐下运行正常啊。请高手指点

Answer 1

getBoundingClientRect()
IE 向...function GetAbsoluteLocationEx(element) 
{ 
    if ( arguments.length != 1 || element == null ) 
    { 
        return null; 
    } 
    var elmt = element; 
    var offsetTop = elmt.offsetTop; 
    var offsetLeft = elmt.offsetLeft; 
    var offsetWidth = elmt.offsetWidth; 
    var offsetHeight = elmt.offsetHeight; 
    while( elmt = elmt.offsetParent ) 
    { 
          // add this judge 
        if ( elmt.style.position == 'absolute' || elmt.style.position == 'relative'  
            || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' ) ) 
        { 
            break; 
        }  
        offsetTop += elmt.offsetTop; 
        offsetLeft += elmt.offsetLeft; 
    } 
    return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, 
        offsetWidth: offsetWidth, offsetHeight: offsetHeight }; 
} 

Answer 2

<script>function GetAbsoluteLocationEx(element) 
{ 
    if ( arguments.length != 1 || element == null ) 
    { 
        return null; 
    } 
    var elmt = element; 
    var offsetTop = elmt.offsetTop; 
    var offsetLeft = elmt.offsetLeft; 
    var offsetWidth = elmt.offsetWidth; 
    var offsetHeight = elmt.offsetHeight; 
    while( elmt = elmt.offsetParent ) 
    { 
          // add this judge 
        if ( elmt.style.position == 'absolute' || elmt.style.position == 'relative'  
            || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' ) ) 
        { 
            break; 
        }  
        offsetTop += elmt.offsetTop; 
        offsetLeft += elmt.offsetLeft; 
    } 
    return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, 
        offsetWidth: offsetWidth, offsetHeight: offsetHeight }; 
} if(typeof(qsoft) == "undefined")   
       qsoft = {};   
          
   qsoft.PopBigImage = function (origImageId,dx,dy)   
   {
       this.oim = document.getElementById(origImageId);   
          
       this.oim.style.cursor = "crosshair";   
          
       this.ow = this.oim.width;   
       this.oh = this.oim.height;   
          
       this.detaX = dx?dx : 30;   
       this.detaY = dy?dy : 0;   
          
       this.getAbsSize = function (obj)   
       {   
           return GetAbsoluteLocationEx(obj);   
       };   
          
       var rect = this.getAbsSize(this.oim);   
       this.ol = rect.absoluteLeft + this.detaX + this.ow;   
       this.ot = rect.absoluteTop + this.detaY;   
          
       this.src = this.oim.src;   
          
       this.getImageSize = function (img)   
       {   
           var im = new Image();   
           im.src = img.src;   
              
           var size = {};   
           size.width = im.width;   
           size.height = im.height;   
              
           im = null;   
           delete im;   
              
           return size;   
       };   
          
       var rsize = this.getImageSize(this.oim);   
       this.w = rsize.width;   
       this.h = rsize.height;   
          
       var qObj = this;   
          
       this.createMask = function ()   
       {   
           if(typeof(this.mask) == "undefined")   
           {   
               this.mask = document.createElement("div");   
               this.mask.id = this.oim.id + "_mask";   
                  
               this.mask.style.position  = "absolute";   
               this.mask.style.width = this.ow;   
               this.mask.style.height = this.oh;   
               this.mask.style.left = this.ol;   
               this.mask.style.top = this.ot;   
               this.mask.style.backgroundImage  = "url("+this.src+")";   
               this.mask.style.backgroundRepeat = "no-repeat";        
               this.mask.style.display ="none";       
                  
               document.body.appendChild(this.mask);
               //this.mask.style = "position: absolute; ";//left: "+this.ol+"; top: "+this.ot+";width: " + this.ow + "; height: " + this.oh + ";   
               ///*display: none;*/ background: url(" + this.src + ") left top no-repeat;";   
           }   
       };   
          
       this.regEvent = function ()   
       {   
           this.oim.onmousemove = function (eventTag)   
           {
              var event = window.event||eventTag;
                 
               var x = Math.ceil(event.offsetX||event.pageX * qObj.w/qObj.ow) - qObj.ow/2;   
               var y = Math.ceil(event.offsetY||event.pageY * qObj.h/qObj.oh) - qObj.oh/2;   
             
              if(x<0) x = 0;   
              if(y<0) y = 0;
                 
              var maxx = Math.ceil((qObj.w-qObj.ow));   
              var maxy = Math.ceil((qObj.h-qObj.oh));   
                 
              if(x>maxx) x = maxx;   
              if(y>maxy) y = maxy;  
                 
              qObj.mask.style.backgroundPosition = (-x + "px") + " " + (-y + "px");   
                 
           };   
              
           this.oim.onmouseout = function (e)   
           {   
               qObj.mask.style.display = "none";   
           };   
              
           this.oim.onmouseover = function (e)   
           {   
               qObj.mask.style.display = "block";   
           };   
              
       };   
          
       this.render = function ()   
       {   
           this.createMask();   
           this.regEvent();              
       };    
          
   };   
      
   qsoft.version = 0.1;  
window.onload = function (){   
        var pbi = new qsoft.PopBigImage("orig",24,-2);     
        pbi.render();        
                   
    }   
</script>
<img width="160"  height="120" id="orig" src="bear.jpg" alt="" />
还不止那个函数呢.终于改好了.

Answer 3

不知道为什么。修改好了的程序。放在了ECSHOP里面去，放大的图象不是在产品图片的右侧显示,而是在产品的左上方显示放大后的图片。呵呵.还有,放在火狐下.ECSHOP里面加这段代码。还是放大功能失效

Answer 4

               this.mask.style.width = this.ow;   
               this.mask.style.height = this.oh;   
               this.mask.style.left = this.ol;   
               this.mask.style.top = this.ot;  
后面+"PX"试试ECSHOP是啥?没用过...