/*pre css reset*/ body,th,td { font-size:12px;font-family:Tahoma,Helvetica,Arial,'5b8b4f53','5FAE8F6F96C59ED1',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;} 演示示例 1.图片和放大使用不同的图片（大小图片要比例相同） 也可以指定放大倍数（相对于小图片计算） 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"//指定放大图片路径 }); 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); } };

　　推荐阅读

　　写出更好的JavaScript程序之undefined篇（中）

写在前面的依然是消歧义声明：本文中JavaScript是指一般意义上的JavaScript，并不只限定“自称是JavaScript”的运行环境；“全局变量”和“全局对象的属性”是指同样的东西，只是因为要配合上下文才用了不同的说法>>>详细阅读

本文标题：javascript 图片放大效果函数

地址：http://www.17bianji.com/kaifa2/JS/27671.html

 1/2    1