先看一下效果

接下來是核心代碼

$(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/

代碼下載：DEMO下載

原文鏈接：http://www.cnblogs.com/lufy/archive/2012/05/29/2523439.html

【編輯推薦】

1. jQuery插件之Ajax自動完成
2. jQuery基本事件代碼優化
3. 印象深刻的jQuery手風琴效果應用
4. jQuery可多次使用的星級插件
5. JQuery插件的開發真的有那么難嗎