ecshop实现产品放大镜功能

　　在电子商务新时期时代，产品详细页出现产品放大镜功能已经越来越流行了．模仿ppg模式，当然ecshop作为中国最大的开源电子商务系统，要实现产品页放大效果，实现的办法有很多，有JQuery下Jqzoom组件，也有比较轻型的．下面就介绍一段js，用于ecshop产品放大功能．
 

<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();  
    }
    
 </script>

 <img src="images/200905/source_img/1226569902610916918.jpg" id="orig" alt="天子星" width="250" height="250" style="margin-top:60px;" />

相关文章：

   ecshop配送方式显示的问题

ecshop如何在首页显示最近发货订单

来源：中国B4C电子商务