关键字: 可局部放大图片 局部放大图片 javascript局部放大图片
因为功能上的需要，要局部放大页面上的图片，以看清图片中不清楚的位置
代码复制到.jsp或.html文件里执行就可看到效果
一、这个局部放大只能通过改代码才能实现图片放大的倍率，但是速度很好，鼠标在图片上动放大的图片及时显示，在下面我再发一个可通过鼠标点击图片放大缩小局部放大图片的效果的代码，但速度没有这个快
Html代码<html><head><title>emu</title></head><body><BR>原图：<BR><imgsrc="/400/300/album/album./019/731/51/11091844017907.jpg" onmousemove='zoom()'id=srcImg><BR>局部放大图：<BR><divstyle='overflow:hidden'><imgid=zoomImg></div><scriptlanguage="javascript"type="text/javascript"><!-- zoomImg.src=srcImg.src; srcImgsrcImg.height=srcImg.height; varzoomRate=5; zoomImg.height=srcImg.height*zoomRate; zoomImg.parentNode.style.width=srcImg.width; zoomImg.parentNode.style.height=srcImg.height; functionzoom(){ varelm=event.srcElement; h=elm.offsetHeight/zoomRate/2; w=elm.offsetWidth/zoomRate/2; varx=event.x-elm.offsetLeft; xx=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w; zoomImg.style.marginLeft=(w-x)*zoomRate; vary=event.y-elm.offsetTop; yy=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h; zoomImg.style.marginTop=(h-y)*zoomRate; } //--></script></body></html>
<html><head><title>emu</title></head><body><BR>原图：<BR><img src="/400/300/album/album./019/731/51/11091844017907.jpg" οnmοusemοve='zoom()' id=srcImg><BR>局部放大图：<BR><div style='overflow:hidden'><img id=zoomImg></div><script language="javascript" type="text/javascript"><!--zoomImg.src = srcImg.src;srcImg.height = srcImg.height;var zoomRate = 5;zoomImg.height = srcImg.height*zoomRate;zoomImg.parentNode.style.width = srcImg.width;zoomImg.parentNode.style.height = srcImg.height;function zoom(){var elm = event.srcElement;h = elm.offsetHeight/zoomRate/2;w = elm.offsetWidth/zoomRate/2;var x = event.x-elm.offsetLeft;x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;zoomImg.style.marginLeft=(w-x)*zoomRate;var y = event.y-elm.offsetTop;y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;zoomImg.style.marginTop=(h-y)*zoomRate;}//--></script></body></html>
二、这个可通过鼠标点击图片放大缩小局部放大的图片的效果的代码，但速度稍微慢点
Html代码<html><head><metaname="GENERATOR"content="MicrosoftFrontPage6.0"><title>标本资料</title><scriptlanguage="javascript">variDivHeight=250; variDivWidth=250; variMultiple=8; functionshow(src,sFileName) { if((event.button==1)&&(event.ctrlKey==true)) iMultiple-=1; else if(event.button==1) iMultiple+=1; if(iMultiple<2)iMultiple=2; if(iMultiple>14)iMultiple=14; variPosX,iPosY; variMouseX=event.offsetX; variMouseY=event.offsetY; variBigImgWidth=src.clientWidth*iMultiple; variBigImgHeight=src.clientHeight*iMultiple; if(iBigImgWidth<=iDivWidth) { iPosX=(iDivWidth-iBigImgWidth)/2; } else { if((iMouseX*iMultiple)<=(iDivWidth/2)) { iPosX=0; } else { if(((src.clientWidth-iMouseX)*iMultiple)<=(iDivWidth/2)) { iPosX=-(iBigImgWidth-iDivWidth); } else { iPosX=-(iMouseX*iMultiple-iDivWidth/2); } } } if(iBigImgHeight<=iDivHeight) { iPosY=(iDivHeight-iBigImgHeight)/2; } else { if((iMouseY*iMultiple)<=(iDivHeight/2)) { iPosY=0; } else { if(((src.clientHeight-iMouseY)*iMultiple)<=(iDivHeight/2)) { iPosY=-(iBigImgHeight-iDivHeight); } else { iPosY=-(iMouseY*iMultiple-iDivHeight/2); } } } div1.style.height=iDivHeight; div1.style.width=iDivWidth; if(div1.innerHTML=="") { div1.innerHTML="<imgid=BigImgstyle='position:relative'>"; BigImg.src="http://biomuseum./ASP/search/hexapod/big_pic/"+sFileName; } BigImg.width=iBigImgWidth; BigImg.height=iBigImgHeight; BigImg.style.top=iPosY; BigImg.style.left=iPosX; }</script></head><body><p></p><tablecellspacing="0"cellpadding="1"width="727"align="center"border="0"><tr><tdalign="middle"><tablebordercolor="#000000"height="301"cellspacing="0"cellpadding="0"width="302"bgcolor="#deffde"border="1"><tr><tdalign="middle"><marqueescrolldelay="120"width="80%"><fontsize="2">将鼠标移入标本图中，右方显示局部放大图；单击鼠标左键，可以增大放大倍数；鼠标单击时同时按Ctrl键则减小放大倍数。</font></marquee><br><imgonmousemove="show(this,'B-000002.jpg')"onmousedown="show(this,'B-000002.jpg')"id="imgSource"src="01/B-000002.jpg"></td></tr></table></td><tdstyle="WIDTH:15px"width="15"></td><tdalign="middle"><tablebordercolor="#000000"height="301"cellspacing="0"cellpadding="0"width="302"bgcolor="#deffde"border="1"><tr><tdalign="middle"><ahref="01/B-000002.jpg"target="_blank">打开原图</a><divid="div1"style="OVERFLOW:hidden"></div></td></tr></table></td></tr></table><p></p></body></html>
