| <html> <head> <title>图片局部放大效果 by okajax.com</title> </head> <body> <BR> 原图：<BR> <a href="http://www.511sj.com/" target="_blank"><img src="http://www.511sj.com/hdp/080917/_143640360.gif" width="302" height="500" id=srcImg border="0"></a> <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> |
| 本文连接地址：http://www.511sj.com/html/wangdianjianshe/ecshop_mobanzhizuo/920.Html |
编辑整理：北京网店建设 ecshop模板 ecshop模板 |
