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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL マルチテーブルクエリ例の詳しい解説 [リンククエリ、サブクエリなど]
>>: Alibaba Cloud ESC に MYSQL8.0 をインストールするチュートリアル
この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...
上はシステム時間、下はハードウェア時間です。ここでは変更を加えているので、同じくらいの速さになってい...
pre 要素は、フォーマット済みのテキストを定義します。 pre 要素で囲まれたテキストでは、通常、...
目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...
最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...
目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...
Linux に MySQL をインストールするには、yum インストールとソース コード コンパイ...
インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...
1. 仮想マシン(物理マシン)をインストールする仮想マシンまたは物理マシンにインストールできます。 ...
1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...
以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
導入: MySQL データベースの仕様に関しては、皆さんも何らかのドキュメントを読んだことがあると思...
目次1. 実施の背景2. 実装のアイデア3. 実施プロセス1. 実施の背景先週、ユーザーがタスクを完...
シナリオ 1: HTML: <div class="outer"> ...