JS图片放大查看器：鼠标悬停显示大图与自定义参数详解

<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>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> <DD><IMG id=img1 alt=彤 src="/uploads/20261024/05fc5af50190aa8cb35bbc863cd68e2294446deffa3a45e51c2ab1b0e5d86610.jpg"> <DT>2.使用同一图片给小图片设定宽或高，这里指定了:style="height:300px;" ，(偷懒模式，^o^,后面几个也是这样） <PRE>new imageZoom("dd2",{//第一个参数指定一个图片或者其id（也可以为图片的容器或者id,容器中第一个子元素要为图片） //mul:3 }); </PRE> <DD id=dd2><IMG id=img2 style="HEIGHT: 300px" alt=avril src="/uploads/20261024/8c19451f50e734062738114f051288886572154086a53c346aa992c64a0f5a35.jpg"> <DD id=info> <DT>3.放大图片显示到指定的容器中 <PRE>new imageZoom("img3",{ viewer:"imgshow"//指定要显示的div或者其id }) </PRE> <DD><IMG id=img3 style="HEIGHT: 200px" alt=王心凌 src="/uploads/20261024/9ac079cd7f57365dd276595ff36bd2add3e21c7cdf3892d1b8f529a5a6ba9445.jpg"> <DD>图片预览： <DIV id=imgshow style="WIDTH: 534px; HEIGHT: 400px"></DIV> <DT>4.显示大图的div以指定倍数 <PRE>new imageZoom("img4",{ mul:5,//放大5倍 viewerCla:"cla",//指定显示层的样式 viewerMul:1.2//展示层以小图片的1.2倍大小 }); </PRE> <DD><IMG id=img4 style="HEIGHT: 260px" alt="" src="/uploads/20261024/0614b4f7d695523bb26b5a83f9b5e8d32f660a0631cf85526f056db4e83b13c9.jpg"> </DD></DL>点击下载js源码 PS:为了避免ff下的出问题（在ff下如果网页加载实在太慢，可能无法获取图片大小）最好将代码放在onload中执行update: 2009-11-15 21:40,感谢danica7773，按其建议加上 自定义显示层的样式，显示和隐藏的事件   </DIV>

JavaScript 图片放大查看器实现

注意：引入外部 JavaScript 文件后，通常需要刷新页面才能生效。

imageZoom.js

代码实现如下：

/* 
*作者：sohighthesky
*日期：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 的 CSS 类名
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);
    } 
};

JavaScript 实现图片鼠标悬停放大查看功能

JavaScript 图片放大查看器实现

实用工具推荐