Vue画像拡大鏡コンポーネントのカプセル化と使用方法の詳細な説明

Vue画像拡大鏡コンポーネントのカプセル化と使用方法の詳細な説明

Vue画像拡大鏡コンポーネントパッケージに基づいて、参考までに具体的な内容は次のとおりです。

画像拡大鏡の実装プロセスは、小さな画像をボックス内に配置することです。マウスを小さな画像ボックス内を移動すると、移動ブロック(影領域/マスクレイヤー)が表示され、小さな画像ボックスの移動ブロック内の比例して拡大された画像コンテンツが右側の大きな画像ボックスに表示されます。効果図は以下のとおりです。

画像拡大鏡効果を実装するための Vue コンポーネント コードは次のとおりです。

<テンプレート>
  <div>
    <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)">
      <div id="small"> // 小さい画像とマスク レイヤー コンテナー<div id="float"></div> // マスク レイヤー<img :src="item" id="smallimg"> // 拡大する画像</div>
    </div>
    <div id="big">
      <img :src="item"> //拡大画像</div>
  </div>
</テンプレート>

<スクリプト>
  var float、smallimg、big、bigImg、small、float_maxJL_t、float_maxJL_l、bigImg_maxJL_t、bigImg_maxJL_l;

  エクスポートデフォルト{
    小道具: {
      アイテム:
        タイプ: 文字列
      }
    },
    データ() {
     戻る {
     }
    }, 

    マウントされた(){
      float = document.getElementById("float"); // 左のマスク レイヤー smallimg = document.getElementById("smallimg"); // 左側の小さい画像 big = document.getElementById("big"); // 右側の表示領域 bigImg = big.getElementsByTagName("img")[0]; // 右側の大きい画像 small = document.getElementById("small");// 左側のコンテナー // 右側の表示領域の幅と高さを取得します var bigW = big.clientWidth;
      var bigH = big.clientHeight;

      //右側の大きな画像の幅と高さ var bigImgW = bigImg.offsetWidth;
      var bigImgH = bigImg.offsetHeight;

      // 左側の小さい画像の幅と高さ var smallImgW = smallimg.offsetWidth;
      var smallImgH = smallimg.offsetHeight;

      //左マスクレイヤーの幅と高さ float.style.width = bigW/bigImgW * smallImgW + "px"; //175
      float.style.height = bigH/bigImgH * smallImgH/3*2 + "px";     

      //マスクレイヤーの最大移動距離 float_maxJL_l = small.clientWidth -float.offsetWidth-10;
      float_maxJL_t = small.clientHeight - float.offsetHeight - 5;

      // 右の画像が移動する最大距離 bigImg_maxJL_l = bigImg.clientWidth - big.offsetWidth;
      bigImg_maxJL_t = bigImg.clientHeight - big.offsetHeight;

      big.style.display = "なし";
      float.style.visibility = "hidden"; //マウスが左側の領域に移動していないため、マスクレイヤーと右側の大きな画像は表示されません},

    メソッド: {
    //マウスを左側の領域に移動して、マスクレイヤーと右側の大きな画像を表示します: function () {
        float.style.visibility = "表示可能";
        big.style.visibility = "表示可能";
        big.style.display = "ブロック";
      }, 

      //マウスを左側の領域から移動して、マスクレイヤーと右側の大きな画像を非表示にします。out: function () {
        float.style.visibility = "非表示";
        big.style.display = "なし";
      }, 

      //マウスが動くと、マスクレイヤーもマウスの動きに合わせて動きます: function (ev) {
        var l = ev.clientX - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY - small.offsetTop - float.offsetHeight/2;

        if( l < 0 ) l = 0; // 左の境界を超えると値は0に設定されます
        if( t < 0 ) t = 0; // 値が上限を超えているため0に設定されます

        if( l > float_maxJL_l ) l = float_maxJL_l; // コンテナー内の移動範囲を制限します if( t > float_maxJL_t ) t = float_maxJL_t;

        //比率を見つける var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

         //マスクレイヤーの移動位置 float.style.left = l + "px";
        float.style.top = t + "px"; 

         //右側の大きな画像の移動位置 bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
      },
    },
  }
</スクリプト>

//css スタイル <style lang="scss" rel="stylesheet/scss" scoped>
  @import 'src/assets/scss/variable.scss';
  #フロート{
    幅: 120ピクセル;
    高さ: 120px;
    position: absolute; //必須背景: $primary;
    境界線: 1px 実線 #ccc;
    不透明度: 0.5;
    カーソル:移動;
  }
  #大きい {
    position: absolute; //必須 top: 260px;
    左:37.6%
    幅: 350ピクセル;
    高さ: 500px;
    オーバーフロー: 非表示;
    境界線: 1px 実線 #ccc;
    背景: #ffffff;
    zインデックス: 1;
    可視性: 非表示;
  }
  #小さい {
    position: relative; //必須 z-index: 1;
    画像{
      幅:340ピクセル;
      高さ:320px;
    }
  }
  #大きな画像{
    position: absolute; //必須 z-index: 5;
    幅:700ピクセル;
    高さ:700ピクセル;
  }
</スタイル>

CSSでは、各画像とマスクレイヤーの位置の設定に注意する必要があります。

マスクレイヤー分析:

左マスクレイヤーの幅(高さ)=右表示領域の幅(高さ)/右の大きな画像の幅(高さ)×左の小さな画像の幅(高さ)
(マスク レイヤーは、右側の大きな画像ボックスをシミュレートするものと理解できます。右側の大きな画像ボックスに大きな画像を配置し、一定の比率に従ってフローティング領域を取得します。同時に、ボックスがオーバーフローして非表示になるように設定します。右側の大きな画像と右側のコンテナーの表示比率は、左側のマスク レイヤーと左側のコンテナーの比率に対応します。)
マスク レイヤーが移動する距離 = 左のコンテナーの幅 (高さ) - マスク レイヤーの幅 (高さ) (常に左のコンテナー内で移動します)
マウスが左側の小さな画像ボックスに移動すると、マウスが常にマスク レイヤー内にあり、マスク レイヤーがマウスの動きに合わせて移動するようにする必要があります (つまり、マスク レイヤーの位置はマウスが移動するときの座標と密接に関連しており、左側のコンテナーからオーバーフローすることはできません。計算方法についてはコードを参照してください)。

注:ここには隠れたバグがあります。つまり、インターフェースをスクロールしても、マスク レイヤーはインターフェースのスクロールに合わせて移動しません。インターフェースを下にスクロールすると、マウスは左のコンテナーにありますが、マスク レイヤー領域にはなくなり、マスク レイヤーを移動できなくなります。解決策は次のとおりです。

移動 = 関数 (ev){
        var scroll = this.getClientHeight(); //現在のインターフェースの移動位置を取得します。 var l = ev.clientX - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY - small.offsetTop - float.offsetHeight/2;

        t=t+scroll; //マスク レイヤーの高さは、それに応じてインターフェイスのスクロール高さに追加される必要があります if( l < 0 ) l = 0;
        t < 0 の場合、t = 0; 

        l が float_maxJL_l より大きい場合、 l は float_maxJL_l となります。
        t が float_maxJL_t より大きい場合、 t は float_maxJL_t となります。

        var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

        float.style.left = l + "px";
        float.style.top = t + "px";

        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
},
//インターフェースのスクロール高さを取得するメソッド getClientHeight: function(){
    var スクロールトップ = 0;
    document.documentElement&&document.documentElement.scrollTop の場合
    {
      scrollTop = document.documentElement.scrollTop;
    }
    そうでない場合(document.body)
    {
      スクロールトップ = document.body.scrollTop;
    }
    scrollTop を返します。
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3 カプセル化された虫眼鏡コンポーネントのサンプルコード
  • Vue3 を使用して虫眼鏡効果を実現する方法の例
  • Vue3は画像拡大鏡効果を実現します
  • Vueは商品詳細ページの虫眼鏡機能を実装します
  • Vueはタブ切り替えの虫眼鏡効果を実装します
  • Vueはシンプルな虫眼鏡効果を実装します
  • Vueは虫眼鏡付きの検索ボックスを実装します
  • Vue3.0 は虫眼鏡効果のケーススタディを実装します
  • Vue3.0 手書き拡大鏡効果
  • Vue が虫眼鏡効果を実装
  • Vueベースの製品メイン画像拡大鏡ソリューションの詳細な説明
  • 手書きのVue拡大鏡効果
  • vue2.x ベースの電子商取引画像拡大プラグインの使用
  • Vueは製品の拡大鏡効果を実現します

<<:  MySQL マルチテーブルクエリ例の詳しい解説 [リンククエリ、サブクエリなど]

>>:  Alibaba Cloud ESC に MYSQL8.0 をインストールするチュートリアル

推薦する

オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...

MySQL 最適化 query_cache_limit パラメータの説明

クエリキャッシュ制限query_cache_limit は、単一のクエリで使用できるバッファ サイズ...

Linux での vi (vim) の新しい使い方のまとめ

私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...

CSS スタイルを変更してグレーの Web ページ (色なし、明るい白黒のみ) を実現するいくつかの方法

通常、清明節、国哀悼日、大地震の日、影響力のある偉人の死去または命日には、ウェブマスターとして、故人...

docker ポートを追加して dockerfile を取得する方法

DockerイメージからDockerfileを取得する docker 履歴 --format {{....

Vue+elementUI コンポーネントは、折りたたみ可能な動的レンダリングのマルチレベル サイドバー ナビゲーションを再帰的に実装します。

かなり前に実装された機能ですが、クリックすると選択したメニュー項目の背景色が白くなることに気付きまし...

MacOS に MySQL 8.0 をインストールして MySQL にログインする方法

公式チュートリアルに従って、インストール パッケージをダウンロードし、[インストール] をクリックし...

MySQL の列から行への変換、フィールドの結合方法 (必読)

データシート:列から行へ: max(case when then) を使用max---集計関数は最大...

ReactはExcelファイルのインポートとエクスポートを実装します

目次プレゼンテーション層ビジネスレイヤーコアプラグイン xlsx ExcelインポートExcelエク...

純粋なCSSで立体的な画像配置効果を実現するサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...

スワイパープラグインを使用して Vue でカルーセルを実装する例

目次vue - スワイパープラグインを使用してカルーセルを実装するカルーセルのバグを解決するには、w...

速度、読み込み、Web アプリケーションなどにおける div と table の違い。

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

MySQL slow_log テーブルを InnoDB エンジンに変更することはできません。詳細な説明

背景mysql.slow_log からスロー クエリ ログを取得するのは遅く、テーブルは csv テ...

CSS を使用して適応型の幅と高さを持つ 16:9 の長方形を実装する例

先ほど、適応幅と高さが1:1の正方形を作成する方法について説明しました。 https://www.j...

JavaScriptの記事では、Webフォームの操作方法を説明します。

1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...