Vueは製品の拡大鏡効果を実現します

この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内容は次のとおりです。

1. はじめに

ライブストリーミングやセルフサービスショッピングが盛んなこの電子商取引の時代に、私たちは商品に対する理解を深め、さらに詳細を確認しました。そして、商品を拡大できることを発見しました。そこで、フロントエンド技術のVueフレームワークを使用して、虫眼鏡に似た機能を作成しました。

2. 実装のアイデア

元画像（左）の表示スペースについては、画像行を保護するために、img を canvas に置き換えることができます。
マウスを動かすと拡大表示エリアが表示され（マウスレイヤーマスク上部）、表示レイヤーマスクエリアで拡大表示スペースが選択されます（右）

3. エフェクト表示

4. 具体的な実装ロジックコード

テンプレート（画像パスを変更することを忘れないでください）

<テンプレート>
  <div>
    <div class="left">
      <img class="leftImg" src="../../src/assets/curry.jpg" alt="" />
      <!-- マウスレイヤーカバー-->
      <div v-show="topShow" class="top" :style="topStyle"></div>
      <!-- 最上位レイヤーは透明なレイヤーで元の画像スペース全体を覆います -->
      <div
        クラス="maskTop"
        @mouseenter="enterHandler"
        @mousemove="moveHandler"
        @mouseout="outHandler"
      </div>
    </div>
    <div v-show="rShow" class="right">
      <画像
        :style="r_img"
        クラス="rightImg"
        src="../../src/assets/curry.jpg"
        代替案=""
      />
    </div>
  </div>
</テンプレート>

スタイル CSS

<スタイルスコープ>
/* 画像を拡大し、左上隅を (0,0) に配置します */
.rightImg{
  表示: インラインブロック;
  幅: 800ピクセル;
  高さ: 800ピクセル;
  位置: 絶対;
  上: 0;
  左: 0;
} /* 右側の画像ズームスペース */
。右 {
  左マージン: 412px;
  幅: 400ピクセル;
  高さ: 400px;
  境界線: 1px 実線の赤;
  位置: 相対的;
  オーバーフロー: 非表示;
} /* トップレベルのマスク */
.マスクトップ{
  幅: 400ピクセル;
  高さ: 400px;
  位置: 絶対;
  zインデックス: 1;
  上: 0;
  左: 0;
} /* レイヤーマスク、左上隅を (0,0) に配置します */
.トップ{
  幅: 200ピクセル;
  高さ: 200px;
  背景色: ライトコーラル;
  不透明度: 0.4;
  位置: 絶対;
  上: 0;
  左: 0;
} /* 元の画像の表示 */
.leftImg{
  幅: 400ピクセル;
  高さ: 400px;
  表示: インラインブロック;
} /* 元の画像のコンテナ */
。左 {
  幅: 400ピクセル;
  高さ: 400px;
  境界線: 1px 青緑色
  フロート: 左;
  位置: 相対的;
}
</スタイル>

スクリプトコアjs

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      トップスタイル: { 変換: "" },
      画像: {},
      トップ表示: false,
      r表示: false、
    };
  },
  メソッド: {
    // マウスが元の画像空間に入る function enterHandler() {
      // レイヤーマスクと拡大されたスペースの表示 this.topShow = true;
      this.rShow = true;
    },
    // マウス移動関数moveHandler(event) {
      // マウスの座標位置 let x = event.offsetX;
      y = event.offsetY とします。
      // レイヤーマスクの左上隅の座標位置と制限: 元の画像領域の左上隅を超えることはできません。let topX = x - 100 < 0 ? 0 : x - 100;
      topY = y - 100 < 0 ? 0 : y - 100 とします。
      // レイヤーマスクの位置を再度制限して、レイヤーマスクが元の画像領域内にのみ収まるようにします if (topX > 200) {
        上X = 200;
      }
      (topY > 200) の場合 {
        上Y = 200;
      }
      // 変換を通じて制御を移動します this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `translate(-${2 * topX}px、-${2 * topY}px)`;
    },
    // マウスアウト関数 outHandler() {
      //レイヤーカバーと拡大スペースの非表示を制御します this.topShow = false;
      this.rShow = false;
    },
  },
};
</スクリプト>