Of Stack

JavaScript imitation JD.COM magnifying glass special effects

  • 2021-12-04 09:11:19
  • OfStack

In this paper, we share the specific code of JavaScript imitation JD.COM magnifying glass for your reference. The specific contents are as follows

Functional requirements:

1. It is divided into three modules
2. The mouse passes through the small picture box, the yellow shade layer and the large picture box, and leaves the function of hiding the two boxes
3. The yellow shielding layer follows the mouse movement
4. Move the yellow shielding layer, and the big picture will follow

Moving distance of large picture = (moving distance of occlusion layer * maximum moving distance of large picture)/maximum moving distance of occlusion layer 


<style>
      body,
      div {
        margin: 0;
        padding: 0;
      }
      .product {
        position: relative;
        width: 400px;
        height: 400px;
        margin: 50px 0 0 20px;
        border: 1px solid #000;
      }
      .preview_img img {
        width: 300px;
        height: 300px;
        margin: 50px 50px;
      }
      .mask {
        position: absolute;
        display: none;
        top: 20px;
        left: 30px;
        width: 80px;
        height: 80px;
        background-color: yellow;
        opacity: 0.5;
        cursor: move;
      }
      .big {
        position: absolute;
        display: none;
        left: 410px;
        top: 0;
        width: 500px;
        height: 500px;
        z-index: 999;
        overflow: hidden;
      }
      .big img {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
      }
    </style>
    <!--  Introduce js Documents  -->
    <script src="detail.js"></script>
  </head>
  <body>
    <div class="product">
      <div class="preview_img">
        <img src="images/xs.jpg" alt="" />
        <div class="mask"></div>
        <div class="big">
          <img src="images/xs.jpg" alt="" class="bigImg" />
        </div>
      </div>
    </div>
</body>

JS page 


// Page preloading 
window.addEventListener("load", function () {
  var preview_img = document.querySelector(".preview_img");
  var mask = document.querySelector(".mask");
  var big = document.querySelector(".big");

  //1. Mouse passing  preview_img  Shows and hides  mask  Shielding layer   And  big  Big box 
  preview_img.addEventListener("mouseover", function () {
    mask.style.display = "block";
    big.style.display = "block";
  });
  preview_img.addEventListener("mouseout", function () {
    mask.style.display = "none";
    big.style.display = "none";
  });
  // It is not appropriate to give the mouse coordinates to the occlusion layer, because the occlusion layer coordinates are based on the parent box 
  preview_img.addEventListener("mousemove", function (e) {
    // ( 1 ) Calculate the coordinates of the mouse in the box first 
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    // ( 2 ) minus the height and width of the box 1 Half 
    // ( 3 ) mask  Distance of movement 
    var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;
    //(4) If the coordinates are less than 0  Just let him stop at  0  Location of ( That is, it stops when it goes beyond the box range )
    var egdeX = preview_img.offsetWidth - mask.offsetWidth;
    var egdeY = preview_img.offsetHeight - mask.offsetHeight;
    if (maskX <= 0) {
      maskX = 0;
    } else if (maskX >= egdeX) {
      maskX = egdeX;
    }
    if (maskY <= 0) {
      maskY = 0;
    } else if (maskY >= egdeY) {
      maskY = egdeY;
    }
    mask.style.left = maskX + "px";
    mask.style.top = maskY + "px";
    // Moving distance of large picture  =  Shielding layer moving distance * Maximum moving distance of large picture  /  Maximum moving distance of shielding layer 
    var bigImg = document.querySelector(".bigImg");
    // Maximum moving distance of large picture 
    var bigMax = bigImg.offsetWidth - big.offsetWidth;
    // Moving distance of large picture  x y
    var bigX = (maskX * bigMax) / egdeX;
    var bigY = (maskY * bigMax) / egdeY;
    bigImg.style.left = -bigX + "px";
    bigImg.style.top = -bigY + "px";
  });
});
Related articles: