Vueはタブ切り替えの虫眼鏡効果を実装します

この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

では早速レンダリングを見てみましょう

1. ここではマスクレイヤーを追加していません。必要に応じて追加してください。

2. 4K高解像度の画像を使用することをお勧めします。そうしないと、拡大後に画像がぼやけて、視聴の雰囲気に影響を与えます。

3. スタイルにこだわりすぎず、実装の原則に焦点を当てる

4. 私のやり方は単純ではないかも知れませんが、これも一つの考え方です。参考にして下さい。

実施原則

まず、vue.jsが絶対に必要です

2番目は2枚の写真が必要です

左側が現実の写真、右側が拡大効果の写真です。実はずっと存在していたのですが、マウスを現実の中に移動させるだけで、マウスが現実から外に出ると消えてしまいます。

拡大した画像は本当に拡大したわけではなく、imgタグに親要素を追加し、imgタグの幅と高さを100％以上に設定しています。拡大量を好きなように設定し、制限を超えたら親要素を非表示にするように設定し、次にdisplay:noneで要素を非表示にして、マウスが左側の大きな画像に移動したときに表示されるように設定しています。

マウスの動きに合わせて拡大画像も移動させるには、要素上のマウスの位置を取得し、マウス移動イベントでトリガーし、拡大画像の相対的な位置を設定してから、マウスの X 軸の位置と Y 軸の位置をそれぞれ大きな画像の左側と上側に割り当てる必要があります。

-----------------------------------ユニバーサル分割線----------------------------------------

簡単に言うと、拡大された画像はすでに存在していますが、非表示に設定されています。マウスが移動した後、拡大された画像が表示され、その後、マウスの位置が取得され、拡大された画像の相対的な位置の値に割り当てられます。これが虫眼鏡の実装原理です。

タブの切り替えが簡単になりました

vue の v-show を使用して、data に配列を作成し、配列に画像アドレスを保存する必要があります。v-for を使用して、画像アドレスを img タグまでトラバースします。data に nowindex を作成し、画像インデックスを nowindex に割り当てます。v-show="nowindex == index" を使用して、画像の表示と非表示を制御します。

コードはこちら

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <script src="./vue/vue.js"></script>
    <スタイル>
        体 {
            マージン: 0;
            パディング: 0;
            背景色: #ccc;
        }
        
        ＃アプリ {
            高さ: 245px;
            幅: 556ピクセル;
            /* 境界線: 3px 実線; */
            位置: 相対的;
            マージン: 200px 自動;
            ボックスのサイズ: 境界線ボックス;
        }
        
        。コンテンツ {
            高さ: 150px;
            幅: 250ピクセル;
            border-bottom: 5px 白の実線;
        }
        
        .imgs {
            高さ: 90px;
            幅: 248ピクセル;
            ボックスのサイズ: 境界線ボックス;
            ディスプレイ: フレックス;
            コンテンツの両端揃え: スペースの間;
        }
        
        .画像 {
            高さ: 99%;
            幅: 49.6%;
        }
        
        .content>画像{
            高さ: 100%;
            幅: 100%;
        }
        
        。アクティブ {
            ボックスの影: 0px 8px 8px 黒;
            不透明度: 0.7;
        }
        
        .fdj {
            表示: なし;
        }
        
        。ブロック {
            高さ: 240px;
            幅: 300ピクセル;
            位置: 絶対;
            上: 0px;
            右: -10px;
            オーバーフロー: 非表示;
            zインデックス: 100;
            境界線の半径: 8px;
        }
        
        .block>画像{
            高さ: 600%;
            幅: 600%;
            位置: 相対的;
        }
    </スタイル>
</head>

<本文>
    <div id="アプリ">
        <div class="content" @mouseover="over" @mouseout="out" @mousemove='move($event)'>
            <img :src=item v-for="(item,index) url 内" v-show='index == nowindex'>
        </div>
        <div class="imgs">
            <img :src=item v-for="(item,index) url内" class="imger" @click="change(index)" :class="{active:index == nowindex}">
        </div>
        <div :class="blocks">
            <img :src=item v-for="(item,index) url 内" v-show='index == nowindex' :style='positions'>
        </div>
    </div>
    <スクリプト>
        var vm = 新しい Vue({
            el: "#app",
            データ： {
                //画像アドレス url: ['./img/11.jpg', "./img/9.jpg"],
                現在のインデックス: 0,
                ブロック: "fdj",
                //相対位置の値の位置: {
                    上: 0,
                    残り: 0
                }
            },
            メソッド: {
                変更(インデックス) {
                    //画像を切り替える this.nowindex = index;
                },
                以上（） {
                    //クラス名を変更して表示と非表示を切り替える this.blocks = "block"
                },

                外（） {
                    this.blocks = "fdj"
                },
                移動する{
                    // マウスの移動位置を画像の相対位置値に割り当てて、マウスが移動したときの画像の移動を実現します。this.positions.top = (e.offsetY * -7.9) + "px";
                    this.positions.left = (e.offsetX * -6) + "px";
                }
            },

        })
    </スクリプト>
</本文>

</html>

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

以下もご興味があるかもしれません: