javascript 图片放大效果函数

<style type="text/css"> /*pre css reset*/ body,th,td { font-size:12px;font-family:tahoma,helvetica,arial,'\5b8b\4f53','\5fae\8f6f\96c5\9ed1',sans-serif; } body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p { margin:0;padding:0; } fieldset,img { border:none; } a {color:#3366cc; text-decoration:none;outline:none;} a:hover {color:#ff6600;text-decoration:underline;} /************************************************************/ .test { } .test h3{ margin:10px auto;} .test dt {line-height:25px;margin-top:5px;} .cla {border:solid 1px #09c;} </style> <div class="test" id="div1"> <h3>演示示例</h3> <dl> <dt>1.图片和放大使用不同的图片（大小图片要比例相同） 也可以指定放大倍数（相对于小图片计算） <pre class="brush: javascript;">new imagezoom("img1",{ //mul:6,//指定放大的倍数 onshow:function() { document.title="show,you are moving on the image."; }, onhide:function() { document.title="you mouse move out the image"; }, bigimg:"../images/tong.jpg"//指定放大图片路径 }); </pre> </dt> <dd><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="img1" alt="javascript 图片放大效果函数" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA3MzAvYl8wXzIwMTkwNzMwMTY0NjM1MzQ4My5qcGc=" title="javascript 图片放大效果函数"></dd> <dt>2.使用同一图片 给小图片设定宽或高，这里指定了:style="height:300px;" ，(偷懒模式，^o^,后面几个也是这样） <pre class="brush: javascript;">new imagezoom("dd2",{//第一个参数指定一个图片或者其id（也可以为图片的容器或者id,容器中第一个子元素要为图片） //mul:3 }); </pre> </dt> <dd id="dd2"> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="img2" style="height: 300px" alt="javascript 图片放大效果函数" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA3MzAvYl8wXzIwMTkwNzMwMTY0NjM2Nzk2OC5qcGc=" title="javascript 图片放大效果函数"><dd id="info"> </dd> </dd> <dt>3.放大图片显示到指定的容器中 <pre class="brush: javascript;">new imagezoom("img3",{ viewer:"imgshow"//指定要显示的div或者其id }) </pre> </dt> <dd> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="img3" style="height: 200px" alt="javascript 图片放大效果函数" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA3MzAvYl8wXzIwMTkwNzMwMTY0NjM2NjMzOS5qcGc=" title="javascript 图片放大效果函数"><dd>图片预览： </dd> </dd> <dt>4.显示大图的div以指定倍数 <pre class="brush: javascript;">new imagezoom("img4",{ mul:5,//放大5倍 viewercla:"cla",//指定显示层的样式 viewermul:1.2//展示层以小图片的1.2倍大小 }); </pre> </dt> <dd><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="img4" style="height: 260px" alt="javascript 图片放大效果函数" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA3MzAvYl8wXzIwMTkwNzMwMTY0NjM3NjUyNi5qcGc=" title="javascript 图片放大效果函数"></dd> </dl> <a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8vZmlsZXMuamI1MS5uZXQvaW1nYnkvaW1hZ2V6b29tLmpz" target="_blank" rel="nofollow">点击下载js源码 </a> ps:为了避免ff下的出问题（在ff下如果网页加载实在太慢，可能无法获取图片大小）最好将代码放在onload中执行 update: 2009-11-15 21:40,感谢danica7773，按其建议加上 自定义显示层的样式，显示和隐藏的事件 </div>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

imagezoom.js

/*
*author:sohighthesky
*date:2009-11-14
*/
/*
*img 指定要放大的图片或者其id
*options:参见代码中setoptions中的注释
*/
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){//取元素坐标
        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,//默认为不放大（显示图片的原来大小）
         bigimg:null,//指定放大的图片路径（要跟小图成比例才好）
         viewer:null, //指定显示的位置(可以为一个div或者其id)
         viewercla:"",//预览的div的类样式
         viewermul:1,//指定显示div的放大倍数，默认为原大小,设置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";
            d.body.appendchild(this.viewer);
        }        
        this.viewimg=d.createelement("img");
        this.viewimg.style.csstext="position:relative;left:-33%;top:-33%;";
        this.viewimg.src=this.options.bigimg;
        if(this.options.mul) {//设置放大倍数
            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);
    }
};