溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript實(shí)現(xiàn)淘寶放大鏡的方法有哪些

發(fā)布時(shí)間：2020-10-16 15:51:21 來源：億速云 閱讀：131 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)JavaScript實(shí)現(xiàn)淘寶放大鏡的方法有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(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í)候，通過改變?cè)瓐D的background-position的值來同步移動(dòng)。

關(guān)鍵操作

  • 第一步，獲取鼠標(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)在圖片外。

JavaScript實(shí)現(xiàn)淘寶放大鏡的方法有哪些

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

JavaScript實(shí)現(xiàn)淘寶放大鏡的方法有哪些

那么得加點(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í)候，對(duì)應(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}%`;

注意事項(xiàng)

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

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

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

再詳細(xì)一點(diǎn)

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tb放大鏡</title>
  <style>
    .small-box {
      position: relative;
      height: 300px;
    }

    .small-pic {
      width: auto;
      height: 300px;
    }

    .mask {
      width: 526px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 100%;
      cursor: crosshair;
    }

    .rect {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      opacity: .5;
      background-color: red;
      z-index: 0;
    }

    .big-box {
      display: inline-block;
      position: relative;
      width: 266px;
      height:266px;
      border: 1px solid red;
      overflow: hidden;
    }
    .big-pic {
      position: absolute;
      width: 1400px;
      height: 798px;
      top: 0;
      left: 0;
    }
    .big-pic2{
      display: inline-block;
      width: 266px;
      height:266px;
      background-size: auto 798px;
      background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg");
      background-position: 0 0;
}
  </style>
</head>

<body>
  <div>
    <img
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg"
      alt="">
    <div></div>
    <div style="display: none"></div>
  </div>
  <div>
    <img 
    style="display: none"
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg"
      alt="">
  </div>
  <div>
    <div></div>
  </div>
</body>
<script>
  
  window.onload = function () {
    var mask = document.getElementsByClassName('mask')[0];
    //為什么要用mask呢？不直接用選中small-pic。
    //如果直接選擇圖片標(biāo)簽來綁定下面的mouseover事件，圖片會(huì)一直閃爍！所以我們得給他一個(gè)和圖片一樣大小的遮罩層
    var rect = document.getElementsByClassName('rect')[0];
    var bPic = document.getElementsByClassName("big-pic")[0];
    var bPic2 = document.getElementsByClassName("big-pic2")[0];
    mask.addEventListener('mousemove', throttle(magnifier,100))
    function magnifier(e){

      //方塊的left top在你的鼠標(biāo)的左上方（網(wǎng)頁左上角是原點(diǎn)），因此是減去一個(gè)方塊的一半。
      var x = e.offsetX - rect.offsetWidth / 2;
      var y = e.offsetY - rect.offsetHeight / 2;
      //極端情況,也就是當(dāng)你的鼠標(biāo)上的方塊到四個(gè)邊的邊緣的時(shí)候。
      if (x < 0) {
        x = 0;
      }
      if (y < 0) {
        y = 0;
      }
      if (x > mask.offsetWidth - rect.offsetWidth) {
        x = mask.offsetWidth - rect.offsetWidth;
      }
      if (y > mask.offsetHeight - rect.offsetHeight) {
        y = mask.offsetHeight - rect.offsetHeight;
      }

      //方塊定位
      rect.style.display="block";
      rect.style.left = x + 'px';
      rect.style.top = y + 'px';

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

    }


    mask.addEventListener('mouseout',function(){
      rect.style.display = "none";
      bPic.style.display = "none";
      bPic2.style.display = "none";
    })


    //函數(shù)節(jié)流
    function throttle(fn, delay) {
      var pre = new Date().getTime();
      return function () {
        var context = this;
        var args = arguments;
        var now = new Date().getTime();
        if (now - pre > delay) {
          fn.apply(this,arguments);
        }
      }
    }


  }
</script>

</html>

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手