JavaScript が Jingdong の虫眼鏡の特殊効果を模倣

<スタイル>
      体、
      div {
        マージン: 0;
        パディング: 0;
      }
      。製品 {
        位置: 相対的;
        幅: 400ピクセル;
        高さ: 400px;
        マージン: 50px 0 0 20px;
        境界線: 1px実線 #000;
      }
      .preview_img 画像 {
        幅: 300ピクセル;
        高さ: 300px;
        マージン: 50px 50px;
      }
      。マスク {
        位置: 絶対;
        表示: なし;
        上: 20px;
        左: 30px;
        幅: 80ピクセル;
        高さ: 80px;
        背景色: 黄色;
        不透明度: 0.5;
        カーソル: 移動;
      }
      。大きい {
        位置: 絶対;
        表示: なし;
        左: 410px;
        上: 0;
        幅: 500ピクセル;
        高さ: 500px;
        zインデックス: 999;
        オーバーフロー: 非表示;
      }
      .bigimg{
        位置: 絶対;
        上: 0;
        左: 0;
        幅: 400ピクセル;
        高さ: 400px;
      }
    </スタイル>
    <!-- js ファイルをインポート-->
    <script src="detail.js"></script>
  </head>
  <本文>
    <div class="製品">
      <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>
</本文>

//ページのプリロード window.addEventListener("load", function () {
  var preview_img = document.querySelector(".preview_img");
  var マスク = document.querySelector(".mask");
  var big = document.querySelector(".big");

  //1. マウスがpreview_imgの上を通過すると、マスクオクルージョンレイヤーと大きなボックスが表示され、非表示になります。preview_img.addEventListener("mouseover", function () {
    mask.style.display = "ブロック";
    big.style.display = "ブロック";
  });
  preview_img.addEventListener("mouseout", 関数() {
    mask.style.display = "なし";
    big.style.display = "なし";
  });
  //オクルージョン レイヤーの座標は親ボックスに基づいているため、マウスの座標をオクルージョン レイヤーに渡すのは不適切です preview_img.addEventListener("mousemove", function (e) {
    //(1) まずボックス内のマウスの座標を計算します。var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    //(2) ボックスの高さと幅の半分を減算します //(3) マスクが移動する距離 var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;
    //(4) 座標が0未満の場合、位置0で停止します（つまり、ボックスの範囲を超えたら停止します）
    var egdeX = preview_img.offsetWidth - mask.offsetWidth;
    var egdeY = preview_img.offsetHeight - mask.offsetHeight;
    マスクX <= 0の場合{
      マスクX = 0;
    } そうでなければ (maskX >= egdeX) {
      マスクX = egdeX;
    }
    マスクY <= 0の場合{
      マスクY = 0;
    } そうでなければ (maskY >= egdeY) {
      マスクY = egdeY;
    }
    mask.style.left = maskX + "px";
    mask.style.top = maskY + "px";
    // 全体像の移動距離 = 遮蔽層の移動距離 * 全体像の最大移動距離 / 遮蔽層の最大移動距離 var bigImg = document.querySelector(".bigImg");
    // 大きな画像の最大移動距離 var bigMax = bigImg.offsetWidth - big.offsetWidth;
    //大きな画像の移動距離xy
    var bigX = (maskX * bigMax) / egdeX;
    var bigY = (maskY * bigMax) / egdeY;
    bigImg.style.left = -bigX + "px";
    bigImg.style.top = -bigY + "px";
  });
});