js-图片局部放大

apple_pxy

<SCRIPT language=javascript>
   window.onload = function(){
   var pbi = new qsoft.PopBigImage("orig",10,-2);  
   pbi.render();        
 }

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="150"  height="200" id="orig" src="http_imgloadCALSZ39K.jpg" alt="" />