用javascript放大图片局部

最新推荐文章于 2022-06-07 22:12:27 发布

a52202261

最新推荐文章于 2022-06-07 22:12:27 发布

阅读量132

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/EasonWu/archive/2008/09/22/1296056.html

版权

<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>