シンプルな虫眼鏡効果を実現するJavaScript

シンプルな虫眼鏡効果を実現するJavaScript

大きな箱の中に写真があります。マウスをその上に置くと、半透明のマスク レイヤーが表示されます。マウスを動かすと、マスク レイヤーも一緒に移動します。箱の横には拡大写真もあります。拡大写真の位置は、マスク レイヤーの位置によって変わります。マウスを大きな箱から離すと、マスク レイヤーと拡大写真が消えます。

実装のアイデア

1. HTMLとCSSでボックス、マスクレイヤー、拡大画像ページを編集し、マスクレイヤーと拡大画像をデフォルトで非表示に設定します。
2. 要素オブジェクトを取得し、マウスイベント mouseover を大きなボックスにバインドし、マウスが通過したときにマスクレイヤーと拡大画像を表示するように設定します。表示を「ブロック」に設定します。
マウスアウト - - -mouseout、マウスが通過したときにマスクレイヤーと拡大画像の表示を設定します。表示は「なし」に設定されています
3. 大きなボックス内のマウスの位置を計算する
4. マウスをマスク レイヤーの中央に置きます。マウスの位置を基準にマスク レイヤーを上方向と左方向に半分の距離だけ移動します。マスク レイヤーの位置 - ボックスを基準に上方向と左方向のオフセットを割り当てて絶対位置を指定します。
5. 大きなボックスでマスクレイヤーの動きを制限する - - - オフセットの値を決定します。<= 0の場合、オフセットは0です。
6. マスクレイヤーが移動すると、拡大画像の位置が変わります。マスクレイヤー移動値 / マスクレイヤー最大移動距離 = 拡大画像移動距離 / 拡大画像最大移動距離。この関係に従って、拡大画像の移動距離が求められます。移動距離は、拡大画像のオフセット上と左に割り当てられます。

注意:拡大画像のオフセットには、マスク レイヤーの移動方向と反対の負の値が与えられます。

コードサンプル

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

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>携帯電話の詳細ページ</title>
    <!-- <link rel="スタイルシート" href="css/detail.css" >
    <script src="js/detail.js"></script> -->
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        
        .詳細コンテンツ{
            幅: 1200ピクセル;
            マージン: 0 自動;
        }
        
        画像 {
            境界線: 0;
            垂直位置合わせ: 中央;
        }
        
        .preview_img {
            位置: 相対的;
            幅: 400ピクセル;
            高さ: 400px;
            上マージン: 30px;
            境界線: 1px 実線 #ccc;
        }
        
        .preview_img 画像 {
            幅: 100%;
            高さ: 100%;
        }
        
        。マスク {
            表示: なし;
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 300ピクセル;
            高さ: 300px;
            背景色: ピンク;
            不透明度: .5;
            カーソル: 移動;
        }
        
        。大きい {
            表示: なし;
            位置: 絶対;
            上: 0;
            左: 410px;
            幅: 500ピクセル;
            高さ: 500px;
            境界線: 1px 実線 #ccc;
            背景色: ピンク;
            zインデックス: 999;
            オーバーフロー: 非表示;
        }
        
        .bigimg{
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 800ピクセル;
            高さ: 800ピクセル;
        }
    </スタイル>
</head>

<本文>
    <div class="detail-content">
        <div class="preview_img">
            <img src="upload/s3.png" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="upload/big.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>

    <スクリプト>
        var previewImg = document.querySelector('.preview_img');
        var マスク = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var bigImg = document.querySelector('.bigImg');

        // マウスオーバーボックスイベント previewImg.addEventListener('mouseover', function() {
            // オクルージョン レイヤーと拡大画像の表示を設定します。mask.style.display = 'block';
            big.style.display = 'ブロック';
        })

        // マウスがボックスを離れるイベント previewImg.addEventListener('mouseout', function() {
            // オクルージョンレイヤーと拡大画像を非表示に設定します。mask.style.display = 'none';
            big.style.display = 'なし';
        })

        // マウスがボックス内を移動する previewImg.addEventListener('mousemove', function(e) {
            // ボックス内のマウスの位置を取得します。var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;

            // オクルージョン レイヤーの移動値を計算し、マウスをオクルージョン レイヤーの中央に配置します。var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;

            // ボックスは正方形なので、水平方向の X 軸の最大移動値のみが計算されます。Y 軸の最大移動値は X 軸と一致します。var maskMax = previewImg.offsetWidth - mask.offsetWidth;

            // オクルージョンレイヤーがボックス内で移動できるように制限する if (maskX <= 0) {
                マスクX = 0;
            } そうでなければ (maskX >= maskMax) {
                マスクX = マスクMax;
            }

            マスクY <= 0の場合{
                マスクY = 0;
            } そうでなければ (maskY >= maskMax) {
                マスクY = マスクMax;
            }

            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

            // 拡大画像の最大移動値を計算します。大きな画像の水平移動値 = オクルージョン レイヤーの移動値 * 大きな画像の最大移動距離 / オクルージョン レイヤーの最大移動距離 var bigMax = bigImg.offsetWidth - big.offsetWidth;

            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;

            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';

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

</html>

ページ効果:

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

以下もご興味があるかもしれません:
  • 画像拡大鏡効果のJSバージョン
  • jsを使用してシンプルな虫眼鏡効果を実現します
  • jsはショッピングサイトの虫眼鏡機能を実現します
  • js を使ってシンプルな虫眼鏡効果を実現
  • js 虫眼鏡拡大画像効果
  • 虫眼鏡の効果を実現するために js を使用する簡単な例
  • JavaScript 画像拡大鏡効果コード [コードは比較的シンプルです]
  • 魔法のJavascript画像拡大鏡
  • JavaScript 画像拡大鏡(ドラッグ アンド ドロップ、ズーム効果)
  • ネイティブ js で記述された虫眼鏡効果

<<:  MySql インデックス使用戦略の分析

>>:  Dockerコンテナオーケストレーション実装プロセス分析

推薦する

Docker ビルド PHP 環境チュートリアル詳細説明

Dockerのインストール公式インストールスクリプトを使用して最新バージョンのDockerをインスト...

MySQLの浅いエントリと深いエグジットの原則についての簡単な説明

目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....

ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...

ドロップダウンメニューとスライドメニューのデザイン例

ドロップダウン メニューやスライド メニューを使用している Web サイトをたくさん見つけたので、私...

MySQL データベースで UTF-8 エンコードを設定する方法

/etc/my.cnf または /etc/mysql/my.cnf ファイルを変更する [クライアン...

CentOS7 システムでスワップを増やす方法の例

序文スワップは、ディスク上にある「仮想メモリ」の一部である特殊なファイル (またはパーティション) ...

Apache、Tomcat、Nginx サーバーの詳細な理解と比較分析

質問1件会社のサーバーはApacheを使用しており、バックエンドはPHP、サーバーはLinux C/...

Redission-tomcatは、単一マシンから複数マシンへの展開を迅速に実装します。

序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...

MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...

nginx ロードバランシングを介して https にリダイレクトする方法

ウェブ上で証明書とキーをコピーするscp -rp -P52113 /application/ngin...

jar パッケージを Docker コンテナに変換する方法

jar パッケージを Docker コンテナに変換する方法1.まずJavaイメージをダウンロードする...

dockerコンテナにvimをインストールするソリューション

目次物語の始まりvimをインストールし、hadoop-hive.envを編集します。不注意で回避しま...

Javascriptの基本ループの詳しい説明

目次サイクルのために入室のためのその間しながら行うループから抜け出す要約するサイクルのためにループは...

React NativeとiOSの相互作用の詳細な説明

目次前提条件RNはiOSに価値を渡す方法1: ネイティブに値を通常通り渡す方法2: コールバック関数...

mysql 5.7.20 win64 のインストールと設定方法

mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...