この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介します。具体的な内容は次のとおりです。 効果: html: <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> css: .preview_img { 位置: 相対的; 高さ: 398ピクセル; 境界線: 1px 実線 #ccc; } 。マスク { 表示: なし; 位置: 絶対; 幅: 300ピクセル; 高さ: 300px; 上: 0; 左: 0; 背景: #FEFE4F; 不透明度: .5; 境界線: 1px 実線 #ccc; カーソル: 移動; } 。大きい { 表示: なし; 位置: 絶対; 幅: 550ピクセル; 高さ: 550px; 上: 0; 左: 410px; zインデックス: 999; 境界線: 1px 実線 #ccc; オーバーフロー: 非表示; } .bigimg{ 位置: 絶対; 左: 0; 上: 0; } js (強調): window.addEventListener('load',function(){ var preview_img = document.querySelector('.preview_img'); var マスク = this.document.querySelector('.mask'); var big = this.document.querySelector('.big'); var bigImg = this.document.querySelector('.bigImg'); //マウスオーバー preview_img.addEventListener('mouseover',function(){ mask.style.display = 'ブロック'; big.style.display = 'ブロック'; }) //マウスアウト preview_img.addEventListener('mouseout',function(){ マスクスタイル表示 = 'なし'; big.style.display = 'なし'; }) //マウスが動くと preview_img.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; // 大きな画像の移動距離 // オクルージョン レイヤーの最大移動距離 var maskMaxX = preview_img.offsetWidth - mask.offsetWidth; var maskMaxY = preview_img.offsetHeight - mask.offsetHeight; //X座標が0未満の場合は0のままにします if (maskX <= 0) { マスクX = 0; }それ以外の場合 (maskX >= maskMaxX) { マスクX = マスクMaxX; } //Y座標が0未満の場合は0のままにします if (maskY <= 0) { マスクY = 0; }それ以外の場合 (maskY >= maskMaxY) { マスクY = マスクMaxY; } //オクルージョン レイヤーの移動 mask.style.left = maskX + 'px'; mask.style.top = maskY + 'px'; // 大きな画像の最大移動距離 var bigMaxX = bigImg.offsetWidth - big.offsetWidth; var bigMaxY = bigImg.offsetHeight - big.offsetHeight; //大きな画像の移動距離XY // 大きな画像の移動距離 = オクルージョン レイヤーの移動距離 * 大きな画像の最大移動距離 / オクルージョン レイヤーの最大移動距離 var bigX = maskX * bigMaxX / maskMaxX; var bigY = maskY * bigMaxY / maskMaxY; // 大きな画像と小さな画像 (マウスの動き) は反対方向です。bigImg.style.left = -bigX + 'px'; bigImg.style.top = -bigY + 'px'; }) }) 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法
MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...
背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...
元の派生コマンド: bin/sqoop インポート -connect jdbc:mysql://19...
この記事では、モバイル端末を一度に1画面ずつ上下にスライドさせるためのJSの具体的なコードを参考まで...
序文そこでこのブログを書きました。このブログでは大物の記事からいくつかの知識も推奨しています。侵害が...
1.ダウンロードしてインストールする公式ウェブサイトからコミュニティ エディションの dmg インス...
このブログは仕事のメモです環境: nginx バージョン: nginx/1.14.0 Centos ...
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...
My97DatePicker は非常に柔軟で使いやすい日付コントロールです。使い方はとても簡単です。...
目次モードパラメータハッシュ履歴ハッシュ履歴.push()ハッシュ履歴.replace()アドレスバ...
この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...
目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...
1. 関連ツールと画像をダウンロードするダウンロードリンクバーチャルボックス: https://do...
この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...
目次1. WeChatパブリックプラットフォームからWeChat開発者ツールをダウンロードする2. ...