嵌入图片鼠标移上去可放大预览

var eventutil = jsloader.resolve("freequery.lang.eventutil");
function main(spreadsheetReport) {
    var source = spreadsheetReport.shapesMap["图片 1"].parentNode;
    var td = spreadsheetReport.getCell(3,6);
    var dest = document.createElement("div");
    dest.style.height="400px";
    dest.style.width="400px";
    dest.style.overflow ="hidden";
     
    td.appendChild(dest);
    //测试代码
    Amplifier.init(source,dest,5);
}
  
    var Amplifier = {
       //图片源
        source: null,
        //目的地，用来显示放大的效果
        dest: null,
        //放大的倍数,
        scale: 1,
        //初始化函数  source元素里面包含img对象， dest元素是空的
        init: function(source, dest,scale){
            this.source = source;
            this.dest = dest;
            this.scale = scale||2;
            //跟随鼠标移动的红色的框框
            var borderBox = document.createElement("div");
            borderBox.style.height = parseInt(this.source.style.height)/scale+"px";
            borderBox.style.width = parseInt(this.source.style.width)/scale+"px";
            borderBox.style.border = "solid red 1px";
            borderBox.style.position = "relative";
            this.source.appendChild(borderBox);                        //这个时候，放大框位于图片的下方
            //将框移动到图片上
            borderBox.style.top = -parseInt(this.source.style.height)+"px";
            borderBox.style.left = "0px" ;
             
            //放大后的图象
            var destImg = document.createElement('img');
            destImg.style.position = "relative";
            destImg.src = this.source.getElementsByTagName('img')[0].src;
            this.dest.appendChild(destImg);
            //图像的高度和宽度倍增，我发现先要执行this.dest.appendChild(destImg);
            //后再设置height，width才可以生效
            destImg.height = parseInt(this.source.style.height) * scale;
            destImg.width = parseInt(this.source.style.width) * scale;
        
            //对源图片添加onmousemove事件
            //this.source.onmousemove =       
            eventutil.addEventHandler(this.source,"mousemove",function (e){
               /**
               * 这里需要解释一下，ie下event.offsetX，offsetY表示鼠标相对当前事件触发元素左上角的偏移位置,
               * 通过改变borderBox.style.left和borderBox.style.top来改变红色的框框在源图中的位置，而且要
               * 把红色的框框限制在源图内。
               **/
          
            
              if (e.srcElement.nodeName != "IMG" )  //防止红框移动到鼠标位置，但是这样用起来有点卡
                return;
                 
               var offsetx = Amplifier.getEvent(e).offsetX;
               var offsety = Amplifier.getEvent(e).offsetY;
                
                if(offsetx>parseInt(borderBox.style.width)/2 && (parseInt(Amplifier.source.style.width)- offsetx)>parseInt(borderBox.style.width)/2){
                    borderBox.style.left = offsetx - parseInt(borderBox.style.width)/2+"px";
                }
                else if(offsetx<parseInt(borderBox.style.width)/2){
                    borderBox.style.left = "0px";
                }
                else{
                    borderBox.style.left = parseInt(Amplifier.source.style.width) - parseInt(borderBox.style.width)+"px";
                }
                 
                if(offsety>parseInt(borderBox.style.height)/2 && (parseInt(Amplifier.source.style.height)- offsety)>parseInt(borderBox.style.height)/2){
                    borderBox.style.top = -parseInt(Amplifier.source.style.height) + offsety - parseInt(borderBox.style.height)/2+"px";
                }
                else if(offsety<parseInt(borderBox.style.height)/2){
                    borderBox.style.top = -parseInt(Amplifier.source.style.height)+"px";
                }
                else{
                    borderBox.style.top = -parseInt(borderBox.style.height)+"px";
                }
                 
                //改变图片的style.left,style.top就可以精确控制被放大的部分。
                //就是移动放大图片的位置，使其显示应该现显示的部分
                destImg.style.left = - Math.abs(parseInt(borderBox.style.left) * scale+"px");
                destImg.style.top = -(parseInt(Amplifier.source.style.height) - Math.abs(parseInt(borderBox.style.top))) * scale+"px";
            });
         },
        //辅助函数，用来修复ie和ff不同的event模型
        getEvent: function(ev){
        return ev;
      }
         
    };