核心代码:

复制代码 代码如下:

$(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，不然“放大镜”罩住的小图区域，和大图的显示区域，所显示的图像信息，不能保持一致。（妙味课堂里讲的那个实例，就是没有保持一至）;

在线演示：http://demo.jb51.net/js/2012/mymagnifier/

打包下载：http://www.jb51.net/jiaoben/45315.html