先看看Demo和效果图： http://www.afei.name/demo/zoom/
放大镜效果的原理简单，很多人都用过、写过。
难点在圆形，因为大图超出圆形区域的部分无法遮罩。
废话少说，直接爆原理：
1. Firefox和Chrome中，用 css
-moz-border-radius:105px;
-webkit-border-radius:105px;
来实现一个圆形DIV容器，然后把图片作为容器的背景图片，移动的时候，调整对象的 backgroundPosition;
2. IE中，用 Chroma 滤镜配合一个四角PNG来使四个圆角透明
<div style="filter:chroma(color=red);background:url("大图地址")"><img src="四个圆角区域为红色，中间圆形区域透明的PNG图片"/></div>
这里贴出源码：/*Copyright by 疯子阿飞 xiarugu@163.com */
Code
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放大镜演示</title>
<!--[if !mso]>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<![endif]-->
<script type="text/javascript" src="http://admin.membrane-solutions.com/public/"></script>
<script type="text/javascript" src="http://admin.membrane-solutions.com/public/js/jquery.Drag.js"></script>
</head>
<body>
<div id="divBox" style="position:absolute;left:100px;top:100px;">
<div id="divBG" style="background:url('sky.jpg') no-repeat;width:512px;height:384px;position:absolute;left:0px;top:0px;"><img src="sky.jpg" width="512" height="384"/></div>
<div id="divMask" style="background:#FFF;width:512px;height:384px;position:absolute;left:0px;top:0px;"></div>
<div style="position:absolute;left:0px;top:0px;width:155px;height:158px;cursor:pointer;" id="divM">
<div style="width:210px;height:210px;background:url('sky.jpg') no-repeat -100px -100px;position:absolute;-moz-border-radius:105px;-webkit-border-radius:105px;border-radius:105px;left:0px;top:0px;z-index:1;filter:chroma(color=red);" id="divP"><img src="red.png"/></div>
<div style="width:239px;height:239px;background:url('r.png') no-repeat;position:absolute;left:-13px;top:-13px;z-index:2;"></div>
</div>
</div>
</body>
<script language="javascript">
/*Copyright by 疯子阿飞 xiarugu@163.com */
function class_Form($)
{
var divM=$("#divM");
var divBox=$("#divBox");
var divP=document.getElementById("divP");
this.Init=function()
{
$("#divMask").fadeTo(0,0.7);
if(!$.browser.msie)
$(divP).find("img").hide();
var pos=divBox.offset();
divBox[0].pos=pos;
//divBox.bind("mousemove",divM_Drag);
divM.bind("drag",divM_Drag);
}
function divM_Drag(e)
{
//e.offsetX=e.clientX-this.pos.left-110;
//e.offsetY=e.clientY-this.pos.top-110;
var w=-50;
var mX=512-155;
var mY=384-155;
var x=e.offsetX-divBox[0].pos.left;
var y=e.offsetY-divBox[0].pos.top;
if(x<w)
x=w;
else if(x>mX)
x=mX;
if(y<w)
y=w;
else if(y>mY)
y=mY;
divM[0].style.left=x+"px";
divM[0].style.top=y+"px";
x=x*2+100;
y=y*2+100;
divP.style.backgroundPosition=(-x)+"px "+(-y)+"px";
}
}
$.Init(class_Form);
</script>
</html>
