TryIt Editor v2.0 - Exemple de zoom d'image avec JS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        box-sizing: border-box;
      }
      .img-zoom-conatiner {
        position: relative;
      }
      .img-zoom-lens {
        position: absolute;
        border: 1px solid #d4d4d4;
        /*mettez la taille de la lentille:*/
        width: 40px;
        height: 40px;
      }
      .img-zoom-result {
        border: 1px solid #d4d4d4;
        /*mettez la taille du résultat div:*/
        width: 150px;
        height: 300px;
      }
    </style>
    <script>
      function imageZoom(imgID, resultID) {
        var img, lens, result, cx, cy;
        img = document.getElementById(imgID);
        result = document.getElementById(resultID);
        /*créez la lentille:*/
        lens = document.createElement("DIV");
        lens.setAttribute("class", "img-zoom-lens");
        /*mettez la lentille:*/
        img.parentElement.insertBefore(lens, img);
        /*calculez le ratio entre le résultat DIV and la lentille:*/
        cx = result.offsetWidth / lens.offsetWidth;
        cy = result.offsetHeight / lens.offsetHeight;
        /*définissez les propriétés de fond pour le résultat DIV:*/
        result.style.backgroundImage = "url('" + img.src + "')";
        result.style.backgroundSize = img.width * cx + "px " + img.height * cy + "px";
        /*Exécutez une fonction lorsque quelqu’un déplace le curseur sur l’image ou sur la lentille:*/
        lens.addEventListener("mousemove", moveLens);
        img.addEventListener("mousemove", moveLens);
        /*et aussi pour les écrans tactiles:*/
        lens.addEventListener("touchmove", moveLens);
        img.addEventListener("touchmove", moveLens);
        function moveLens(e) {
          var pos, x, y;
          /*empêchez toute autre action pouvant se produire pendant le déplacement sur l’image:*/
          e.preventDefault();
          /*obtenez les positions x et y du curseur:*/
          pos = getCursorPos(e);
          /*calculez la position de la lentille :*/
          x = pos.x - lens.offsetWidth / 2;
          y = pos.y - lens.offsetHeight / 2;
          /*empêchez la lentille d’être positionnée à l’extérieur de l’image:*/
          if (x > img.width - lens.offsetWidth) {
            x = img.width - lens.offsetWidth;
          }
          if (x < 0) {
            x = 0;
          }
          if (y > img.height - lens.offsetHeight) {
            y = img.height - lens.offsetHeight;
          }
          if (y < 0) {
            y = 0;
          }
          /*mettez la position de la lentille:*/
          lens.style.left = x + "px";
          lens.style.top = y + "px";
          /*affichez ce que la lentille “voit”":*/
          result.style.backgroundPosition = "-" + x * cx + "px -" + y * cy + "px";
        }
        function getCursorPos(e) {
          var a,
            x = 0,
            y = 0;
          e = e || window.event;
          /*obtenez les positions x et y de l’image:*/
          a = img.getBoundingClientRect();
          /*calculez les coordonnées x et y du curseur par rapport à l’image:*/
          x = e.pageX - a.left;
          y = e.pageY - a.top;
          /*considérez tout défilement de page:*/
          x = x - window.pageXOffset;
          y = y - window.pageYOffset;
          return { x: x, y: y };
        }
      }
    </script>
  </head>
  <body>
    <h1>Image Zoom</h1>
    <p>Souris sur l’image:</p>
    <div class="img-zoom-container">
      <img id="myimage" src="/uploads/media/default/0001/03/d670346cbbbda5cc6a629e275f87fd53d58ebc51.jpeg" width="300" height="240" />
      <div id="myresult" class="img-zoom-result"></div>
    </div>
    <script>
      // lancez l’effet de zoom:

imageZoom("myimage", "myresult");
    </script>
  </body>
</html>