用&#106avascript放大图片局部

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航