基于jquery的放大镜效果

核心代码如下:

$(function(){
var mousex = 0; //鼠标移动的位置x
var mousey = 0; //鼠标移动的位置y
var maxleft = 0; //最右边
var maxtop = 0; //最下边
var markleft = 0; //放大镜移动的左部距离
var marktop = 0; //放大镜移动的顶部距离
var perx = 0; //移动的x百分比
var pery = 0; //移动的y百分比
var bigleft = 0; //大图要移动left的距离
var bigtop = 0; //大图要移动top的距离
//改变放大镜的位置
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);
})

这个里面主要有二点

1.如何大图跟随"放大镜"的位置，同时移动大图?

其实就是用到一个比例关系，当“放大镜”移动多少比例（是比例，不是具体值），大图也同时用这个比例去乘以大图的宽和高，就可以算出大图该移动多少距离了；

2.显示区域和放大镜的关系？

这里的“放大镜”应该和大图的显示区域的比例，应该是大图和小的比例关系一样。比如大图和小图的比例是1:2，那个“放大镜”区域的大小，和显示大图区域的大小比例也应该是1:2，不然“放大镜”罩住的小图区域，和大图的显示区域，所显示的图像信息，不能保持一致。（妙味课堂里讲的那个实例，就是没有保持一至）。