虫眼鏡の詳細のJavaScript実装

 <div class="wrap">
    <!-- サムネイルとマスク -->
    <div id="small">
      <img src="img/1.jpg" alt="" >
      <div id="マーク"></div>
    </div>
    <!-- 同じスケールで拡大した画像 -->
    <div id="big">
      <img src="img/2.jpg" alt="" id="bigimg">
    </div>
  </div>

 * {
      マージン: 0;
      パディング: 0;
    }
    。包む {
      幅: 1500ピクセル;
      マージン: 100px 自動;
    }

    ＃小さい {
      幅: 432ピクセル;
      高さ: 768ピクセル;
      フロート: 左;
      位置: 相対的;
    }

    ＃大きい {
      /* 背景色: シーグリーン; */
      幅: 768ピクセル;
      高さ: 768ピクセル;
      フロート: 左;
      /* ファインダーの向こう側は隠れています */
      オーバーフロー: 非表示;
      左マージン: 20px;
      位置: 相対的;
      表示: なし;
    }

    #大きな{
      /* 幅: 864px; */
      位置: 絶対;
      左: 0;
      上: 0;
    }

    ＃マーク {
      幅: 220ピクセル;
      高さ: 220px;
      背景色: #fff;
      不透明度: .5;
      位置: 絶対;
      左: 0;
      上: 0;
      /* マウス矢印スタイル*/
      カーソル: 移動;
      表示: なし;
    }

// 小さい画像とマスク、大きい画像、大きいボックスを取得します。var small = document.getElementById("small")
    var マーク = document.getElementById("マーク")
    var big = document.getElementById("big")
    var bigimg = document.getElementById("bigimg")
    // 小さな画像領域でマウスの動きのイベントを取得します。マスクはマウスの動きに従います。small.onmousemove = function (e) {
      // サムネイルに対するマスクのオフセットを取得します (マウス座標 - 本体に対するサムネイルのオフセット - マスクの幅または高さの半分)
      var s_left = e.pageX - mark.offsetWidth / 2 - small.offsetLeft
      var s_top = e.pageY - mark.offsetHeight / 2 - small.offsetTop
      // マスクはサムネイル内でのみ移動できるため、マスクオフセットのしきい値（サムネイル値に対する相対値）を計算する必要があります。
      var max_left = small.offsetWidth - mark.offsetWidth;
      var max_top = small.offsetHeight - mark.offsetHeight;
      // マスクが移動すると、右側の大きな画像も移動します (マスクが 1 ピクセル移動するごとに、画像は反対方向に n 倍の距離移動する必要があります)
      var n = big.offsetWidth / mark.offsetWidth
      // マスクがマウスの動きに追従する前に判断します。サムネイルに対するマスクのオフセットは範囲を超えることはできず、範囲を超えた場合は再割り当てする必要があります (重要な値は上記で計算されています: max_left と max_top)
      // 水平境界を決定する if (s_left < 0) {
        s_左 = 0
      } そうでない場合 (s_left > max_left) {
        s_left = 最大_left
      }
      //垂直境界を判断する if (s_top < 0) {
        s_トップ = 0
      } そうでない場合 (s_top > max_top) {
        s_top = 最大トップ
      }
      // マスクの左と上に値を割り当てます（動的？e.pageXとe.pageYは量が変わるので）、移動します！
      mark.style.left = s_left + "px";
      mark.style.top = s_top + "px";
      // 大きな画像が移動する距離を計算します var levelx = -n * s_left;
      var verticaly = -n * s_top;
      // 画像を移動します bigimg.style.left = levelx + "px";
      bigimg.style.top = verticaly + "px";
    }
    // マスクとフォローアップスタイルは、マウスが小さい画像内に移動したときにのみ表示され、マウスが小さい画像から移動すると消えます。small.onmouseenter = function () {
      mark.style.display = "ブロック"
      big.style.display="ブロック"
    }
    small.onmouseleave = 関数（）{
      mark.style.display = "なし"
      big.style.display="なし"
    }