2.使用同一图片给小图片设定宽或高，这里指定了:style=height:300px; ，(偷懒模式，^o^,后面几个也是这样） new imagezoom(dd2,{//第一个参数指定一个图片或者其id（也可以为图片的容器或者id,容器中第一个子元素要为图片） //mul:3 });
3.放大图片显示到指定的容器中 new imagezoom(img3,{ viewer:imgshow//指定要显示的div或者其id })
图片预览：
4.显示大图的div以指定倍数 new imagezoom(img4,{ mul:5,//放大5倍 viewercla:cla,//指定显示层的样式 viewermul:1.2//展示层以小图片的1.2倍大小 });
点击下载js源码 ps:为了避免ff下的出问题（在ff下如果网页加载实在太慢，可能无法获取图片大小）最好将代码放在onload中执行update: 2009-11-15 21:40,感谢danica7773，按其建议加上 自定义显示层的样式，显示和隐藏的事件
[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);
}
};