摘要：啥是淘寶放大鏡這個，當(dāng)你的鼠標(biāo)移動到左邊的主圖上時，右邊會出現(xiàn)一個放大的圖，暫且就把這個叫做放大鏡吧。

這個，當(dāng)你的鼠標(biāo)移動到左邊的主圖上時，右邊會出現(xiàn)一個放大的圖，暫且就把這個叫做放大鏡吧。

第一種，左邊一個小圖，右邊一個原圖，當(dāng)鼠標(biāo)在小圖上移動的時候，通過更改left和top的值來實現(xiàn)同步移動（原圖的position屬性設(shè)置為absolute）

第二種，鼠標(biāo)在小圖上移動的時候，通過改變原圖的background-position的值來同步移動。

第一步，獲取鼠標(biāo)在小圖上的位置，并且定位好跟隨鼠標(biāo)的方塊（你應(yīng)該知道是哪個方塊吧。。）的位置。

//e.offsetX ,offsetY是鼠標(biāo)的位置
//方塊的left top在你的鼠標(biāo)的左上方（網(wǎng)頁左上角是原點），因此是減去一個方塊的一半。
      var x = e.offsetX - 方塊.offsetWidth / 2;
      var y = e.offsetY - 方塊.offsetHeight / 2;
      方塊.style.left = x + "px";
      方塊.style.top = y + "px";

這明顯是不足夠的！

還需要考慮極端位置/情況
如果只用上面的設(shè)置，那么當(dāng)你的鼠標(biāo)移動到圖片邊緣的時候，方塊有一半會出現(xiàn)在圖片外。

正確的應(yīng)該是 當(dāng)你的方塊觸碰到邊緣的時候，你的方塊就不能在移動了，盡管你的鼠標(biāo)還在往下圖中“鼠標(biāo)的有效活動區(qū)域”外移動。

那么得加點代碼

      if (x < 0) {
        x = 0;
      }
      if (y < 0) {
        y = 0;
      }
      if (x > 小圖.offsetWidth - 方塊.offsetWidth) {
        x = 小圖.offsetWidth - 方塊.offsetWidth;
      }
      if (y > 小圖.offsetHeight - 方塊.offsetHeight) {
        y = 小圖.offsetHeight - 方塊.offsetHeight;
      }

第二步，控制大圖里的left - top或者background-position

      //第一種方法：需要注意的是這里的left 和 top得反過來，你鼠標(biāo)在小圖上往下移的時候，對應(yīng)的大圖其實是往上移的。
      //所以：大圖上的left = -小圖上的left * 他們的縮放倍率
      大圖.style.display = "block";
      大圖.style.left = -x * 大圖.offsetWidth / 小圖.offsetWidth  + "px";
      大圖.style.top = -y * 大圖.offsetHeight / 小圖.offsetHeight + "px";
     
     //第二種方法，這里需要注意 backgroundPosition的值是從0 - 100%的（得用百分比表示）；
     //需要注意的是何時為百分百，從上面的極端情況判定我們可以知道
     //x 是從0 到 mask.offsetWidth - rect.offsetWidth；
     //因此這就是0 - 100%；y同理
      大圖.style.display = "block";
      大圖.style.backgroundPosition =`${x/(mask.offsetWidth - rect.offsetWidth)*100}% ${y/(mask.offsetHeight- rect.offsetHeight)*100}%`;

我們上面說在小圖img上綁定mousemove事件來定位方塊，其實實際操作上，我們不能直接用img來綁定，而是得用一個和img一樣大小遮罩層來綁定，不然在你鼠標(biāo)移動的時候，圖片會瘋狂閃爍，瘋狂！crazy！

還有 就是函數(shù)節(jié)流，這個想節(jié)流就節(jié)流吧。

還有個很重要的，就是右邊那個顯示大圖的div的大小，一定得是小圖上的方塊大小 * 縮放倍率 的大小，如果過大，則會多出空白，過小，顯示不完全。下面有代碼，你可以帶回家瘋狂測試。

我知道我可能說的不是很詳細(xì)，所以。。

有錯誤的地方請指出，謝謝啦