基於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，不然“放大鏡”罩住的小圖地區，和大圖的顯示地區，所顯示的映像資訊，不能保持一致。（妙味課堂裡講的那個執行個體，就是沒有保持一至）;

線上示範：http://demo.jb51.net/js/2012/mymagnifier/
打包下載：http://www.jb51.net/jiaoben/45315.html