この記事では、Jingdongの虫眼鏡効果を実現するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。 ケーススタディ
コード<!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> <スタイル> .preview_wrap { 幅: 400ピクセル; 高さ: 400px; } .preview_img { 位置: 相対的; 高さ: 398ピクセル; 境界線: 1px 実線 #ccc; } 。マスク { 表示: なし; 位置: 絶対; 上: 0; 左: 0; 幅: 300ピクセル; 高さ: 300px; 背景: #FEDE4F; 不透明度: .5; 境界線: 1px 実線 #ccc; カーソル: 移動; } 。大きい { 表示: なし; 位置: 絶対; 左: 410px; 上: 0; 幅: 500ピクセル; 高さ: 500px; 背景色: ピンク; zインデックス: 999; 境界線: 1px 実線 #ccc; オーバーフロー: 非表示; } /* 左上を設定する前に、画像に絶対位置を追加する必要があります */ .bigimg{ 位置: 絶対; 上: 0; 左: 0; } </スタイル> </head> <本文> <div class="preview_wrap"> <div class="preview_img"> <img src="images/s3.png" alt=""> <div class="mask"></div> <div class="big"> <img src="images/big.jpg" alt="" class="bigImg"> </div> </div> </div> <スクリプト> var preview_img = document.querySelector('.preview_img'); var マスク = document.querySelector('.mask'); var big = document.querySelector('.big'); // 1. マウスがpreview_imgの上を通過すると、マスクレイヤーと大きなボックスの表示と非表示を切り替える preview_img.addEventListener('mouseover', function() { mask.style.display = 'ブロック'; big.style.display = 'ブロック'; }) preview_img.addEventListener('mouseout', 関数() { マスクスタイル表示 = 'なし'; big.style.display = 'なし'; }) // 2. マウスが動くと、黄色のボックスがマウスに追従するようにします preview_img.addEventListener('mousemove', function(e) { // (1). まずボックス内のマウスの座標を計算します var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // コンソールログ(x, y); // (2) ボックスの高さの半分 300 を減算して 150 を取得します。これがマスクの最終的な左と上の値です // (3) マスクが移動する距離 var maskX = x - mask.offsetWidth / 2; var maskY = y - mask.offsetHeight / 2; // (4) x座標が0未満の場合、0で停止します // オクルージョンレイヤーの最大移動距離 var maskMax = preview_img.offsetWidth - mask.offsetWidth; マスクX <= 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'; // 3. 大きな画像の移動距離 = 遮蔽レイヤーの移動距離 * 大きな画像の最大移動距離 / 遮蔽レイヤーの最大移動距離 // 大きな画像 var bigIMg = document.querySelector('.bigImg'); // 大きな画像の最大移動距離 var bigMax = bigIMg.offsetWidth - big.offsetWidth; // 大きな画像の移動距離 XY var bigX = maskX * bigMax / maskMax; var bigY = maskY * bigMax / maskMax; bigIMg.style.left = bigX + 'px'; bigIMg.style.top = bigY + 'px'; }) </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 要素(背景画像)の下に水平線アニメーションを実現するための純粋な CSS
>>: Docker イメージのダウンロードが遅すぎる場合の解決策
1. 何ですか視差スクロールとは、複数の背景レイヤーを異なる速度で動かすことで、3次元のモーション...
目次Linux - ファイル記述子、ファイルポインタ、インデックスノード1. Linux - ファイ...
この記事では、Linux 環境で crontab コマンドを使用して、タスクの定期的な実行をスケジュ...
まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...
この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。...
7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...
今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...
1. 継続的デリバリーとは何かソフトウェア製品の出力プロセスは、ソフトウェアがいつでもリリースできる...
目次プロトタイプチェーンプロトタイプチェーンに基づいてシンプルなJQueryライブラリを実装すること...
序文MySQL マスター スレーブ レプリケーションの基本原理は、スレーブ データベースがマスター ...
1. 単一列インデックスどの列にインデックスを作成するかを選択することは、パフォーマンス最適化プロ...
この記事では、階段スライド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...
目次プレゼンテーション層ビジネスレイヤーコアプラグイン xlsx ExcelインポートExcelエク...
序文ファイル システムは、データの保存方法と復元方法を整理する役割を担います。 いずれにせよ、時間の...
目次概要setTimeout() の確認スリープ関数の書き方シンプルな選択ループで実行されますか?要...