この記事では、ショッピングサイトの商品の拡大鏡効果を実現するための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パラメータの具体的な使用法
この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...
この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...
Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...
目次1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 3. インデック...
1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...
1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...
この記事では、Spring boot + Maven プロジェクトのデプロイメントを例に、Code ...
フォーマットエンコーディング1. ページの幅は600~800px、長さは1024px以内に設定してく...
この記事では、JavaScriptシミュレーション計算機の具体的なコードを参考までに紹介します。具体...
目次1. プロトタイプとは何ですか? 1.1 関数プロトタイプオブジェクト1.2 コンストラクタを使...
ホスト名を変更する場合は、以下の手順に従ってください。ホスト名の使用hostnameコマンドを使用す...
Google Gmail ページから撮った次のスクリーンショットをご覧ください (同じ場所からスクリ...
Centos のサーバー側への適用がますます普及するにつれて、Centos7 もますます使用されるよ...
Web デザイナーとして豊富な CSS 経験を持つ私たちは、あらゆる種類のコード構文、互換性、スニペ...
1. サブクエリMySQL 4.1以降はサブクエリをサポートしていますサブクエリ:別のクエリ内にネス...