這篇文章給大家分享的是有關(guān)JavaScript實現(xiàn)淘寶放大鏡的方法有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司專注于商水企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。商水網(wǎng)站建設(shè)公司,為商水等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站建設(shè)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

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

大概的做法

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

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

關(guān)鍵操作

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

//e.offsetX ,offsetY是鼠標的位置
//方塊的left top在你的鼠標的左上方（網(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)你的鼠標移動到圖片邊緣的時候，方塊有一半會出現(xiàn)在圖片外。

正確的應(yīng)該是當(dāng)你的方塊觸碰到邊緣的時候，你的方塊就不能在移動了，盡管你的鼠標還在往下圖中“鼠標的有效活動區(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得反過來，你鼠標在小圖上往下移的時候，對應(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一樣大小遮罩層來綁定，不然在你鼠標移動的時候，圖片會瘋狂閃爍，瘋狂！crazy！

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

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

再詳細一點

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

感謝各位的閱讀！關(guān)于JavaScript實現(xiàn)淘寶放大鏡的方法有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享名稱：JavaScript實現(xiàn)淘寶放大鏡的方法有哪些-創(chuàng)新互聯(lián)
文章URL：http://weahome.cn/article/dhedsg.html