この記事では、ショッピングサイトの商品の拡大鏡効果を実現するための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 スタイルを設定する際に注意すべき点は次のとおりです。
ここでは、いくつかの効果を実現するために js を使用する必要があります。 1. マウスを通常の画像ボックス内に移動すると、カバー レイヤーと拡大レイヤー ボックスが表示されます。マウスを通常の画像ボックスから移動すると、カバー レイヤーと拡大レイヤー ボックスは非表示になります。 次にコード: クラス 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 スタイル比率: 画像領域のサイズ: カバーレイヤーのサイズ = 背景画像のサイズ: 虫眼鏡領域のサイズ 次に、コンストラクターを呼び出して最終的な 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ul リスト タグ デザイン ウェブ ページ 複数列レイアウト
>>: MySQL binlog_ignore_dbパラメータの具体的な使用法
1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...
この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...
目次プロジェクトにおける一般的な支払い方法Alipay決済微信ペイプロジェクトにおける一般的な支払い...
<!DOCTYPE ヘムル パブリック> <html> <ヘッド&g...
最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...
序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...
1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...
まず、provide/inject を使用する理由について説明しましょう。祖父コンポーネントと孫コン...
目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...
最近、モバイル プロジェクトの開発方法を学ぶために vue を使用し、スクロールには better-...
この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...
目次マップ状態マップゲッターマップミューテーションマップアクション複数のモジュールマップ状態 ...
1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...
基本的な構文text-overflow を使用するには、hight、over-flow:hidden...
CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...