位置：首页>> 网络编程>> JavaScript>> 图片放大镜，多图片放大（已更新）[可调整倍数、区域大小、展示区域位置]

图片放大镜，多图片放大（已更新）[可调整倍数、区域大小、展示区域位置]

作者：lifeseato　　发布时间：2011-06-16 20:43:07　

标签：图片放大,放大

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><link type="image/x-icon" href="" rel="shortcut icon"><script type="text/javascript">function div(id){return document.getElementById(id);}var ie=!-[1,];var Obj={Create:function(id,id2,ele){var obj=document.createElement(ele);obj.setAttribute("id",id2);div(id).appendChild(obj);},del:function(id){var obj=div(id);obj.parentNode.removeChild(obj);},inner:function(id,text){div(id).innerHTML=text;},css:function(){this.cssinfo();var obj=div(this.css.id);with(obj.style){ie?(this.css.float!=undefined?styleFloat=this.css.float:""):(this.css.float!=undefined?cssFloat=this.css.float:"");this.css.background!=undefined?background=this.css.background:"";this.css.width!=undefined?width=this.css.width:"";this.css.height!=undefined?height=this.css.height:"";this.css.position!=undefined?position=this.css.position:"";this.css.left!=undefined?left=this.css.left:"";this.css.top!=undefined?top=this.css.top:"";this.css.padding!=undefined?padding=this.css.padding:"";this.css.margin!=undefined?margin=this.css.margin:"";this.css.filter!=undefined?filter=this.css.filter:"";this.css.opacity!=undefined?opacity=this.css.opacity:"";this.css.zIndex!=undefined?zIndex=this.css.zIndex:"";this.css.border!=undefined?border=this.css.border:"";this.css.overflow!=undefined?overflow=this.css.overflow:"";this.css.display!=undefined?display=this.css.display:"";this.css.textAlign!=undefined?textAlign=this.css.textAlign:"";this.css.fontSize!=undefined?fontSize=this.css.fontSize:"";this.css.color!=undefined?color=this.css.color:"";this.css.verticalAlign!=undefined?verticalAlign=this.css.verticalAlign:"";this.css.cursor!=undefined?cursor=this.css.cursor:"";}},oEventX:function(e){var e=window.event?window.event:e;return e.clientX;},oEventY:function(e){var e=window.event?window.event:e;return e.clientY;}}var Create=Obj.Create,inner=Obj.inner,del=Obj.del,oX=Obj.oEventX,oY=Obj.oEventY;Obj.css.prototype.cssinfo=function(){this.css=css;return this;}</script><style>*{margin:0;padding:0;font:12px/1.5em "宋体"}.imgs{font-size:0;line-hegiht:0;}.imgwrap{overflow:hidden;zoom:1;margin:100px;float:left;border:1px solid #e0e0e0;display:inline;overflow:hidden;}.imgwrap .imgs{display:block;}.imgwrap .imgs img{width:300px;}</style></head><body id="body"><div id="imgwrap" class="imgwrap"><span class="imgs"><img src="https://img.aspxhome.com/file/UploadPic/20116/16/50073_2010032209581612gcz-65.jpg" alt="测试图片" class="izoom" /></span></div><script>function imgzoom(){var container="imgwrap"/*容器ID*/,imgload="img_loader"/*鼠标捕捉框ID*/,imgshow="img_shower"/*大图展示ID*/,showerL=320/*大图展示位置*/,showerT=0/*大图展示位置*/,navbug=200/*鼠标位置校正，当改变图片位置时候需要调整*/;var il_w=120,il_h=120,v=2.25/*捕捉框大小以及放大倍数*/;css={id:container,position:"relative",overflow:"visible",cursor:"crosshair"}new Obj.css;var imgs=div("imgwrap").getElementsByTagName("img");for(i=0;i<imgs.length;i++){if(imgs.className=="izoom");imgs[i].onmouseover=function(){Start(arguments[0],this)};}function Start(e,o){o.onmouseover="";Create(container,imgload,"div");Create(container,imgshow,"div");var image=new Image(),o2=div(imgload);image.src=o.src;var h=image.height,w=image.width;var h1=o.height,w1=o.width;var MouseX=oX(arguments[0]),MouseY=oY(arguments[0]),parentX=o.offsetWidth-o.style.border*2,parentY=o.offsetHeight;var img="<img src='"+image.src+"' style='width:"+o.width*v+"px;' id='objzoom' />";css={id:imgload,width:il_w+"px",height:il_h+"px",border:"1px solid #300",position:"absolute",background:"#fff",opacity:"0.3",filter:"alpha(opacity='30')"}new Obj.css;inner(imgshow,img);css={id:imgshow,width:il_w*v+"px",height:il_h*v+"px",position:"absolute",left:showerL+"px",top:showerT+"px",overflow:"hidden"}new Obj.css;css={id:"objzoom",position:"absolute"}new Obj.css;ie?o.attachEvent('onmouseover',MouseM):o.addEventListener('mouseover',MouseM,false);ie?o.attachEvent('onmousemove',MouseM):o.addEventListener('mousemove',MouseM,false);ie?o2.attachEvent('onmousemove',MouseM):o2.addEventListener('mousemove',MouseM,false);ie?o2.attachEvent('onmouseout',clearadd):o2.addEventListener('mouseout',clearadd,false);function MouseM(){var sizeX=(oX(arguments[0])-(il_w+2+navbug)/2),sizeY=(oY(arguments[0])-(il_h+2+navbug)/2);var vX=sizeX>=0?(sizeX+(il_w+2)/2<=parentX-(il_w+2)/2?sizeX:(parentX-(il_w+2))):0,vY=sizeY>=0?(sizeY+(il_h+2)/2<=parentY-(il_h+2)/2?sizeY:(parentY-(il_h+2))):0;css={id:imgload,left:vX+"px",top:vY+"px"}new Obj.css;css={id:"objzoom",left:-vX*v+"px",top:-vY*v+"px"}new Obj.css;}function clearadd(){setTimeout(clearall,10)function clearall(){del(imgshow);del(imgload);o.onmouseover=function(){Start(arguments[0],this)};}}}}imgzoom();</script></body></html>

感谢大家支持又做了个新的多图片放大效果~
顺便装饰了一下希望能用上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><link type="image/x-icon" href="" rel="shortcut icon"><script type="text/javascript">function div(id){return document.getElementById(id);}var ie=!-[1,];var Obj={Create:function(id,id2,ele){var obj=document.createElement(ele);obj.setAttribute("id",id2);div(id).appendChild(obj);},del:function(id){var obj=div(id);obj.parentNode.removeChild(obj);},inner:function(id,text){div(id).innerHTML=text;},css:function(){this.cssinfo();var obj=div(this.css.id);with(obj.style){ie?(this.css.float!=undefined?styleFloat=this.css.float:""):(this.css.float!=undefined?cssFloat=this.css.float:"");this.css.background!=undefined?background=this.css.background:"";this.css.width!=undefined?width=this.css.width:"";this.css.height!=undefined?height=this.css.height:"";this.css.position!=undefined?position=this.css.position:"";this.css.left!=undefined?left=this.css.left:"";this.css.top!=undefined?top=this.css.top:"";this.css.padding!=undefined?padding=this.css.padding:"";this.css.margin!=undefined?margin=this.css.margin:"";this.css.filter!=undefined?filter=this.css.filter:"";this.css.opacity!=undefined?opacity=this.css.opacity:"";this.css.zIndex!=undefined?zIndex=this.css.zIndex:"";this.css.border!=undefined?border=this.css.border:"";this.css.overflow!=undefined?overflow=this.css.overflow:"";this.css.display!=undefined?display=this.css.display:"";this.css.textAlign!=undefined?textAlign=this.css.textAlign:"";this.css.fontSize!=undefined?fontSize=this.css.fontSize:"";this.css.color!=undefined?color=this.css.color:"";this.css.verticalAlign!=undefined?verticalAlign=this.css.verticalAlign:"";this.css.cursor!=undefined?cursor=this.css.cursor:"";}},oEventX:function(e){var e=window.event?window.event:e;return e.clientX;},oEventY:function(e){var e=window.event?window.event:e;return e.clientY;}}var Create=Obj.Create,inner=Obj.inner,del=Obj.del,oX=Obj.oEventX,oY=Obj.oEventY;Obj.css.prototype.cssinfo=function(){this.css=css;return this;}</script><style>*{margin:0;padding:0;font:12px/1.5em "宋体"}body{background:#667594;padding:20px;overflow:hidden;}ul,li{list-style:none}body .bdl{border-left-style:dotted}body .bdr{border-right-style:dotted}.imgwrap{border:1px solid #e0e0e0;width:600px;height:600px;background:#fff;float:left;overflow:hidden}.images ul{overflow:hidden;zoom:1;}.images li{float:left;margin:40px 0 0 60px;border:1px solid #e0e0e0;line-height:0;font-size:0;cursor:crosshair;display:inline;height:240px;}.images img{width:200px}</style></head><body id="body"><div class="imgwrap bdr" id="imgwrap"><ul class="images"><li><img src="https://img.aspxhome.com/file/UploadPic/20116/16/zidian_s-32.gif" alt="图片1" /></li><li><img src="https://www.aspxhome.com/images/logo.gif" alt="图片2" /></li><li><img src="https://img.aspxhome.com/file/UploadPic/20116/16/e09fe76372ce5cc4e6113a10-60.jpg" alt="图片3" /></li><li><img src="https://img.aspxhome.com/file/UploadPic/20116/16/319bcf18042b09974aedbc9c-69.jpg" alt="图片4" /></li></ul></div><div class="imgwrap bdl" id="showwrap"></div><script>function Info(e){this.z=10;this.wrap="body";this.show="showwrap";this.c="imgwrap";this.nc="newcontainer";this.em="eventmouse";this.ew="50";this.eh="50";this.obj=e;this.bugL=21;this.bugT=21;this.sT=document.documentElement.scrollTop;div(this.em)?del(this.em):false;div(this.nc)?del(this.nc):false;}Info.prototype.Scope=function(){Create(this.wrap,this.em,"div");Create(this.show,this.nc,"div");var M=div(this.em),S=div(this.nc);var Top=this.obj.offsetTop,Left=this.obj.offsetLeft,Width=this.obj.offsetWidth,Height=this.obj.offsetHeight;this.minTop=Top;this.minLeft=Left;this.maxLeft=Left+Width-2-this.ew;this.maxTop=Top+Height-2-this.eh;if(ie){this.minLeft+=this.bugL;this.maxLeft+=this.bugL;this.minTop+=this.bugT;this.maxTop+=this.bugT}}Info.prototype.Move=function(){var eLeft=oX(arguments[0])-this.ew/2,eTop=oY(arguments[0])-this.eh/2;var Left=eLeft<this.minLeft?this.minLeft:(eLeft>this.maxLeft?this.maxLeft:eLeft),Top=eTop<this.minTop?this.minTop:(eTop>this.maxTop?this.maxTop:eTop);css={id:this.em,width:this.ew+"px",height:this.eh+"px",left:Left+"px",top:Top+"px",position:"absolute",display:"block",border:"1px solid #e0e0e0",cursor:"crosshair"}new Obj.css;css={id:this.nc,width:this.ew*z+"px",height:this.eh*z+"px",position:"relative",zIndex:999,border:"1px solid #e0e0e0",overflow:"hidden",margin:"50％ auto 0 auto",top:-this.eh*z/2+"px"}new Obj.css;var imgLeft=Left-this.obj.offsetLeft,imgTop=Top-this.obj.offsetTop;var image=new Image(),obj=this.obj.children[0],nc=div(this.nc);image.src=obj.src;image.width=obj.offsetWidth;nc.innerHTML="<img src='"+image.src+"' id='new_img' style='width:"+image.width*z+"px;' />";css={id:"new_img",position:"absolute",top:-imgTop*z+"px",left:-imgLeft*z+"px"}new Obj.css;}function ZoomStart(e){Info.call(this);var Zoom=new Info(e);Zoom.Scope();Zoom.Move(arguments[1]);var M=div(this.em),S=div(this.nc);M.onmousemove=function(){Zoom.Move(arguments[0]);};e.onmousemove=function(){Zoom.Move(arguments[0]);};M.onmouseout=End;function End(){del(M.id);del(S.id);}}var obj=div("imgwrap"),zImgs=obj.getElementsByTagName("li");for(var i=0;i<zImgs.length;i++){zImgs[i].onmouseover=function(){ZoomStart(this,arguments[0])}}</script></body></html>

投稿

图片放大镜，多图片放大（已更新）[可调整倍数、区域大小、展示区域位置]

猜你喜欢