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

<SCRIPTLANGUAGE ="JavaScript" >
<!--
zoomImg.src=srcImg.src;
srcImg.height=srcImg.height/2;
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;
x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
zoomImg.style.marginLeft=(w-x)*zoomRate;
vary=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,html)