用javascript放大图片局部

<html>

 <head>

 <title>emu</title>

 </head>

 <body>

 <BR>

 原图:<BR>

 <img src=http://img.pconline.com.cn/images/photo2/839980/1118509777696.JPG onmousemove="zoom()" id=srcImg>

 <BR>

 局部放大图:<BR>

 <div style="overflow:hidden"><img id=zoomImg></div>

 

<SCRIPT LANGUAGE="JavaScript">

 <!--

 zoomImg.src = srcImg.src;

 srcImg.height = srcImg.height/2;

 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>

 

你可能感兴趣的:(JavaScript)