放大镜效果在很多网站都在使用，尤其在图片类型网站或者购物网站。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.chajianwo.com/" />
<title>插件窝</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.box{
position:relative;
margin:10px auto;
padding:10px;
border:1px solid #666;
background:#CCC;
width:250px;
}
.box .small{
position:relative;
text-align:center;
background:#FFF;
height:167px;
}
.box .small .mark{
position:absolute;
top:0;
left:0;
z-index:2;
width:80px;
height:80px;
background:#FFFFFF;
filter:alpha(opacity:50);
opacity:0.5;
border:1px solid #333;
display:none;
}
.box .big{
position:absolute;
left:0;
top:0;
display:none;
}
.boxbig{
position:absolute;
left:275px;
top:0;
width:160px;
height:160px;
overflow:hidden;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
var mouseX = 0;
var mouseY = 0;
var maxLeft = 0;
var maxTop = 0;
var markLeft = 0;
var markTop = 0;
var perX = 0;
var perY = 0;
var bigLeft = 0;
var bigTop = 0;
function updataMark($mark){
if(markLeft<0){
markLeft = 0;
}
else if(markLeft>maxLeft){
markLeft=maxLeft;
}
if(markTop<0){
markTop=0;
}
else if(markTop>maxTop){
markTop=maxTop;
}
perX=markLeft/$(".small").outerWidth();
perY=markTop/$(".small").outerHeight();
bigLeft=-perX*$(".big").outerWidth();
bigTop=-perY*$(".big").outerHeight();
//设定小框的位置
$mark.css({"left":markLeft,"top":markTop,"display":"block"});
}
//改变大图的位置
function updataBig(){
$(".big").css({"display":"block","left":bigLeft,"top":bigTop});
}
//鼠标移出时
function cancle(){
$(".big").css({"display":"none"});
$(".mark").css({"display":"none"});
}
//鼠标小图上移动时
function imgMouseMove(event){
var $this = $(this);
var $mark = $(this).children(".mark");
//鼠标在小图的位置
mouseX=event.pageX-$this.offset().left - $mark.outerWidth()/2;
mouseY=event.pageY-$this.offset().top - $mark.outerHeight()/2;
//最大值
maxLeft=$this.width()-$mark.outerWidth();
maxTop=$this.height()-$mark.outerHeight();
markLeft=mouseX;
markTop=mouseY;
updataMark($mark);
updataBig();
}
$(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);
})
</script>
</head>
<body>
<div class="box">
<div class="small">
<span class="mark"></span>
<img src="mytest/jQuery/1_s.jpg" alt="" />
</div>
<div class="boxbig">
<div class="big"><img src="mytest/jQuery/1_b.jpg" alt="" /></div>
</div>
</div>
</body>
</html>一.实现原理:
原理特别的简单，两张等比例的图片，一张是小图，一张是大图，当鼠标在小图中移动的时候会出现一个半透明的遮罩图片，用来标识要放大的区域，这个时候就根据相应的比例，在另一个区域调整大图的left和top属性值，来显示相应的位置，原理大致如此，具体可以参阅代码注释，再加以思考，应该很容易弄明白。
二.代码注释:
（1）.$(function(){})，当文档结构完全加载完毕之后再去执行函数中的代码。
（2）.var mouseX=0，声明一个变量用来存放半透明遮罩框的左边缘距离small元素的距离。
（3）.var mouseY=0，声明一个变量用来存放半透明遮罩框的上边缘距离small元素的距离。
（4）.var maxLeft=0，声明一个变量用来存放半透明遮罩框左边缘距离samll元素的最大距离。
（5）.var maxTop=0,声明一个变量用来存放半透明遮罩框的上边缘距离small元素的最大距离。
（6）.var markLeft=0，用来存放mouseX值。
（7）.var markTop=0，用来存放mouseY值。
（8）.var perX=0，用来存放mouseX与samll元素宽度的比例。
（9）.var perY=0，用来存放mouseY与samll元素高度的比例。
（10）.var bigLeft=0，用来存放big元素left属性值。
（11）.var bigTop=0，用来存放big元素的top属性值。
（12）.function updataMark($mark){}，此函数可以控制办透明遮罩层的位置，参数为半透明对象。
（13）.if(markLeft<0){markLeft = 0;}，如果半透明遮罩框左边缘超出small元素的左边缘，则将markLeft值设置为0，也就是让半透明遮罩层贴在samll元素内壁上。
（14）.else if(markLeft>maxLeft){markLeft=maxLeft;}，如果半透明遮罩层右边缘超出small元素的右边缘，则将markLeft设置为maxLeft，也就是让半透明遮罩层贴在small元素的右侧内壁。
（15）.perX=markLeft/$(".small").outerWidth()，可以计算出半透明遮罩层在small元素中向左移动的尺寸占small元素宽度的比例，使用这个值再乘以大图的尺寸就可以计算出大图相应的移动尺寸，这样可以确保放大位置和右侧出现的放大位置对应。
（16）.perY=markTop/$(".small").outerHeight()，和上面同样的道理。
（17）.bigLeft=-perX*$(".big").outerWidth()，计算出big元素左移的尺寸，其实也就是图片左移的尺寸。
（18）.bigTop=-perY*$(".big").outerHeight(),和上面同样的道理。
（19）.$mark.css({"left":markLeft,"top":markTop,"display":"block"})，设置半透明遮罩框的位置，并将其设为可见。
（20）.function updataBig(){}，设置big元素的定位坐标。
（21）.$(".big").css({"display":"block","left":bigLeft,"top":bigTop})，设置big元素的left和top属性值，并将其设置为可见。
（22）.function cancle(){}，规定当鼠标移出时的操作。
（23）.$(".big").css({"display":"none"})，将big设置为隐藏。
（24）.$(".mark").css({"display":"none"})，将半透明遮罩层设置为隐藏。
（25）.function imgMouseMove(event){}，当鼠标移动时，用来设定遮罩层的坐标。
（26）.var $this=$(this)，鼠标移动所在的对象。
（27）.var $mark=$(this).children(".mark")，获取半透明遮罩框对象。
（28）.mouseX=event.pageX-$this.offset().left-$mark.outerWidth()/2，设置半透明遮罩框的左边缘距离samll元素的距离，使用这种方式也可以将鼠标指针位于遮罩框水平中心位置。
（29）.mouseY=event.pageY-$this.offset().top-$mark.outerHeight()/2，和上面同样的道理。
（30）.maxLeft=$this.width()-$mark.outerWidth()，获取半透明遮罩框左边缘距离samll元素的最大距离。
（31）.maxTop=$this.height()-$mark.outerHeight()，半透明遮罩框的上边缘距离small元素的最大距离。
（32）.$(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle)，事件处理函数的绑定。