jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

この記事では、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS で画像を拡大・縮小する 2 つの簡単な方法
  • js 虫眼鏡拡大画像効果
  • jsは画像をクリックして画像を拡大する方法を実装します
  • jsは画像をクリックすると画面の中央にポップアップして拡大する効果を実現します。
  • JSは、マウスをサムネイルに移動して大きな画像を表示するときに画像のズーム効果を実現します。
  • マウスを上にスライドさせた後の画像拡大とフローティング効果の js コード
  • JavaScript 画像拡大鏡効果コード [コードは比較的シンプルです]
  • 画像拡大表示効果を実現するjs
  • モバイル HTML5 は photoswipe.js を使用して WeChat Moments の写真のズーム効果を模倣します
  • JSウェブページ画像ビューア(IE、FFと互換性あり)は、画像の拡大・縮小や移動を制御できます。

<<:  ウェブデザインの仕事に応募する方法

>>:  CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

推薦する

MIME TYPEとは?MIME-Typesタイプコレクション

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

Node.js を使用して png 画像に透明なピクセルがあるかどうかを判断する方法

背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...

MySQLからHiveにさらにデータをインポートするためのソリューション

元の派生コマンド: bin/sqoop インポート -connect jdbc:mysql://19...

JSはモバイル端末の画面を1つずつ上下にスライドさせる機能を実装します

この記事では、モバイル端末を一度に1画面ずつ上下にスライドさせるためのJSの具体的なコードを参考まで...

MySQL における引用符とバックティックの違いと使い方の詳細な説明

序文そこでこのブログを書きました。このブログでは大物の記事からいくつかの知識も推奨しています。侵害が...

Mac での MySql の詳細なインストールと構成

1.ダウンロードしてインストールする公式ウェブサイトからコミュニティ エディションの dmg インス...

geoip を使用して nginx で地域を制限する方法

このブログは仕事のメモです環境: nginx バージョン: nginx/1.14.0 Centos ...

JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...

JS 日付コントロール My97DatePicker の基本的な使い方

My97DatePicker は非常に柔軟で使いやすい日付コントロールです。使い方はとても簡単です。...

vue-router からのフロントエンドルーティングの 2 つの実装

目次モードパラメータハッシュ履歴ハッシュ履歴.push()ハッシュ履歴.replace()アドレスバ...

Docker+Jenkinsを使用して自動的にビルドおよびデプロイする

この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...

MySQL テーブル分割後にスムーズにオンラインになる方法

目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...

VirtualBox での CentOS 8.1 仮想マシンのインストールを最小限に抑える詳細なチュートリアル

1. 関連ツールと画像をダウンロードするダウンロードリンクバーチャルボックス: https://do...

Reactはページング効果を実装する

この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...

CocosCreatorでWeChatゲームを作成する方法

目次1. WeChatパブリックプラットフォームからWeChat開発者ツールをダウンロードする2. ...