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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueは製品の拡大鏡効果を実現します
  • Vue3 カプセル化された虫眼鏡コンポーネントのサンプルコード
  • Vue3は画像拡大鏡効果を実現します
  • Vueは商品詳細ページの虫眼鏡機能を実装します
  • Vueはシンプルな虫眼鏡効果を実装します
  • Vueは虫眼鏡付きの検索ボックスを実装します
  • Vue3.0 手書き拡大鏡効果
  • Vue が虫眼鏡効果を実装
  • 手書きのVue拡大鏡効果
  • Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します

<<:  DockerはRedisをインストールし、操作用のビジュアルクライアントを導入します

>>:  mysql 8.0.18 mgr のインストールと切り替え機能

推薦する

インタラクティブな視覚化 JS ライブラリ gojs の使い方の紹介とヒント

目次1. gojsの紹介2. Gojsのアプリケーションシナリオ3. gojs を選ぶ理由: 4. ...

iframe の src を about:blank に設定した後の詳細

iframe の src を 'about:blank' に設定した後、"...

MySQL5.7 並列レプリケーションの原理と実装

データ操作とメンテナンスに少しでも知識のある人なら、MySQL 5.5 以前では再生に単一の SQL...

MySQLトランザクションの特徴と分離レベルについてお話ししましょう

インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...

JavaScript Promise の徹底解説

目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...

Centos サーバーで nginx を設定する方法の例

セキュアターミナルMobaXterm_Personalをダウンロードまず、安全なターミナルをダウンロ...

フロントエンドの HTML 知識ポイントのまとめ (推奨)

1. HTMLの概要htyper テキスト マークアップ言語 ハイパーテキスト マークアップ言語ハ...

Vue でカスタムパスのエイリアスを設定する方法

Vue でカスタム パス エイリアスを設定する方法日常の開発では、モジュールやコンポーネントをインポ...

React+Antdはテーブルの追加、削除、変更の例を実装します

目次テーブル/index.jsテーブル/モデル/index.jsテーブル/モデル/モジュール/bas...

Ubuntuの基本設定: openssh-serverのインストールと使用

Ubuntu 17.10 での openssh-server のインストールと使用を記録します。イン...

vmware14Pro で Ubuntu システム インターフェイスが小さすぎる問題の解決方法の詳細な説明

1. 動作環境vmware14proウブントゥ 16.04LTS 2. 問題の説明vmware14P...

フォーム内のどの隠し属性をフォームとともに送信できるか

フォーム内の visibility=hidden および display=none のフォーム要素は...

Nginx転送マッチングルールの実装

1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...

アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...