Introduction à deux méthodes d'implémentation de la loupe Taobao en JavaScript (exemples de code)

Ce que cet article vous apporte est une introduction à deux méthodes (exemples de code) d'implémentation de Taobao Magnifying Glass en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Qu'est-ce que la loupe Taobao

Ceci, lorsque votre souris se déplace sur l'image principale à gauche, une apparaîtra à droite L'image agrandie, appelons cela une loupe.

Méthode approximative

• La première façon est d'avoir une petite image à gauche et une image originale à droite. Lorsque la souris passe sur la petite image, changez. la valeur gauche et supérieure pour obtenir un mouvement synchrone (l'attribut de position de l'image originale est défini sur absolu)

• Deuxièmement, lorsque la souris se déplace sur la petite image, en changeant l'arrière-plan- position de la valeur de l’image originale pour se déplacer de manière synchrone.

Opérations clés

• La première étape consiste à obtenir la position de la souris sur la petite image et à positionner la case qui suit la souris (vous je devrais savoir De quel bloc s'agit-il ?

//e.offsetX ,offsetY是鼠标的位置
//方块的left top在你的鼠标的左上方（网页左上角是原点），因此是减去一个方块的一半。
      var x = e.offsetX - 方块.offsetWidth / 2;
      var y = e.offsetY - 方块.offsetHeight / 2;
      方块.style.left = x + 'px';
      方块.style.top = y + 'px';

Cela n'est évidemment pas suffisant !

Vous devez également prendre en compte les positions/situations extrêmes
Si vous utilisez uniquement les paramètres ci-dessus, lorsque votre souris se déplace vers le bord de l'image, la moitié du carré apparaîtra à l'extérieur l'image.

La bonne réponse devrait être Lorsque votre bloc touche le bord, votre bloc ne peut plus bouger, Bien que votre souris soit toujours Déplacez-vous en dehors de la zone « effective » zone d'activité de la souris" dans l'image ci-dessous.

Ensuite, vous devez ajouter du code

      if (x  小图.offsetWidth - 方块.offsetWidth) {
        x = 小图.offsetWidth - 方块.offsetWidth;
      }
      if (y > 小图.offsetHeight - 方块.offsetHeight) {
        y = 小图.offsetHeight - 方块.offsetHeight;
      }

• La deuxième étape consiste à contrôler la gauche - en haut ou en arrière-plan - position dans la grande image

      //第一种方法：需要注意的是这里的left 和 top得反过来，你鼠标在小图上往下移的时候，对应的大图其实是往上移的。
      //所以：大图上的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}%`;

Notes

• Nous avons mentionné ci-dessus que l'événement mousemove est lié à la petite image img pour positionner le block. En fait, en fonctionnement réel, nous ne pouvons pas le lier directement avec img, mais devons utiliser un calque de masque de la même taille que img, sinon, lorsque vous déplacez la souris, l'image clignote follement , follement ! fou!

• Il existe également une fonction de limitation. Si vous souhaitez limiter cela, limitez-le simplement.

• Il y a une autre chose très importante, qui est la taille du p à droite de montrant la grande image , ce doit être la taille de la case sur la petite image* Zoom Si la taille du grossissement est trop grande, il y aura plus d'espace vide. Si elle est trop petite, l'affichage sera incomplet. Vous trouverez le code ci-dessous à emporter chez vous et à tester comme un fou.

Un peu plus de détails

Je sais que je ne suis peut-être pas très détaillé, donc. .

nbsp;html>



  <meta>
  <meta>
  <meta>
  <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>



  <div>
    <img  alt="Introduction à deux méthodes d'implémentation de la loupe Taobao en JavaScript (exemples de code)" >
    <div></div>
    <div></div>
  </div>
  <div>
    <img  alt="Introduction à deux méthodes d'implémentation de la loupe Taobao en JavaScript (exemples de code)" >
  </div>
  <div>
    <div></div>
  </div>

<script>
  
  window.onload = function () {
    var mask = document.getElementsByClassName(&#39;mask&#39;)[0];
    //为什么要用mask呢？不直接用选中small-pic。
    //如果直接选择图片标签来绑定下面的mouseover事件，图片会一直闪烁！所以我们得给他一个和图片一样大小的遮罩层
    var rect = document.getElementsByClassName(&#39;rect&#39;)[0];
    var bPic = document.getElementsByClassName("big-pic")[0];
    var bPic2 = document.getElementsByClassName("big-pic2")[0];
    mask.addEventListener(&#39;mousemove&#39;, throttle(magnifier,100))
    function magnifier(e){

      //方块的left top在你的鼠标的左上方（网页左上角是原点），因此是减去一个方块的一半。
      var x = e.offsetX - rect.offsetWidth / 2;
      var y = e.offsetY - rect.offsetHeight / 2;
      //极端情况,也就是当你的鼠标上的方块到四个边的边缘的时候。
      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 + &#39;px&#39;;
      rect.style.top = y + &#39;px&#39;;

      //第一种方法：需要注意的是这里的left 和 top得反过来，你鼠标在小图上往下移的时候，对应的大图其实是往上移的。
      //所以：大图上的left = -小图上的left * 他们的缩放倍率
      bPic.style.display = "block";
      bPic.style.left = -x * bPic.offsetWidth / mask.offsetWidth  + &#39;px&#39;;
      bPic.style.top = -y * bPic.offsetHeight / mask.offsetHeight +  &#39;px&#39;;
     
     //第二种方法，这里需要注意 backgroundPosition的值是从0 - 100%的（得用百分比表示）；
     //需要注意的是何时为百分百，从上面的极端情况判定我们可以知道
     //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(&#39;mouseout&#39;,function(){
      rect.style.display = "none";
      bPic.style.display = "none";
      bPic2.style.display = "none";
    })


    //函数节流
    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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!