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

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

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

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

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

//e.offsetX ,offsetY是鼠標(biāo)的位置
//方塊的left top在你的鼠標(biāo)的左上方（網(wǎng)頁左上角是原點(diǎn)），因此是減去一個(gè)方塊的一半。
      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)移動(dòng)到圖片邊緣的時(shí)候，方塊有一半會(huì)出現(xiàn)在圖片外。

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

那么得加點(diǎn)代碼

      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)在小圖上往下移的時(shí)候，對應(yīng)的大圖其實(shí)是往上移的。
      //所以：大圖上的left = -小圖上的left * 他們的縮放倍率
      大圖.style.display = "block";
      大圖.style.left = -x * 大圖.offsetWidth / 小圖.offsetWidth  + "px";
      大圖.style.top = -y * 大圖.offsetHeight / 小圖.offsetHeight + "px";
     
     //第二種方法，這里需要注意 backgroundPosition的值是從0 - 100%的（得用百分比表示）；
     //需要注意的是何時(shí)為百分百，從上面的極端情況判定我們可以知道
     //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事件來定位方塊，其實(shí)實(shí)際操作上，我們不能直接用img來綁定，而是得用一個(gè)和img一樣大小遮罩層來綁定，不然在你鼠標(biāo)移動(dòng)的時(shí)候，圖片會(huì)瘋狂閃爍，瘋狂！crazy！

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

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

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

有錯(cuò)誤的地方請指出，謝謝啦