首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 > 用javascript制作放大镜放大图片 2006-07-20 00:00:00 作者： 用javascript制作放大镜放大图片 <html> <head> <title>emu</title> </head> <body> 原图： <img src=http://www.web745.com/image/logo.gif width="280" height="150" id=srcImg onmousemove="zoom()"> 局部放大图： <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> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:js canvas实现放大镜查看图片功能JavaScript实现多张图片放大镜效果示例【不限定图片尺寸，rem单位】js放大镜放大图片效果JavaScript图片放大镜效果代码[代码比较简单]JavaScript 图片放大镜（可拖放、缩放效果）电子商务网站上的常用的js放大镜效果JavaScript 图片切割效果(放大镜)JS实现图片放大镜效果的方法Javascript 实现放大镜效果实例详解原生js仿淘宝网商品放大镜效果javascript放大镜效果的简单实现JavaScript+HTML5 canvas实现放大镜效果完整示例
