本帖最后由 李琼 于 2012-11-6 23:54 编辑
- <html>
- <head>
- <title>emu</title>
- </head>
- <body>
- 原图：
- <img src="落花.jpg" onMouseMove="zoom()" id=srcImg>
- 局部放大图：
- <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>
附件已上传，两种方法。
|
|
收藏
淘帖
踩
