基于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.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.