jsはショッピングウェブサイトの商品の拡大鏡効果を実現します

jsはショッピングウェブサイトの商品の拡大鏡効果を実現します

この記事では、ショッピングサイトの商品の拡大鏡効果を実現するためのjsの具体的なコードを紹介します。具体的な内容は次のとおりです。

まず、Tmall のある商品の拡大鏡効果を例に、原理を説明します。

いわゆる虫眼鏡効果は、実際には私たちの目を欺く効果です。ここで、画像の下の小さな画像の列は、実際にはカバー レイヤーの画像や拡大レイヤーの画像と同じですが、解像度が異なっていることがわかります。したがって、虫眼鏡効果を実現するには、解像度は異なるが同じ内容の画像のグループがいくつか必要です。

明らかに、小さい画像は画像名に「小さい」が付いた小さい画像であり、カバー レイヤーは通常サイズの画像であり、拡大レイヤーは「大きい」が付いた拡大画像です。次に、適切な変位効果と表示効果を追加することで、私たちが目にする虫眼鏡効果を実現できます。コードで実装してみましょう。

まず HTML 構造を記述します。

<div id="ボックス">
    <div class="show">
        <img src="./images/1.jpg" alt="#">
        <div class="ドラッグ"></div>
    </div>
    <div class="拡大"></div>
    <ul>
        <li class="active"><img src="./images/1.small.jpg" alt="#"></li>
        <li><img src="./images/2.small.jpg" alt="#"></li>
    </ul>
</div>

<script type="text/javascript" src="./javascript/mgfyGlass.js"></script>

<スクリプト>
    oBox = document.querySelector('#box');
    
    定数imgArr = [
        {小さい: '1.small.jpg'、通常: '1.jpg'、大きい: '1.big.jpg'},
        {小さい: '2.small.jpg'、通常: '2.jpg'、大きい: '2.big.jpg'}
    ];
</スクリプト>

次に、CSS スタイルを追加します。

本文、div、ul、li{
    マージン: 0; パディング: 0;
    リストスタイル: なし;
    フォントサイズ: 0;
}
画像{
    表示: ブロック;
}
#箱{
    幅: 650ピクセル;
    位置: 相対的;
    マージン: 0 自動 0 240px;
}
#ボックス .show{
    幅: 600ピクセル;
    境界線: 実線 2px ホットピンク;
    位置: 相対的;
}
#ボックス .show img{
    幅: 100%;
}
#ボックス .show .drag{
    位置: 絶対;
    幅: 200ピクセル;
    高さ: 200px;
    背景色: #e0a8d7;
    不透明度: .4;
    左: 0;
    上: 0;
    表示: なし;
}
#ボックス .magnify{
    幅: 800ピクセル;
    高さ: 800ピクセル;
    境界線: 実線 2px #7d777b;
    位置: 絶対;
    左: 100%;
    上: 0;
    背景: url("../images/1.big.jpg") 繰り返しなし 0 0 / 2400px;
    表示: なし;
}
#ボックス ul{
    幅: 100%;
    高さ: 150px;
    上マージン: 20px;
}
#ボックス ul::after{
    コンテンツ: '';
    表示: ブロック;
    クリア: 両方;
}
#ボックス ul li{
    高さ: 100%;
    フロート: 左;
    マージン: 0 8px;
    境界線: 実線 2px #fff;
}
#ボックスulli.active{
    境界線の色: ホットピンク;
}
#ボックス ul li img{
    高さ: 100%;
}

CSS スタイルを設定する際に注意すべき点は次のとおりです。

拡大レイヤーはマスク レイヤーに比例して拡大されるため、拡大レイヤーの幅と高さとマスク レイヤーの幅と高さの比率、および拡大レイヤーの背景画像のサイズと通常の表示画像 (つまり、class="show" ボックス内の画像) のサイズの比率は同じになります。

ここでは、いくつかの効果を実現するために js を使用する必要があります。

1. マウスを通常の画像ボックス内に移動すると、カバー レイヤーと拡大レイヤー ボックスが表示されます。マウスを通常の画像ボックスから移動すると、カバー レイヤーと拡大レイヤー ボックスは非表示になります。
2. カバーレイヤーをマウスで通常の画像ボックス内を移動するように配置します。それに応じて、拡大されたレイヤー画像が拡大されたレイヤーボックス内を移動します。
3.サムネイル切り替え効果を設定し、サムネイルを切り替えると、通常画像と拡大画像が対応する画像に切り替わります。

次にコード:

クラス MgnGlass {
    コンストラクタ(要素、配列) {
        this.ele = ele;
        this.array = 配列;

        this.show = ele.querySelector('.show');
        this.showImg = this.show.querySelector('img');
        this.drag = ele.querySelector('.drag');
        this.magnify = ele.querySelector('.magnify');
        this.oUl = ele.querySelector('ul');
        this.oUlis = ele.querySelectorAll('ul li');
    }

 // 後で定義されるすべてのメソッドを呼び出すメソッドを定義します // エントリ関数 init() {
        this.setMouse();
        this.setPosition();
        タブを設定します。
    }

    //マウスの動きを内側と外側にsetMouse() {
     //マウスオーバーして画像領域を表示し、カバーレイヤーと虫眼鏡を表示します this.show.addEventListener('mouseover', () => {
            this.drag.style.display = 'ブロック';
            this.magnify.style.display = 'ブロック';
        });
        //マウスアウトして画像領域を表示し、カバーレイヤーと虫眼鏡を非表示にします this.show.addEventListener('mouseout', () => {
            this.drag.style.display = 'なし';
            this.magnify.style.display = 'なし';
        });
    }

 // マウスが画像領域内を移動したときの配置効果を設定します // 1. カバーレイヤーをマウスの動きに追従させます---前のマウスドラッグ効果と同様です setPosition() {
        this.show.addEventListener('mousemove', (e) => {
            e = e || イベント;
            // 1. カバー レイヤーを配置します // マウスの位置によってカバー レイヤーの左上隅の座標位置を計算します let x = e.clientX - this.ele.offsetLeft - this.ele.clientLeft - this.drag.clientWidth / 2;
            y = e.clientY - this.ele.offsetTop - this.ele.clientTop - this.drag.clientHeight / 2 とします。

   // 2、境界値を設定します // 最小値は 0、最大値は親 div の幅と高さ - カバー レイヤーの幅と高さ if (x < 0) {
                0 の場合
            }
            そうでない場合、(x > (this.show.clientWidth - this.drag.clientWidth)){
                x = this.show.clientWidth - this.drag.clientWidth;
            }
            (y < 0)の場合{
                y = 0;
            }
            そうでない場合、(y > (this.show.clientHeight - this.drag.clientHeight)){
                y = this.show.clientHeight - this.drag.clientHeight;
            }

   // 3、カバー レイヤーに値を配置します this.drag.style.left = x + 'px';
            this.drag.style.top = y + 'px';

   // 4. 右側の虫眼鏡の背景画像も一緒に移動する必要があります // 背景画像に位置合わせを追加します // 左側の画像は固定で、カバーレイヤーが移動します カバーレイヤーが移動します 100 100
            // 右側は虫眼鏡ですが、これは動いていません。背景画像は動いています。背景画像は動いています -100 -100
            // 移動する場合、比率に応じて配置を設定する必要があります // 背景画像の配置 = 背景画像のサイズ * カバーレイヤーの配置 / 画像のサイズ // カバーレイヤーの移動の比率によって背景画像の配置値を計算します let backX = 2400 * x / 600;
            Y = 2400 * y / 600 を返します。

   // 背景画像を配置します // 背景画像を配置します this.magnify.style.backgroundPosition = `-${backX}px -${backY}px`;
        })
    }

 // 切り替え効果 // 1. マウスが現在置かれているラベルにスタイルを追加します // すべてのラベルからスタイルを削除し、現在クリックされている/渡されているラベルにスタイルを追加します setTab() {
        this.oUlis.forEach((アイテム、キー) => {
            item.addEventListener('マウスオーバー', () => {
             // 1、すべてのliタグのスタイルをクリアします this.oUlis.forEach((item2) => {
                    アイテム2.クラス名 = '';
                });
                // 2、現在のタグにスタイルを追加します。item.className = 'active';

    // 3、画像を設定します // 現在のラベルのインデックス添え字キーは、対応する画像配列に表示される画像のインデックス添え字です // 1、画像ラベルのパスを設定します // 配列、インデックス、および画像属性を通じて対応する画像名を取得します // label.src = 代入または label.setAttribute('src', 属性値) this.showImg.setAttribute('src', `./images/${this.array[key].normal}`);
                // 2. 虫眼鏡領域の背景画像のパスを設定します。 // 背景画像に関するすべての設定を書き換える必要があります this.magnify.style.background = `url('./images/${this.array[key].big}') no-repeat 0 0 / 2400px`;
            })
        })
    }
}

虫眼鏡効果を完璧に実現するには、次の 2 つの比率に注意する必要があります。

1. CSS スタイル比率: 画像領域のサイズ: カバーレイヤーのサイズ = 背景画像のサイズ: 虫眼鏡領域のサイズ
2. 配置比率: カバーレイヤーの配置: 画像領域のサイズ = 背景画像の配置: 背景画像のサイズ

次に、コンストラクターを呼び出して最終的な HTML を取得し、それを実行して虫眼鏡効果を実現します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅,初期スケール=1.0">
    <title>虫眼鏡</title>
    <link rel="スタイルシート" type="text/css" href="./css/mgfyGlass.css" >
</head>
<本文>
    <div id="ボックス">
        <div class="show">
            <img src="./images/1.jpg" alt="#">
            <div class="ドラッグ"></div>
        </div>
        <div class="拡大"></div>
        <ul>
            <li class="active"><img src="./images/1.small.jpg" alt="#"></li>
            <li><img src="./images/2.small.jpg" alt="#"></li>
        </ul>
    </div>

    <script type="text/javascript" src="./javascript/mgfyGlass.js"></script>

    <スクリプト>
        oBox = document.querySelector('#box');
        
        定数imgArr = [
            {小さい: '1.small.jpg'、通常: '1.jpg'、大きい: '1.big.jpg'},
            {小さい: '2.small.jpg'、通常: '2.jpg'、大きい: '2.big.jpg'}
        ];
        
        const mgnGlass = new MgnGlass(oBox, imgArr);
    
        mgnGlass.init();
    
    
    </スクリプト>
</本文>
</html>

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

以下もご興味があるかもしれません:
  • js 虫眼鏡拡大画像効果
  • 虫眼鏡の効果を実現するために js を使用する簡単な例
  • JavaScript 画像拡大鏡効果コード [コードは比較的シンプルです]
  • 魔法のJavascript画像拡大鏡
  • JavaScript 画像拡大鏡(ドラッグ アンド ドロップ、ズーム効果)
  • ネイティブ js で記述された虫眼鏡効果
  • 電子商取引サイトでよく使用される js 虫眼鏡効果
  • JavaScript 画像切り取り効果(虫眼鏡)
  • 虫眼鏡アイコンを使用した画像拡大鏡 jquery.jqzoom.js の使用例
  • js画像拡大鏡効果の実装方法を詳しく解説

<<:  ul リスト タグ デザイン ウェブ ページ 複数列レイアウト

>>:  MySQL binlog_ignore_dbパラメータの具体的な使用法

推薦する

ミニプログラムにより、製品属性の選択や仕様の選択が可能

この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...

uniapp は日付と時刻の選択機能を実装します

この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...

見落とされがちなMETAタグの特殊効果(ページ遷移効果)

Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...

MySQLのインデックスシステムがB+ツリーを使用する理由の分析

目次1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 3. インデック...

MySQL 作成ルーチン権限に関する注意事項

1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...

Kubernetes を使用して Springboot または Nginx をデプロイするための詳細なチュートリアル

1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...

CentOS7 で Jenkins+Maven+Git 継続的インテグレーション環境を構築する方法

この記事では、Spring boot + Maven プロジェクトのデプロイメントを例に、Code ...

EDMをHTMLで記述する際の注意点まとめ(メール送信時の一般的な注意点)

フォーマットエンコーディング1. ページの幅は600~800px、長さは1024px以内に設定してく...

JavaScript シミュレーション計算機

この記事では、JavaScriptシミュレーション計算機の具体的なコードを参考までに紹介します。具体...

JavaScriptのプロトタイプオブジェクトを徹底的に理解しましょう

目次1. プロトタイプとは何ですか? 1.1 関数プロトタイプオブジェクト1.2 コンストラクタを使...

Linuxでホスト名を永続的に変更する方法

ホスト名を変更する場合は、以下の手順に従ってください。ホスト名の使用hostnameコマンドを使用す...

丸い角や鋭い角を表現するために、絵の代わりに文字を使用する研究

Google Gmail ページから撮った次のスクリーンショットをご覧ください (同じ場所からスクリ...

Centos7 に PHP と Nginx をインストールする詳細なチュートリアル

Centos のサーバー側への適用がますます普及するにつれて、Centos7 もますます使用されるよ...

CSS エクスペリエンスを充実させる 5 つの便利な CSS セレクターを紹介します

Web デザイナーとして豊富な CSS 経験を持つ私たちは、あらゆる種類のコード構文、互換性、スニペ...

MySQL サブクエリ (ネストされたクエリ)、結合テーブル、複合クエリの詳細な説明

1. サブクエリMySQL 4.1以降はサブクエリをサポートしていますサブクエリ:別のクエリ内にネス...