javascript image enlargement effect function_image special effects

/*
*Author:sohighthesky
*Date:2009-11-14
*/
/*
*img specifies the image to be enlarged or its id
*options: See the comments in setOptions in the code
*/
var imageZoom = function(img,options) {
this.img=this.g(img);
if(this .img.nodeName!="IMG") {
If(this.img && this.img.children[0].nodeName=="IMG")this.img=this.img.children[0];
else throw Error("Invalid argument [img] !");
}
this.setOptions(options);
this.init();
}
imageZoom.prototype= {
g:function(id) {return typeof(id)=="string"?document.getElementById(id):id;},
ae:function(el,type,call) {
if(el.addEventListener)el.addEventListener(type,call,false);
else el.attachEvent("on" type,call);
},
getPos:function(o){// Get element coordinates
var x = 0, y = 0;
do{x = o.offsetLeft; y = o.offsetTop;}
while(o=o.offsetParent);
return { 'x':x,'y':y};
},
setOptions:function(options) {
this.options={
mul:0,//The default is not to enlarge ( Display the original size of the image)
bigImg:null, //Specify the enlarged image path (it must be proportional to the small image)
viewer:null, //Specify the display position (can be a div or other id)
viewerCla: "", // Class style of the previewed div
viewerMul:1, // Specify the magnification of the displayed div, the default is the original size, this parameter is invalid when setting the viewer
onShow: function(){},
onHide:function(){}
};
for(var o in options) {this.options[o]=options[o];}
this. options.bigImg =this.options.bigImg ||this.img.src;
},
getSize:function(o) {
                    return {w:o.offsetWidth,h:o.offsetHeight};
},
createView:function() {
var _is=this.getSize(this.img);
var d=document;
if(this.options.viewer){
this.viewer=this.g(this.options.viewer);
this.viewer.style.overflow="hidden";
this.viewer.style.position="relative";
} else {
this.viewer=d.createElement("div");
this.viewer.className=this.options.viewerCla;
var pos=this.getPos(this.img);
This.viewer.style.cssText="display:none;overflow:hidden;position:absolute;top:" pos.y "px;left:" (pos.x _is.w 10) "px;height:" _is.h*this.options.viewerMul "px;width:" _is.w*this.options.viewerMul "px"; .viewimg=d.createElement("img");
this.viewimg.style.cssText="position:relative;left:-33%;top:-33%;";
this.viewimg.src =this.options.bigImg;
If(this.options.mul) {//Set the magnification factor
this.viewimg.style.width=_is.w*this.options.mul "px";
This.viewimg.style.height=_is.h*this.options.mul "px";
}
        this.viewer.appendChild(this.viewimg);
    },
    move:function(e) {
        if(!this.options.mul)
         this.options.mul=this.viewimg.offsetHeight/this.img.offsetHeight;
        var pos=this.getPos(this.img);
        var l=e.clientX-pos.x (document.documentElement.scrollLeft || document.body.scrollLeft);//鼠标位置相对于图片左上角的偏移
        var t=e.clientY-pos.y (document.documentElement.scrollTop || document.body.scrollTop);
        var zs=this.getSize(this.viewer);
        var pl=-l*this.options.mul zs.w/2;
        var pt=-t*this.options.mul zs.h/2;
        pl=pl>0?0:pl;
        pt=pt>0?0:pt;

var vs=this.getSize(this.viewimg);
pl=Math.max(pl,zs.w-vs.w);
pt=Math.max(pt,zs.h-vs.h);

        this.viewimg.style.left=pl "px";
        this.viewimg.style.top=pt "px";
    },
    init:function() {
     var o=this;
     var load=function(a) {//图片加载
     o.createView.call(o);
     o.img.setAttribute("alt","");
     o.ae(o.img,"mousemove",function(event){o.move.call(o,event);});
         if(!o.options.viewer) {
         o.ae(o.img,"mouseover",function(){o.options.onShow();o.viewer.style.display=""});
         o.ae(o.img,"mouseout",function(){o.options.onHide();o.viewer.style.display="none"});
         }
     };
     if(typeof(document.readyState)=="undefined" || window.opera) {
            var de=document.documentElement || document.body;
            var h=de.scrollHeight;
            var t=setInterval(function() {
                if(h==de.scrollHeight){
                    clearInterval(t);
                    load();                    
                } else h=de.scrollHeight;
            },500);
     } else if(document.readyState=="complete")
     load();
     else
     o.ae(window,"load",load);
    }
};